ThemeShaper Forums » Thematic

[closed]

Simplifying Thematic CSS

(7 posts)
  • Started 9 years ago by jtice
  • Latest reply from erikas_boy
  • This topic is not resolved
  1. I recently started working with Thematic to style my basic child theme from which I will branch a few others. This mostly means putting declarations to easily control type, spacing and layout in styles.css. What I am finding, and have seen other posts with similar concerns, is that due to the several @import stylesheets having come from various sources (resets, blueprint, typography.css, default.css) there are not only conflicting selectors but differences in the way the cascade and specificity done, not to mention type sizing methods. Instead of being able to set all the values for an element easily, I have to go through several style sheets looking for selectors that are overriding what should be the final word on [for instance] font size, color, weight, family, line height, etc., because only part of them change with my declaration. I'm just wondering if anyone has tossed out all of those @imports and compiled a simplified style sheet that starts with the most general selectors and then goes specific only when and if necessary, and only to the degree necessary? My inclination is to try and do that but I'm hoping maybe someone else has already done it... or that one of the free child themes contains an optimized style sheet that I could start from. Anybody have any ideas?

    Posted 9 years ago #
  2. Oh yes, I meant to ask also, why would Safari and Firefox be differing on a simple class selector like .entry-title or h2.entry-title? In Safari it will override all other font-family and color selectors, in Firefox it will change size but not family or color. This is just crazy-making! And yes, I flushed the cache.

    Posted 9 years ago #
  3. What I usually do is either comment out or remove the following line:

    @import url('../thematic/library/styles/default.css');

    Then, copy its contents to my style.css and make modifications to it.

    Artur Kim

    Posted 9 years ago #
  4. @artrkim Yes, one less layer for the designer and browser to decipher, not to mention quick and easy. But this layering and duplication in style sheets is really making my OCD kick in. I admit to having been spoiled rotten by working with a couple of incredibly efficient style sheets in the past. These not only optimized/minimized the grand scheme, but individual selectors were crafted for optimal rendering. I'm not the one to try and get it to that level but I am going to attempt to work several of these @imports down to a single stylesheet with no duplication. I'd be better off if I were obsessed with eliminating bacteria in the kitchen.

    Posted 9 years ago #
  5. well you don't have to import any of the stylesheets. it won't "look" much like thematic if you don't, but then you could apply your own single stylesheet.

    but i am inclined to agree w/ you about having multiple style definitions that cascade. if you harness some of that ocd and unify the css imports it'd probably be pretty helpful for everyone.

    and bacteria in the kitchen just make you stronger. unified stylesheets is obviously a nobler goal. :)

    Posted 9 years ago #
  6. azoomer
    Member

    Hi I have done the copying to one stylesheet some times and it works fine. Now i find it easiest just to validate the page on http://jigsaw.w3.org/css-validator/ and scroll down a bit. There you get all the css files in one place ready to copy and paste into one childtheme stylesheet, while deleting the imports of course. I'm not exactly sure if it's a correct way to do it, but it works for me and it's much easier

    Posted 9 years ago #
  7. Ummmm, I haven't had any problems simply adding my own .css below the imports which simply overrides the preexisting thematic styling.

    So, for instance, just now, I was working on a client's site, and needed to change the #blog-title (including a's).

    In thematic, it looks like this:

    #blog-title a:active, #blog-title a:hover {
    color:#FF4B33;
    }
    
    #blog-title a {
    color:#000000;
    text-decoration:none;
    }

    so I add this below my imports

    #blog-title, #blog-title a:active, #blog-title a:hover, #blog-title a:visited {
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:center;
    }

    And hey-presto, it anything it mentions gets over-ridden, anything it omits remains the same. Part of the meaning of "cascading" style sheets. They "cascade" down through the site, but only as far as the next reference to the same element, class or id. Which then replaces it. Yes, sometimes you might find a few different refereces to the same class or id, but that is where firebug comes in handy. Just add another line to undo whatever needs to be undone, (sometimes as simple as "background:none;"), and you're off. Yes, this means you're adding bulk to your .css, but it's pretty lightweight to begin with. And besides, this is the whole point of using a child theme. If you remove the imports, you loose a big chunk of the ability to use theme upgrades. In which case, why not simply copy/paste code out of the theme to begin with, and forget using a child theme at all? Particularly if you're aiming for lightweight, scrap all the other themes aside from your custom one. No point including all the code the comes with thematic (and there's a lot), if you're not going to use it to build your child theme.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.