Is there a way to move the huge css block to an external file or even cut down?
Its the one that starts with <!– custom styles set at your backend–>
There is a way to do both.
1. To remove all unused css (once you are completely finished with your design). Install https://addons.mozilla.org/en-US/firefox/addon/css-usage/?src=api this addon for firefox which will scan multiple pages in your website to determine which pages use what rules and then come up with every css file and inline css selector that is not used on any of the pages. Then you just open up the files from the list and take them out manually. There is a pay plugin for Chrome that actually takes them out for you, but the problem is that some are used by jQuery and are not included. Seems funny, but there is no better way to do clean up the css.
2. To remove the dynamically generated css, you can view source, and copy the contents of the block of css you mentioned to your custom.css file. Just be aware that you will no longer be able to style the theme using the backend at Replete > Theme Options > Styling
Please open up /framework/php/class-style-generator.php and add // to lines 92-96 so that they will look like
//echo "n<!-- custom styles set at your backend-->n";
//echo "<style type='text/css' id='dynamic-styles'>n";
//echo "n<!-- end custom styles-->nn";
Leaving line 97 alone was not an oversight.
What you can also do, is locate every css file that is used by viewing source, and then add the contents of each one in the same order as they are displayed on the view source to your style.css file. Then use notepad++ to scan your theme for the names of each stylesheet to find the handle its registered under and then wp_dequeue_style( $handle ) in the functions.php file. This way you will only have 1 css file at the end.
The topic ‘The on page CSS style block’ is closed to new replies.