How to Customize Your Maintenance Page Layout with CSS

Many users of the 'LightStart – Maintenance Mode, Coming Soon and Landing Page Builder' plugin want to fine-tune their page's appearance. A common request is to adjust spacing, change fonts, or reposition elements to create a more polished and effective landing page. This guide will walk you through the most common CSS customizations for the plugin.

Why You Might Need CSS Customizations

The plugin provides a robust set of design options, but it cannot include a visual toggle for every possible design preference. For highly specific layout changes—like exact pixel spacing, custom fonts, or moving elements—adding your own CSS code is the most effective method. This approach gives you complete control over the final look of your maintenance or coming soon page without modifying the plugin's core files.

Common Customization Solutions

1. Adding Custom CSS to Your Site

Before making any changes, you need a way to add custom CSS. The recommended method is to use the built-in 'Custom CSS' box within the plugin's settings. Navigate to Settings → WP Maintenance Mode → Design → Custom CSS and add your code there. This is the safest place as it persists through plugin updates.

2. Changing Fonts

The plugin does not have a built-in font picker. To change fonts, you must use CSS. You will need to target the appropriate HTML elements and specify your font.

.wp-maintenance-mode .title { font-family: 'Your Font Name', sans-serif; }
.wp-maintenance-mode .text { font-family: 'Your Font Name', sans-serif; }

Replace 'Your Font Name' with the actual name of the font you want to use. If you are using a web font from Google Fonts or similar, ensure you have also added the necessary <link> tag to your page's header.

3. Adjusting Spacing (Margins and Padding)

To reduce or increase the space between elements like headings, text, and countdowns, you can use the CSS margin and padding properties.

/* Reduce space below a heading */
.wp-maintenance-mode .title {
    margin-bottom: 10px !important;
}

/* Add space above the countdown timer */
.wp-maintenance-mode .countdown {
    margin-top: 50px !important;
}

/* Move the entire content section down from the top */
.wp-maintenance-mode .wrap {
    margin-top: 100px !important;
}

Adjust the pixel values (10px, 50px, etc.) to achieve your desired spacing.

4. Modifying Text Width

If your text container is too narrow or too wide, you can adjust its maximum width.

/* Make the text container wider */
.wp-maintenance-mode .wrap {
    max-width: 800px !important;
}

Important Notes and Best Practices

• Use !important: The plugin's stylesheets may have strong specificity. Adding !important to your CSS rules often helps ensure your custom styles are applied.
• Test Responsiveness: After making changes, always check how your page looks on different screen sizes (mobile, tablet, desktop). You may need to add additional CSS media queries for a responsive design.
• Browser Tools are Your Friend: Use your web browser's developer tools (often opened by pressing F12) to inspect elements on your page. This helps you identify the correct CSS classes to target and test changes in real-time before adding them to your site.

By using these CSS techniques, you can significantly customize the layout of your maintenance page to better fit your brand and design needs.