11 {{ upvoteCount | shortNum }}
11 {{ upvoteCount | shortNum }}

CSS Heaven - CSS Hell

by Luke Corden
9 replies
  • WEB DESIGN
    • |
Hi Warriors.

I'm building a blog on WP over at Luke Corden: Aspirationalist | Escaping The Slave Cycle One Post At A Time. There is nothing for sale on there for once it's just nice to be bloggin' for bloggin's sake.

My goal on this site is speed. Greasy fast speed from the ground up. I've done my home work and it seems that most speed fixes are pretty simple but I am a little bit confused in the CSS department.

Specifically when it comes to three things.

The first regards moving css style sheets to an external file. I have seen it done in DW but am wondering if CSS can just be edited in plain text and then moved into position via ftp? If so, how should the ftp file-tree look? Am I correct in thinking it would be:

yourdomain.com/wp-content/css/example.css
My second question is:

Do I just delete the original CSS from the wordpress html editor and replace it with the link to the appropriate file?

Third and finally (for now)...

Should I put CSS sprites in this same external folder i.e.

yourdomain.com/wp-content/css/css-sprites/example-css-sprite.css
Please be aware that I am very new to the coding side of things and whilst I could just use dreamweaver I am keen to learn.

Thank you for your time Warriors. I look forward to giving back.

