Title: Inline CSS
Last modified: August 31, 2016

---

# Inline CSS

 *  Resolved [rarcher30](https://wordpress.org/support/users/rarcher30/)
 * (@rarcher30)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/)
 * Hi Tom,
    Awesome theme! I’ve been checking it out over the last few days and 
   running SEO checks and WCAG validators over your demo website. Not a perfect 
   result but it’s pretty hard to find a website that is! I like the way in which
   you build the theme customisation heavily into Customizer and not a big ol (redux)
   like theme options panel like most theme authors do, looks like you hook into
   the native WP core and I hear that it’s the recommended approach from the WordPress
   evangelists (as it is supposed to not lock users into a dependancy on themes).
 * Anyhow, my particular question today is regarding the big chunk of inline css
   that appears in every page. My initial thoughts is that you are actively practicing‘
   above the fold’ css coding techniques in an attempt to make the pages load faster.
   Is this assumption correct? Most WP themes do it but not usually for ‘above the
   fold’ optimisation. Have had some atrocious themes from ThemeForest dump like
   100+ lines of css inline when it really could have gone into an external file(
   s).
 * Just one other small question while I am on the subject. Is it possible to make
   a child theme from GeneratePress so if I need to mod the css, subsequent upgrades
   to the theme won’t play havoc with the website?

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/#post-7152359)
 * Hi there,
 * Glad you’re enjoying the theme! Performance is a super high priority for me –
   I’m always looking to improve it.
 * That CSS is generated by options in the Customizer.
 * While it may be possible to generate it in a dynamic stylesheet, it would be 
   at the expense of performance, and it would require one more external resource
   to be loaded on every page load.
 * The way it is currently doesn’t look great to the human eye, but being above 
   the fold (as you mentioned) doesn’t have any negative impact on performance at
   all.
 * You can absolutely use a child theme to add your own CSS and functions: [http://generatepress.com/api/themes/generatepress_child.zip](http://generatepress.com/api/themes/generatepress_child.zip)
 * Let me know if you have any other questions or concerns 🙂
 *  Thread Starter [rarcher30](https://wordpress.org/support/users/rarcher30/)
 * (@rarcher30)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/#post-7152466)
 * Ha ha, website speed performance for me is like an itch I just can’t stop scratching!
 * I’m addicted to Varvy, Google Page Insights and GTMetrix.
    Let me know if there
   is another handy one that you use.
 * Like I said, I have been turned of “swiss army knife” themes in the big repos
   and will only use them if client things they need everything and wants an easy
   to use page builder (drag n drop). Visual Composer absolutely smashes page speed
   performance and it’s something I have written to them about on a few occasions.
 * I’ve recently taken to making up my own themes using either Joints WP (Z Foundation
   based) or underscore to make my own and go nuts over the php files and making
   my own customizations and post types, widgets, etc. But this obviously takes 
   time, and not easy to get it working on old browser like IE8. I like the way 
   your theme also supports IE8 as my current government client needs to support
   this dinosaur browser at least at a reduced capacity but your theme pulls it 
   off remarkably well. Obviously, accessibility is a big thing too (hence when 
   using Joints WP based on Foundation it apparently assists to meet 508 compliance).
   But when handing it over to user – there is no easy ‘wizard’ interface that assists
   them to customise their website. That’s why I like your theme and hopefully I
   can use it as my base to create better finished themes. How do you approach accessibility
   and WCAG in GeneratePress? Not the color contrast stuff but the semantic markup
   of the HTML. This also flows over into SEO as well. From a quick look at your
   code it appears to tick the boxes.
 * Would a child theme add an [@import](https://wordpress.org/support/users/import/)
   to the default stylesheet. Obviously the page speed checkers don’t like this 
   and apparently it is the old way of doing child themes according to the WordPress
   codex. Do you use ‘wp_enqueue_scripts’ action? [https://codex.wordpress.org/Child_Themes](https://codex.wordpress.org/Child_Themes)
 * Sorry for the long post. I’m probably getting excited and ‘geeking’ out.
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/#post-7152468)
 * GeneratePress is accessible and fully schema integrated (for SEO).
 * I need to have an accessibility review done soon to make sure I’ve covered everything,
   it’s on my to-do list.
 * No need to add [@import](https://wordpress.org/support/users/import/) in your
   child theme – GP takes care of that for you in a much better way that doesn’t
   hurt performance.
 * Glad you’re enjoying GP so far – if you find anything you think needs improving
   I’m all ears! 🙂
 *  Thread Starter [rarcher30](https://wordpress.org/support/users/rarcher30/)
 * (@rarcher30)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/#post-7152479)
 * Hey Tom. You are most speedy forum reply guy ever! Those donated coffees must
   be helping you push through.
 * Now that you mention it, there is something that caught my eye and it’s the text
   in the header that goes above the logo (tagline).
 * 1) They appear to be P element classes (i.e. .main-title) and I think it failed
   an accessibility checker I put it through. Any reason it can’t be a H1 and H2
   elements respectively? I could not find this PHP code to edit.
 * 2) I can’t find a way to put the logo on top and the site title text underneath
   it. After looking into your header.php file, I found this line of code `<?php
   do_action( 'generate_before_header_content'); ?>` – so then I chased it down 
   in the functions.php file and later the navigation.php. So far I could not figure
   out how to change the order.
 * I’m looking at your CSS responsive code and it appears as though you are using
   the ‘Unsemantic’ framework. Is this assumption correct?
 * I’m also attempting to change the font size for the footer widgets (i am using
   text widgets). Tried this css but its not working: `.site-footer .footer-widgets.
   inside-footer-widgets div aside { font-size: 10px!important; }` Trying to be 
   specific as I can but something is overriding it and I don’t think it is Customizr
   styles.
 * By the way, nice clean code! I can see how you put the widgets and post types
   together and some other stuff I am still learning.
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/#post-7152480)
 * Hi there,
 * 1. This is preference really. You shouldn’t have more than one H1 on your page,
   and it should be the title of the page vs the title of your website in my opinion.
 * You can edit this using the same answer as #2.
 * 2. You can rearrange the header items and adjust the main-title element by overwriting
   the generate_header_items() function: [http://pastebin.com/Lef68xBF](http://pastebin.com/Lef68xBF)
 * Simply rearrange the sections in there and adjust the HTML as needed. The function
   can be added to your child theme functions.php file.
 * 3. That’s correct, the grid is using the Unsemantic framework.
 * 4. This is included in the Typography add-on, but this CSS should work just fine:
 *     ```
       .footer-widgets .widget {
           font-size: 10px;
       }
       ```
   
 * Hope this helps 🙂
 *  Thread Starter [rarcher30](https://wordpress.org/support/users/rarcher30/)
 * (@rarcher30)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/#post-7152481)
 * Awesome Tom, that helps out heaps. I can see your point about point (1). I will
   take it to my UX/UI colleague and get them to make the call on it.
 * Thanks again!
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/#post-7152491)
 * You’re welcome!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Inline CSS’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot.
   png)
 * GeneratePress
 * [Support Threads](https://wordpress.org/support/theme/generatepress/)
 * [Active Topics](https://wordpress.org/support/theme/generatepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/)

## Tags

 * [above the fold](https://wordpress.org/support/topic-tag/above-the-fold/)
 * [child theme](https://wordpress.org/support/topic-tag/child-theme/)
 * [inline css](https://wordpress.org/support/topic-tag/inline-css/)
 * [optimisation](https://wordpress.org/support/topic-tag/optimisation/)

 * 7 replies
 * 2 participants
 * Last reply from: [Tom](https://wordpress.org/support/users/edge22/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/inline-css-8/#post-7152491)
 * Status: resolved