I noticed that we can edit a lot of things such as colors and fonts in the admin area of the theme.
Is it more efficient for pagespeed to edit the CSS directly, or does the admin panel automatically edit the CSS? I assume it’s just overriding the default CSS with a new CSS which seems more inefficient… I don’t mind getting into the code, my top priority is to make my site as efficient as it can be.
Thanks!
Hi..
I went through this with my own optimizations of the theme over the past 8 months or so. In our case we add a number of things to the functions.php file, take couple of things out, and for a couple of things we went ahead and edited the style.css file directly, and then minified it when uploaded. I think we also have to edit the main post file each time to make author visible on post (*SIGH*), and also change the prefix for hit counter since we’ve been using a custom field for many many years.
It did make site faster, just be sure to keep a cheat sheet of what you’re changing, and keep separate set of files as back up obviously. Minification helped the most, and if you’re only doing two or three over-rides for CSS in theme panel, it won’t impact anything; meaning you could just minify the style.css, put your couple of CSS overrides in the theme panel and call it a day. If you have 20 changes… yes, likely worth adding to the main style.css.
Downside is I tend to skip every couple of updates since I’m not doing anything with jetpack, buddypress, bbpress, WMPL, logins, social counter, woocommerce, where there have been some updates to help those type of users.
Thanks, Christopher! On a related note, do you know what happens on the backend when we edit/add CSS in the admin panel? Is it serving the browser a separate CSS file with our modifications or is the theme panel somehow editing the CSS file on the fly when the browser requests it?
HI, if memory serves, as with most themes, it writes the new custom CSS into the header of the live page. Put some custom CSS in panel, then check the header section of a post page file to see 🙂
I use a couple of custom CSS things on our sites, only because in some versions of theme and our setup some stuff like the today’s date color setting didn’t work, and I also use Disqus but wanted some more spacing between the banner ad and start of the comments module. Was easy to just put those there than go back to the main css.
In the old days themes would often have a custom.css file to put custom code, particularly with child themes. However, “redirects” of CSS files from child theme kind of made that a fools errand for SEO. (Google doesn’t like the style redirects.)
Common method for any minor custom CSS stuff is to put into the header anyway, after call to main CSS file.
But perhaps Marius,Emil,Etc. may have better answer to that.
The way this theme handles css is far from straightforward(not that there’s anything wrong with that!) It loads 2 different css files (3 if you have a child theme) as well as inlining a ton of styles from the Theme Panel in the header or footer depending on if you have the td_speed_booster plugin installed.
Depending on your Layout setting in the Theme Panel it will first load one of these files: td-bootstrap.css, td-bootstrap-980-not-resp.css, td-bootstrap-980-responsive.css or td-bootstrap-1170-not-resp.css. These are all compiled by TagDiv manually, using some combination of the Less files found in /Newspaper/includes/wp_booster/external/bootstrap/bootstrap-master/less.
If you have a child theme, it’s style.css will load next.
After that, it will load the theme style.css, which is compiled by TagDiv from the Less files located in /Newspaper/less_files.
The last step is to inline all of the styles that are defined in the Theme Panel. This is handled by 3 files, td_css_buffer.php, td_css_compiler.php and td_css_generator.php which are located in /Newspaper/includes/wp_booster. The td_css_generator.php file is where the Theme Panel option rules are hard-coded, the td_css_generator gets the settings from the Theme Panel and sends them to the compiler which then pushes the compiled styles to the td_css_buffer which writes them in the <head> or to the the td_speed_booster which loads them somewhere between the closing #outer-wrap </div> and </body>.
The theme has an on-the-fly compiler that can be used with the Less files in the less_files directory, you just go into /Newspaper/includes/wp_booster/td_config.php and set the Deploy Mode to dev instead of deploy. This will replace the theme’s style.css with the output of the less compiler.
This is problematic though, because this is only for development and once you have edited your styles, you cannot use that compiler to create a new style.css file to replace the old one(it outputs errors). You have to use a different compiler to get your final css file, because you can’t use the live compiler in production. This also does not affect the bootstrap or the hard-coded Theme Panel styles.
I’m using IDEA13 with the Less plugin and I can compile the main.less into a style.css that replaces the default one just fine, however I have not been able to do the same with the td-bootstrap.css. I need to figure out what magic combination of files in the bootstrap Less files will output the same td-bootstrap.css file that ships with the theme. Perhaps one of the TagDiv guys can shed some light on how that file is compiled?
