Skytouch
Member
What is the best way to add or edit custom CSS to change a whole bunch of font faces and sizes? I have CSSEDIT and have poked around in both styles.css and optionstyles.css, but I don't understand who is over-riding whom. For example, I changed H1 size to 28px under theme options but can't find where that shows up in either of the two css files I mentioned.
Thanks for your advice.
Sky
vfxdude
admin
I recommend using Firebug to see what code overrides what. The best way to edit css is to create a child theme and override the styles from there. You can check out the child theme examples how this is done.
All styles set in style.css will be overridden without any more specificity, but the styles set in the theme settings will need some extra specificity. Example how to override stuff set in the body tag in the settings script (adding html before the body overrides it):
html body { font-size: 15px; background-color: #eee; }
btw, you should change the H1 size in the theme settings ("Article header & H1-tag size" in the typography tab), and that is the best way, since the post headings vary between H1 and H2 (SEO improvement). and, there is no point to edit optionstyles.css since this file is regenerated every time you save the settings (if the "Cache the settings stylesheet" setting is set).
vfxdude
admin
yes it's an order issue. btw the child themes that can be downloaded here add the parent theme style.css in functions.php (with a hook), so no include in the style.css is necessary. This was done due to better performance. The include statements in stylesheets slows down the website.
You must log in to post.