WordPress.org

Ready to get started?Download WordPress

Forums

css to change h3 titles on only one page? (13 posts)

  1. Lesley Austin
    Member
    Posted 2 years ago #

    Hello,
    Months ago I began creating my WP site and was able to learn just enough CSS to change things via the "custom includes" at my Suffusion-themed site. My brain is now very rusty on translating to CSS what I need to do, so I wonder if anyone would be kind enough to tell me what the CSS include would be to change the font color on the h3 titles on my sitemap page?

    My site is a membership one and private, so I can't really give you a true link, but it goes something like this:

    http://papernest.com/sitemap/

    Some time ago I changed the CSS site-wide to make the h3 titles white so they couldn't be seen. Probably not the best way to go about it, but it has worked fine until this sitemap, which really needs the titles to make sense.

    With thanks!

  2. Peter Wooster
    Member
    Posted 2 years ago #

    Each page in WordPress has a class associated with it. You need to qualify your rule to be specific to that page. Something like:

    .sitemap h3 {colour:blue;}

    /peter

  3. Lesley Austin
    Member
    Posted 2 years ago #

    Hmmmmm....thanks so much for the response, but it didn't work for me. I was just working up a screenshot of the firebug code to show you, but don't see a way to upload photos here. But here is a bit...

    <div id="wp-realtime-sitemap-pages">
    <div id="wp-realtime-sitemap-posts">
    <div id="wp-realtime-sitemap-archives">
    <div id="wp-realtime-sitemap-categories">
    <h3>
    Categories
    </h3>

      </div>
      <p></

      and here's another bit...

      nherited fromh3
      h1, h2, h3, h4, h5, h6 {
      color: #FFFFFF;
      line-height: 1.1em;

      I wonder if there needs to be anything more than "sitemap" or if the widget I am using alters anything?

      Very much appreciate your thoughts.

  4. Peter Wooster
    Member
    Posted 2 years ago #

    Are there any classes on the body element? If there aren't you could add one.

  5. Lesley Austin
    Member
    Posted 2 years ago #

    This is where I start to get lost, so please bear with me. I highlighted in Firebug where the "Archives" title should be. Here is some of the code there:

    <div class="entry-container fix">
    <div class="entry fix">
    <p class="first-para">
    <div id="wp-realtime-sitemap-pages">
    <div id="wp-realtime-sitemap-posts">
    <div id="wp-realtime-sitemap-archives">
    <h3>
    Archives
    </h3>

    And I just checked for "Pages" and it has the same sort of code with the "entry fix" class, I think?

  6. pete_voce
    Member
    Posted 2 years ago #

    What pkwooster was suggesting is to look in Firebug for the <body> tag before all of the code you're pasting in here. In most modern WordPress themes, a number of classes get generated and put in the body tag. Here's an example of what I'm talking about...

    http://dl.dropbox.com/u/9317490/Screen%20Shot%202012-01-09%20at%2011.26.56%20AM.png

  7. Lesley Austin
    Member
    Posted 2 years ago #

    Oh thank you for the added guidance. Here is the code that includes the body tag down to the first of the elements I want to change the font color for (the first title) :

    [Code moderated as per the Forum Rules. Please use the pastebin]

    So now I am wondering which of the lines and classes and such have to go into the bit of code I will add to change the color?

  8. pete_voce
    Member
    Posted 2 years ago #

    You should be able to use the page id like so:
    .page-id-454 .entry-container h3 {color: blue;}

    Basically whatever style you modified recently to make them all white, copy and past that line beneath it, then put .page-id-454 in front of it and change the color declaration. So if the style you changed before was this:

    .whatever h3 {color: white;}

    would become:

    .page-id-454 .whatever h3 {color: blue;}

  9. Lesley Austin
    Member
    Posted 2 years ago #

    So I looked around and discovered that I hadn't changed the titles to white via code but via the theme's options. So I just added the first line of code you gave me (many thanks!) to custom CSS includes and it did just what I was hoping.

    Brilliant! Thanks to both of you for being willing to help such a non-technical person. I learn a little bit more each time.

  10. dianadolce
    Member
    Posted 2 years ago #

    I have tried your suggestion every which way to change the post title text on one page with no luck. Here is the line of code I am working with that changes all 4 of my banner posts.
    '#widget-header div#top-banners ul li.cycle a h3 {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-weight:bold;
    text-transform:uppercase;
    margin-bottom:0px;
    letter-spacing:-1px;
    }'
    Here is one change I have tried:
    '.post-id-61 #widget-header div#top-banners ul li.cycle a h3 { color:#330099; }'

    Can you give me some suggestions on how to do this in my situation?

    Thank you so much,
    Diana

  11. esmi
    Forum Moderator
    Posted 2 years ago #

    @dianadolce: Please post your own topic.

  12. pete_voce
    Member
    Posted 2 years ago #

    @dianadolce do you have a URL I can look at?

  13. dianadolce
    Member
    Posted 2 years ago #

    Here it is Pete, the post I want to change is on the top banner 4th position title Simple.

    diananashif.com/dnd-wp/

    Thanks for looking at this. WordPress newbie unfortunately.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags