Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Names of CSS bits

  1. kothea
    Member

    Clean Home Theme

    I'm trying to figure out how to stop pestering you guys on how to change various bits. I did the CSS of my main site kothea.com a couple of years back and have now pretty much forgotten the css agony and learning i went through. So I sort of understand css...but not really! I essentially want to get my blog to look similar in terms of fonts and colours.

    So how can I find out what the various bits of the page are called so that i can change them. for example I would have thought the following would change all <H1> headers. but it doesn't do anything. Do I have to use the !important thing??? and what is that by the way, when do i know if i have to use that or not

    sigh

    #wrapper h1 {
    color: #916B2D;
    }

    The blog I need help with is blog.kothea.com.

  2. panaghiotisadam
    Member

    If you're using Firefox, you can install the Firebug add-on. Helps you examine your page and see the selectors.

  3. designsimply
    Staff

    The reason the CSS you posted above doesn't work is that there is a more specific rule in the Clean Home theme stylesheet, and more specific rules win.

    This is the rule where the heading color is set:

    .header a, #blurb a, .content a, #sidebar a, #footer a {
border-bottom: 1px dotted black;
text-decoration: none;
color: black;
font-weight: 600;
}

    Particularly, the ".content a" part in the selector is what is making the h1 headings (which are also links) black. More specific rules, or any rules that are entered after that, (when things are equally specific, the ones added last = more specific) will override the settings in that block.

    So, to override the color for h1 headings in Clean Home, you can use a more specific rule like this:

    .content h1 a {
color: black;
}

    I think the best tactic to use to figure out what selectors you should be using is to copy the same selector string used by the stylesheet of the theme you are using first and go from there. You can do that either by looking the original stylesheet, linked on your Appearance → Custom Design → CSS page, or by using a tool like Firebug for Firefox (totally an awesome suggestion). Other browsers like Chrome and Safari have web inspector tools like Firebug built in, and there is also a similar tool for Internet Explorer.

    The !important makes a rule even more specific, so it can override something. If you start using a lot of them, it can get very tricky very fast. It's best not to use them unless they are absolutely necessary (which they sometimes are).

  4. kothea
    Member

    thank you.

    it's not that simple tho is it? I have wasted pretty much the entire afternoon on this and hardly got anywhere. (sy I'm fraustrated !!)

    For example:

    #logo h2 {text-align:center;}

    does not work. Do I really have to spend an hour or two creating and precisely testing a jpeg as an alternative when MS word or MS Expression could do it in 2 minutes?

    and then when i look for help I see various comments with "!important" at the end,
    when these are removed the css does not work...so when do you use !important and when not. you can spend ages thinking you have the right css (when you have) and all it needs is !important at the end. Bizarre in the extreme

    typekit...what's all that about? you can't even change the colour in it or even choose century gothic..a common font. I need to follow a corporate standard!

    this is FAR FAR too difficult for an occasional user.

    before you delete my angry rant (?!) please can you let the powers above know that they need to up their game on this one. WordPress is of course wonderful in just about anything else it puts its mind to!! but not this elementary piece of blog design.

  5. kothea
    Member

    ty designS

    that was a reply to panag

  6. kothea
    Member

    and another thing..

    i put in comments to my css mods to help me go back and understand them and then your editor strips them out! thanks!

  7. designsimply
    Staff

    Centering things can be a little counter-intuitive sometimes. I think things like that you just learn by doing or by searching the web for tips or by asking here even! Here's a trick I like for centering:

    .header {
text-align: center;
}
#logo {
float: none;
display: inline-block;
}

    A JPG full-width header also would work for that. I think that would work just as well.

    MS Word and MS Expression are totally different controlled environments compared to the web which is flexible and fluid and not-so-precise. I don't think you can even really compare them.

    Typekit! Typekit are a way to use licensed fonts on the web. Part of the Custom Design upgrade fee pays for the font licenses. Then the fonts are loaded directly into the web page so everyone viewing from most every kind of recent browser gets a similar font experience. If you don't use Typekit, you can use a font stack and manually type in something like "Century Gothic" but then only viewers who have that exact font installed will see it working (if that makes sense). That's how fonts were always done in the past and that's why they are usually added using a list or a "font stack."

    I would never delete your rant. :)

  8. designsimply
    Staff

    Comments! Right. The WordPress.com CSS editor currently strips them. I'll note your opposition. It might be something we can change in the future, and your feedback is appreciated.

  9. kothea
    Member

    :-)

    I'm happy again now. I just think back to the time when I couldn't automatically post to FB and Twitter and Linkedin. Anyways...

    ahem, expression web 4 is a web editor !! (actually so is, kind of, word)

    century gothic? hasn't everyone got that these days? like Times Roman must be on about 6bn computers worldwide.

    thank you for the code. works perfectly...except in Opera! Not that anyone (except me) uses opera. I'm getting fed up with Opera not working on other things too. So yet another reason to bin it. I do kind of understand the code you gave (above)...but most people wouldn't. Must result in a reluctance of your CASUAL users to buy CSS or result in more support forum messages.... keeps you in a job I guess :-)

    !important ...

    back to the original task I started 4 hours ago...changing the background colours and font colours everywhere (I thought the header would be the easiest...hmmmm)

  10. designsimply
    Staff

    I guess that shows how much I know about web applications :) I use vim! lol

    Might be that a lot of people have Century Gothic, but it might not be named exactly the same on all systems. That's why you need a stack, like so: font-family: "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;

    Check these links out:
    http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
    http://cssfontstack.com/

    Another way to center is with margins. But in order to do that, the element must have a width. In your case, if you can set a hard width for the #logo, then it would work. Try it out in Opera to see if it works:

    #logo {
float:none;
width: 700px;
margin: 0 auto;
}

    (There's more than one way to do something in CSS a lot of the time.) :)

    Actually!, I'd love to see less CSS editing and more simplified Custom Design tools, like the font selector. But also, I find CSS kind of fascinating and fun. I guess it's the combination of art and code that gets to me.

    Feel free to post more questions if you have them!

  11. kothea
    Member

    I used the google stack which had spelling and spacing slightly different to yours.

    I used to find this sort of stuff fun but then I got old and grumpy and desirous to make the best use of my time.

  12. designsimply
    Staff

    Don't be grumpy! :)

  13. kothea
    Member

    :-(

    only joking :-)

  14. designsimply
    Staff

    :D

  15. panaghiotisadam
    Member

    @kothea: As for your reply to me,
    a) I didn't claim it's easy, I only said that Firebug helps.
    b) Your reply is a reasonable comment: no reason for it to be deleted.
    c) Only staff and moderators can delete things here: I'm neither of the two.

  16. designsimply
    Staff

    Just circling back here to let you guys know that CSS comments are now being allowed through after a round of updates on the CSS Editor.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags