• I know the theme your using has a say in this. I am using Mystique. I was looking for an official answer since I have read conflicting information about the order of CSS file processing.

    I have my main theme Mystique with: css/core.css

    I have my child theme Mystique-Child with the following css files:

    – style.css for my main changes to the core.css file.
    – ie7.css for ie 7 changes.
    – ie6.css for ie 6 changes.

    I have always thought that css files in you child theme override the core files. Is this the case? If not, in what order are they processed?

Viewing 13 replies - 1 through 13 (of 13 total)
  • this depends on theme – typically the use of the ie6 and ie7 styles are conditionally set in the themes header – see twentyeleven for example.

    Thread Starter Calvin Nix

    (@calvin-nix)

    Thank you for your response. I have these set in the header of my site, but I did not know if there was a specific order that css files were processed in. Core files and then target css or visa versa.

    The theme will dictate the order of the css files and using a child theme will allow you to override files in the parent theme. Check out http://codex.wordpress.org/Child_Themes#Template_files for more information on overriding parent theme files.

    If you know how to view the source of your pages, you can just look at the code to see which files are being loaded and in what order. As I’m sure you know, if CSS rules have the same specificity, the one loaded last will be used.

    Sorry I can’t be more helpful with the Mystique theme specifically. I’ve never worked with it before.

    Thread Starter Calvin Nix

    (@calvin-nix)

    Yes, I guess my last question was phrased poorly. I realized that CSS files are processed in a certain order, and that what is in your child theme is – or at least should be – processed with priority, or so that has been my understanding. It seems like the css files for ie7 act peculiar only working with certain elements. However, they work fine when I modify the core.css, but I need the core to stay original with overrides taking place only with child css files. I will have to read more about how my theme processes css. Thank you.

    Not a problem. Let me know if you do some research and are still having issues.

    All you need to do is copy the core.css styles you need to modify to the child theme’s style.css. Actually, it is the last stylesheet processed, so it will override anything previous.

    You may need to add !important to some styles in the child theme to force overriding of inline styles.

    http://www.w3.org/TR/CSS2/cascade.html#important-rules

    Thread Starter Calvin Nix

    (@calvin-nix)

    @seacoast Web – Yeah, that is what I thought too, but for some reason they don’t seem to be doing the job of overriding the core styles. I’ve tried !important in the child css files and it doesn’t seem to be working. When I use * in front of a style in the core css, it works to modify ie7 correctly sometimes, but there doesn’t seem to be consistency across all versions of ie7. It’s as if there are subtle differences among the same version. I’m using style.css which works for firefox, opera, chrome and safari and seperate ie#.css for internet explorer and whatever else. I’m just tired of having to give microsoft products special treatment.

    Thread Starter Calvin Nix

    (@calvin-nix)

    @seacoast Web – I’ll read through the information in the link you provided. Maybe there is something I missed. Thanks

    IE7 users account for around 2-5% of all browser stats (depending on who is listing such). With IE10 on it’s way soon, I expect that to drop even more. I would spend more time looking ahead than back.

    Can you give us a link @calvin Nix? If we could look at the code I’m sure that would be really helpful.

    Thread Starter Calvin Nix

    (@calvin-nix)

    @seacoast Web – Yes, I agree, and I hope people continue to upgrade there browsers. The website I am working on is for a non-profit so I get nothing out of it other that the satifaction (hopefully) of seeing it work correctly and provide some benefit to the community. Needless to say I still feel like I have to maintain the support for at least ie7 and was considering support for ie6 in limp (quirks) mode if possible as I don’t have time to debug every browser out there since I still have my day job.

    <!--[if lt IE 8]>
    <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'>
    <H1>YOUR BROWSER IS NOT SUPPORTED BY THIS WEBSITE.  CONSIDER UPGRADING TO IE8, 9 or 10 OR USE ANOTHER MODERN BROWSER.  THANK YOU.</H1>
    </div>
    <![endif]-->

    in header.php just below <body>

    Thread Starter Calvin Nix

    (@calvin-nix)

    @seacoast – Thanks, I may have to add that as it would save me a lot of headache, but I always feel like I am placing the burden totally on the user by doing this, although in the end, I know it would be the best thing. Some people have no idea about the importance of staying reasonably current, or don’t want to or simply can’t.

    The url is right here

    I have vaildated the site at W3C and I get two errors concerning js. I believe this is caused by the social icons above the nav bar.

    I have also validated the CSS at jigsaw and get to many to count, although I believe most of them are vendor specific.

    The ie css files are incomplete and the whole site still needs work and is not live to the public (well I guess now it is), hence the reason I am working in a subdomain.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘In what order does WordPress process CSS files?’ is closed to new replies.