ThemeShaper Forums » Thematic

[closed]

Trying to Style a Welcome Blurb - Over Writen by Typograhpy.css

(10 posts)
  • Started 9 years ago by AjuneauK
  • Latest reply from tzShaper
  • This topic is not resolved
  1. AjuneauK
    Member

    I am trying to style the "Welcome to the MentalOS Blog" text at mentalos.com. When I look at the element in firebug I notice that typography.css is highest in the style hierarchy. The changes I make in the style.css file are overwritten by the typography.css file. Where can I style the text to ensure sticks?
    Thank You,
    Steve

    Posted 9 years ago #
  2. Hi-

    Try being more specific with your CSS declarations. This may help you see how specificity can work for you

    http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

    -Gene

    Posted 9 years ago #
  3. puffmoike
    Member

    I am similarly confused by the way a declaration in a child theme's style.css file does not always seem to take precedence over a declaration in one of Thematic's stylesheets.

    For instance I want to remove the margins placed either side of a blockquote by the declaration at line 68 of typography.css:

    blockquote {
    	margin: 0 3em;
    }

    So I wrote a similar declaration in my child theme's style.css file:

    blockquote {
    	margin: 0;
    }

    I would have expected that as my declaration has the same specificity as the one in typography.css, but appears later (ie it appears in style.css after the import rule for typography.css) it should override the attributes for the margin. But it isn't. Any idea why not? Or any idea how I can go about finding out myself using Firebug or similar why it isn't?

    Gene, you've been such an excellent source of advice for other questions I have had, so if you happen to read this I'd be really grateful if you might be able to point out where I (and probably the OP, AjuneauK) are falling down in our understanding of css rules and child themes.

    Posted 9 years ago #
  4. Jamie Mitchell
    Member

    hey all

    regarding the MentalOS Blog

    you need to add

    #blog-welcome{
    
    }

    in your style sheet, at the moment it is just the default typography.css styling that element

    So you could have something like this for example

    #blog-welcome{
        font-family:Arial;
        font-size:30px;
        font-weight:bold;
        line-height:40px;
    }

    put it in your style.css of your child theme

    J

    Posted 9 years ago #
  5. Jamie Mitchell
    Member

    puffmoike.

    i haven't encountered this problem with the blockquote, but you can try giving the blockquote in your child theme more authority over the typography.

    blockquote {
    	margin: 0 !important;
    }
    Posted 9 years ago #
  6. puffmoike
    Member

    Jamie,

    I am aware of the !important declaration, but there's something bigger amiss: either my understanding of CSS generally or with child themes in particular.

    My understanding of styling child themes is that, in theory, declarations made for any element in style.css which has the same level of specificity as the same element in one of the imported CSS files from the parent theme would have primacy. But in practice it feels like that is not the case.

    Is my theoretical understanding correct? If it isn't, please put me straight. But if it is, can somebody explain what I am doing wrong in practice?

    1. I use Firebug to highlight an element on the page - let's say the primary aside - and copy the CSS generated for that element from Firebug and paste it into my childtheme's style.css:
      #primary {
      border:1px solid #CCCCCC;
      margin-bottom:22px;
      padding:18px 0 0;
      }
    2. I then change a few values, including adding a background colour with !important for good measure:
      #primary {
      border:1px solid #FF6666;
      margin-bottom:50px;
      padding:0;
      background: #8888FF !important;
      }

      I use Espresso as my editor, which uses colours to highlight syntax so it is usually pretty obvious if I've missed a semi-colon or similar. All appears fine. There is no other reference to #primary or any reference to .aside anywhere else in the stylesheet

    3. I upload the new style.css to my server, and refresh my webpage. Visually I see no change. Nor does Firebug does not list the declaration in style.css. But if I use FIrebug to examine the source code the changes I made to style.css appear in the head of the html.
    4. Just to be clear, other modifications I have made in style.css are working fine. I can't discern any rhyme nor reason for the inconsistent behaviour, but I am happy to accept that it's user error. Just not sure what!

    What gives?

    Posted 9 years ago #
  7. puffmoike -

    First I'd try validating the style sheet through w3.org css-validator to see if any parse errors have occurred that you might have missed.

    In my experience with WordPress child themes they respect the cascade. You have a pretty good grip on these concepts, so I'm thinking that either you've missed something in the styles or something else is amiss.

    I have had issues where the renaming and/or moving of child theme directories has had buggy results with the Theme not showing broken or deactivating. But instead causing issues where with the file paths so that templates do not resolve properly. Could there be something like this happening in your case... but with the stylesheet?

    If that were the case, you could try activating the default theme and then reactivating your child theme. Only caveat to doing this is that all your widget area contents will be flung in to the inactive widgets area and you'll have to reorganize them in to their respective sidebars afterward. So back up your database if this could cause you problems.

    If you're still having problems, post a link and cite the code changes that you have attempted and I'll take a look-see.

    -Gene

    Posted 9 years ago #
  8. puffmoike
    Member

    First I'd try validating the style sheet through w3.org css-validator to see if any parse errors have occurred that you might have missed.

    Sorry, you could have stopped right there Gene!

    Amateur's mistake: I shouldn't have relied on a visual scan of Espresso to confirm that my code was valid - I'd commented out a section but left a right brace outside of it. As I had another piece of commented out code directly below it the single brace was rendered in black rather than grey in Espresso.

    So thanks, yet again, for a very helpful response.

    Posted 9 years ago #
  9. I too seem to be having an issue with my CSS being overwritten by the main Thematic profile (well I'm assuming this is the case). I'm attempting to change the color and size of my post title. My snippet of code is as below:

    h1, h2 {
    color: #CC5298 !important;
    font-size: 30pt !important;
    }

    Adding the !important tag did help with the font-size issue I was having (so thank you for that tip!), however, I can not change the color of the post title on my home page. Both font size and color adjust properly with the above code for individual post pages, but on the home page only the font size adjusts. Any tips would be greatly appreciated! Thanks!

    Posted 9 years ago #
  10. tzShaper
    Member

    Trying to override:
    blockquote {
    margin: 0 3em;
    }

    with just margin: 0; did not make it more specific.
    Margin left and right are declared by the pattern as 3em adding
    margin: 0 0em;
    or if needed try
    margin-left: 0;
    margin-right: 0;
    seems like a sure fire declaration also.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.