This is the main tab to configure some of the important aspects of MinimalCSS. By having control over the CSS selectors and Extra HTML, you can fine tune how the plugins works.
Enable Live Mode
This switch will enable the functionality of the MinimalCSS plugins for your website’s visitors. When “on” the plugin will serve the minimal CSS files instead of the original CSS files on the site. If you notice issues with the styling on your website after enabling the switch, you can quickly turn it off in order to investigate the issues.
Note: When you are generating MinimalCSS files, the plugin automatically switches Live Mode OFF. This is important to allow the remote MinimalCSS server to view your pages with their original CSS. Once the MinimalCSS process is complete, the plugin will turn Live Mode back on.
Enable Test Mode
Test mode allows you to test the styling of the website as you generate the MinimalCSS files. You need to be logged in to the WordPress admin dashboard in order for test mode to work.
TIP: When you first start using the MinimalCSS plugin, the ideal settings would be to Disable Live Mode, and Enable Test Mode. This way your visitors will not be impacted as you test and configure MinimalCSS.
If you are developing a new page or a feature that requires new CSS, you can disable Test mode while keeping Live mode on. This ensures your visitors can continue to enjoy the benefits of the generated CSS files, while you are able to work with the original CSS files of the website.
Auto Generate on Publish
When this setting is enabled, the MinimalCSS files are automatically generated when new pages and posts are published.
Select Post Types / Taxonomies to Optimize
Use the dropdown to select which Post Types you want to optimize. These should only include post types that appear as actual pages on your website. For example, regular pages, blog posts, products, etc.
Post types that do not appear as actual pages on your website should not be selected. For example, you might have items such as “testimonials” or “projects” in the dropdown – depending on your site’s design. But they might not be viewed as their own separate pages on the site.
One way to find out is by going to the Pages & Posts tab. Select the corresponding post type from the dropdown and then click on any of the records that appear in the list. If the page that you see corresponds to a real page on the site, then this type of post type should be selected.
The same applies to the Taxonomies dropdown list.
Why is this needed?
1. By selecting only the post types and taxonomies needed, the dropdowns on the Pages & Posts and Archives tabs, will only display the corresponding selections. This way you won’t have to keep seeing the ones you don’t need moving forward.
2. Generate All feature: Your selections here will also be used to build the list of records to use in the Tools -> General All feature.
Safelisted CSS Selectors
Some CSS on your website is not triggered until user action activates the elements styled by the CSS in question. Examples of user action include clicking and scrolling. Sticky navigation bars, back-to-top links, and animations that slide or fade content into view are a few examples.
Adding the CSS in question to a list of safelisted CSS selectors allows MinimalCSS to include these selectors during the process of building the CSS file even when the selectors are not encountered during the run.
A list of suggested values can be used as a started point. However, to get the smallest possible CSS file, it is recommended you only include the minimum number of CSS selectors needed to successfully render your website pages correctly.
Make sure to enter 1 CSS selector per line.
Extra HTML
The Extra HTML is similar in concept to the Whitelisted CSS selectors. But whereas CSS selectors are needed for styling elements that come into view as your scroll a page, the Extra HTML is needed for elements that only become visible when someone clicks a link or button. Examples of these elements include a popup or video overlay.
Click here for detailed instructions.