LC
#css #css sprites #heaven #hell
  • Profile picture of the author David V
    The answer to both questions... no.
    Your running a theme so your css stylesheet is already external.
    They/it resides in the theme directory.

    When you say "Do I just delete the original CSS from the wordpress html editor" what are you referring to?
    If your talking about the "theme editor" in the admin panel then no.
    If you delete that all your theme styles will go with it

    ...and yes, you should edit css in a plain text editor. (and yes you can edit it with Dreamweaver)

    What css sprites are you referring to? Did you create a new css file that isn't part of the theme?
    If so, you need to enqueue it properly, do not just add a link anywhere.

    To ramp up your speed, get the site where you want it then use a Caching plugin like W3Total Cache or WP Super Cache.
    {{ DiscussionBoard.errors[8656460].message }}
    • Profile picture of the author Luke Corden
      Originally Posted by David V View Post

      The answer to both questions... no.
      Your running a theme so your css stylesheet is already external.
      They/it resides in the theme directory.

      When you say "Do I just delete the original CSS from the wordpress html editor" what are you referring to?
      If your talking about the "theme editor" in the admin panel then no.
      If you delete that all your theme styles will go with it

      ...and yes, you should edit css in a plain text editor. (and yes you can edit it with Dreamweaver)

      What css sprites are you referring to? Did you create a new css file that isn't part of the theme?
      If so, you need to enqueue it properly, do not just add a link anywhere.

      To ramp up your speed, get the site where you want it then use a Caching plugin like W3Total Cache or WP Super Cache.

      Thanks for this reply David.

      I don't think I made myself very clear did I.

      Regarding the external style sheets: I appreciate they have there own folder. But if I want to combine all the inline CSS on a page and then move it to an external folder where would I find this folder? Should I use FTP or just update in WP editor.

      This leads to the second question. The HTML editor I refer to is the tab and corollary of the visual editor in wordpress, for example where you write you posts. Once I've removed and combined the CSS from here into a single file and moved to to the the external file (see above) I now need to leave an instruction in the posts html pointing to the now external file. But it's ok, I have the code for this now.

      Code:
      <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
      Often when you do speed checks on WP sites you get advice back to combine images or create css sprites. I understand what they are, I'm just unsure where to them once created. I'm guessing, in the same external css folder?

      Hope that is a little clearer. In other news my blog, is coming along nicely and I am recording some nice speed whilst it is still fresh as a daisy.

      You can check it out here: Luke Corden: Aspirationalist | Escaping The Slave Cycle One Post At A Time
      Signature

      Check out www.lukecorden.com for 100% free listbuilding course, marketing tips, advice and tomfoolery
      {{ DiscussionBoard.errors[8660891].message }}
  • Profile picture of the author RobinInTexas
    If you want to add CSS to a WordPress site, the correct way is to create a "child" theme and place your CSS in the style.css of the child theme.

    Child Themes « WordPress Codex
    Signature

    Robin



    ...Even if you're on the right track, you'll get run over if you just set there.
    {{ DiscussionBoard.errors[8656588].message }}
    • Profile picture of the author Luke Corden
      Robin, thanks very much for this link. It will be useful in the future. For now I am just experimenting with removing existing inline css and js from the html and placing it in external files to speed up load time.

      I'll be documenting my progress and pitfalls on my blog.
      Signature

      Check out www.lukecorden.com for 100% free listbuilding course, marketing tips, advice and tomfoolery
      {{ DiscussionBoard.errors[8660898].message }}
      • Profile picture of the author RobinInTexas
        Originally Posted by Luke Corden View Post

        Robin, thanks very much for this link. It will be useful in the future. For now I am just experimenting with removing existing inline css and js from the html and placing it in external files to speed up load time.

        I'll be documenting my progress and pitfalls on my blog.
        If you remove inline css, the place for it would be to add it to the child theme "style.css" if you want to keep the styles set by the inline.
        Signature

        Robin



        ...Even if you're on the right track, you'll get run over if you just set there.
        {{ DiscussionBoard.errors[8662338].message }}
        • Profile picture of the author Luke Corden
          Originally Posted by RobinInTexas View Post

          If you remove inline css, the place for it would be to add it to the child theme "style.css" if you want to keep the styles set by the inline.
          Hi Robin,

          Can you clear something up for me.

          I have created a child theme in
          Code:
          wp-content/themes/iconic-one-child
          and in here I have created a
          Code:
          style.css
          file.

          I have followed the codex you linked to and activated the child theme.

          But when I activate the website it is understandably 'style free'.

          So my question is this: Do I just need to copy & paste the parent theme style into the child theme and then make changes accordingly to the child theme? Or should I not be activating the child theme but just adding changes to it?

          Confused.

          This is my custom.css inside my child theme if that helps:
          Code:
          /*
 Theme Name:     iconic-one-child
 Theme URI:      http://themonic.com/iconic-one/
 Description:    Iconic-one Child Theme
 Author:         Luke Corden
 Author URI:     http://themonic.com
 Template:       iconic-one
 Version:        1.0.0
*/@import url("../iconic-one/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
          Many thanks

          LC
          Signature

          Check out www.lukecorden.com for 100% free listbuilding course, marketing tips, advice and tomfoolery
          {{ DiscussionBoard.errors[8676118].message }}
          • Profile picture of the author bougalo
            Hi There,

            I wouldn't create new of anything. Look in the "editor" section of your theme, then click "Style.css" and edit your css document anyway you want it. NOTE: Copy and paste the original file and save it some where. Just in case something goes wrong. Make sense?
            Signature
            OptMaze | Web Design For Small Businesses. Ask about Our Reseller Program.
            {{ DiscussionBoard.errors[8683599].message }}
            • Profile picture of the author Janet Sawyer
              Originally Posted by bougalo View Post

              Hi There,

              I wouldn't create new of anything. Look in the "editor" section of your theme, then click "Style.css" and edit your css document anyway you want it. NOTE: Copy and paste the original file and save it some where. Just in case something goes wrong. Make sense?
              I may be wrong, (sometimes I can be) BUT, a child theme with it's own css file with the relevant additions is, I think the best way to go. WHY?
              Because, if the main theme gets an update, any changes you made to the style.css file will be overwritten.

              Whereas, if you have a child theme in place with it's own css styling, that will / should still perform correctly, even if the main theme style.css is overwritten.
              Signature
              {{ DiscussionBoard.errors[8683860].message }}
  • Profile picture of the author Luke Corden
    I agree that teh child theme is the way to go. But I just can't get it working. I have followed the wordpress codex and wordpress is recognizing the theme in the themes sections but when I try to active it it just wipes my site clean. Am I missing something here?

    The rest of my site is going great guns I'm bumped up to 99% by yslow and 93% by google insights but I just can't get my head around the css in wordpress.

    I am having particular trouble with a single line off css which is the main font and it is appearing in all the key areas of improvement on my site.

    Here it is (followed by each problem it is causing)
    Code:
    http://fonts.googleapis.com/css?fami...atin,latin-ext


    1. Specify a cache validator

    The following external CSS files were included after an external JavaScript file in http://www.lukecorden.com. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

    2. Enable gzip compression (rest of site gzipped perfectly)

    Compressing the following resources with gzip could reduce their transfer size by 222B (47% reduction).

    3. Add Expires headers (all other headers expires set perfectly)

    There is 1 static component without a far-future expiration date.

    ----

    I think the code in question is in my themes.php and looks like this:

    Code:
    /*
     * Loads the awesome readable ubuntu font CSS file for Iconic One.
*/
    if ( 'off' !== _x( 'on', 'Ubuntu font: on or off', 'themonic' ) ) {
         = 'latin,latin-ext';
         = is_ssl() ? 'https' : 'http';
         = array(
            'family' => 'Ubuntu:400,700',
            'subset' => ,
        );
        wp_enqueue_style( 'themonic-fonts', add_query_arg( , "://fonts.googleapis.com/css" ), array(), null );
    }
    If anyone wants to take a look I'd be happy of the help. The best course of action would be to run it back through gtmetrix and look at what I mean there.
    Signature

    Check out www.lukecorden.com for 100% free listbuilding course, marketing tips, advice and tomfoolery
    {{ DiscussionBoard.errors[8691995].message }}

Trending Topics