Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Changing Header attributes and adding a new Header

  1. defendingnewhampshire
    Member

    I'm using Twenty Eleven, a great theme. It's got Headers 1-6. When I try to add an <h7> via my custom CSS, it won't take it. I must have to "declare" it in some way so that that original stylesheet won't blow it away?

    Secondly, though, when I strive to "take over" <h3>, I can add attributes like color, etc., but when I try to change other attributes from those set by the original stylesheet, it doesn't "take." For instance,

    h3 {
    font-size:.75em;
    color:darkred;
    font-style:italic;
    font-weight:bold;
    text-align:right;
    margin:0;
    padding:0;
    letter-spacing:normal;
    line-height:.75em;
    text-transform:none;
    }

    Color works. Text align right works. But "text-transform:none" and "line-height: .75em" don't override the attributes set in the original stylesheet.

    What am I doing wrong?

    Thanks,

    Bill

    The blog I need help with is duncan4nh.com.

  2. bookoftips
    Member

    Hi, Somewhat along the same lines: I've been trying to change the header either on my current theme (Misty Look), or on a new theme (Duster) - whichever works, wins.

    On the Misty Look Theme, the photo is rectangular shape, across the entire page. (760x329) I'd like to have the photo square, and not the entire page width.Switching to Duster, I can get the photo in square shape, but it's huge. I've resized the pixel ratio to 180x135. The photo still shows up huge, and the resolution is really bad.

    The website I'm talking about is http://www.cancerwhattodoorsay.com

    ...I'm still working on Avatar/Gravatar/Blavatar issues. I've emptied cache many times, and read all the related hints I can find. My Gravatar for spiritandmoneymatters.wordpres.com still shows up as my cancerwhattodoorsay.wordpress.com Gravatar. (The description is correct for site; the photo isn't.)

    Thanks for your help!
    C

  3. thesacredpath
    Member

    Bill, h1 through h6 are the only ones declared in the HTML standards. h7 would not be supported by any browser and that is why it gets stripped out.

    @bookoftips, wordpress.com (and wordpress in general) now allows use of custom sized headers. Go to appearance > header, upload your header and then when the crop box comes up press the button that says, use it as is and do not crop and your header will by used at the size you uploaded (make sure it is the size you want on your site before uploading it).

    Are both of the blogs you mention on the same user account? If so, then the same gravatar will be used for both since it is tied to the email address and your account, NOT to the blogs.

    On blavatars (favicons) you can have a different one for each site, even if they are on the same account, since the blavatar is tied to the blog, not to the account.

  4. thesacredpath
    Member

    BTW, I can't even get to spiritandmoneymatters.wordpres.com . It redirects me to the wordpress.com main page. Is there a typo in the URL?

  5. defendingnewhampshire
    Member

    Thanks, thsacredpath. That's a big help on h7.

    Do you have any thought on my second question - why my CSS for h3 only partially overrides the original stylesheet? My h4, h5 and h6 styles work fine.

  6. thesacredpath
    Member

    h1, h2 and h3 are used for titles (site, site description, post/page titles and widget titles and if your change is not affecting all h3, then that means that there are more specific rules in the CSS overriding it.

    What isn't changing and I can help you find those more specific rules?

  7. defendingnewhampshire
    Member

    I'm setting these 3 attributes and they don't override the original CSS:

    letter-spacing:normal;
    line-height:.75em;
    text-transform:none;

  8. thesacredpath
    Member

    Again, there are more specific rules (selectors) that are controlling some elements in the theme. What is NOT changing.

  9. thesacredpath
    Member

    I'm heading out for a late breakfast, and I'll offer this on the widget titles, which are h3 and controlled separately.

    .widget-title {
color: #666666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}

    Widget titles are h3, but they have the "widget-title" class controlling their styling.

  10. defendingnewhampshire
    Member

    Maybe I'm not understanding the question. Some of the attributes of the h3 element are changing (color and text-align, for instance), but the attributes I set for letter-spacing, line-height and text-transform do not override those attributes set in the original style sheet.

  11. thesacredpath
    Member

    That is because more specific rules are over ruling the settings in the h3 rule. You could have 1000 different h3 elements in a web page and specifically design each one of those 1000 differently by targeting each of those h3 elements individually. Note the declarations in the .widget-title rule I referenced above. All of those will override the like declarations in the h3 rule. h3 will never override a more specific rule. (Well, ok it can, but in general it will not.)

  12. claudiamulcahy
    Member

    Hi,
    This morning I had two blog issues, now I have three. I'm not sure what's going on.
    I see my gravatar on this page (bookoftips), and it says it's inactive. Eeek. It didn't say that this morning when I asked the question. I'll look it up and see if I understand why/how to fix it.

    Please see my comment on 6/17/12 post 9:51 a.m. from book of tips, about header size.

    The gravatar showing is for the blog spiritandmoneymatters.com. The correct gravatar is me in a blue shirt for blog cancerwhattodoorsay.com. Re; this, I've sent request to support, but now I'm not sure if that's you, or different.

    Thanks for any help on any of these three issues. :)
    C

  13. designsimply
    Staff

    @defendingnewhampshire, here's what's happening to the h3 tags.

    If the theme has something like this:

    .entry-content h3 {
    text-transform: uppercase;
}

    And you have something like this:

    h3 {
    text-transform: none;
}

    The theme rule wins because it's more specific.

    To get around that, you should make your rule just as specific or more specific than the theme rule. To illustrate, you could add the following and it would work:

    .entry-content h3 {
    text-transform: none;
}

    As a general practice, if you copy the same selector the theme uses (such as ".entry-content h3"), you will be all set.

    Check out this related help page:
    http://www.htmldog.com/guides/cssadvanced/specificity/

  14. designsimply
    Staff

    You might also like this article which explains specificity Star Wars style. :)
    http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

  15. designsimply
    Staff

    @bookoftips, you've asked questions in this thread about issues which aren't related to the original post. The very best thing is to keep similar topics together, so would you mind please starting a new thread if you still need help?

    Just to note, http://spiritandmoneymatters.com/ is not hosted here ate WordPress.com and isn't even using WordPress. You will need to go through whatever software you used to create that site in order to update any images on it.

    Regarding the Gravatar that at http://cancerwhattodoorsay.wordpress.com/ , you should be able to see the same image in the Gravatar widget in the sidebar that you see in the top right corner of this page:
    https://cancerwhattodoorsay.wordpress.com/wp-admin/users.php?page=grofiles-editor

    Please start here if you have a genearl issue:
    http://en.forums.wordpress.com/?new=1

    Please start here if you have a CSS question:
    http://en.forums.wordpress.com/forum/css-customization/#postform

  16. defendingnewhampshire
    Member

    Wow, designsimply...huge help! Thanks.

  17. defendingnewhampshire
    Member

    Ahh, and now I see that thesacredpath said the same thing in different words. I feel like I've really got it now and very much appreciate these explanations.

  18. thesacredpath
    Member

    You are welcome from me, and I knew we could get you there if we just hit on the right wording, and @designsimply did that.

  19. designsimply
    Staff

    Teamwork! :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags