css to change h3 titles on only one page?

  • 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:

    https://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!

Viewing 12 replies - 1 through 12 (of 12 total)

  • 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

    Thread Starter Lesley Austin

    (@lesley-austin)

    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.

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

    Thread Starter Lesley Austin

    (@lesley-austin)

    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?

    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…

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

    Thread Starter Lesley Austin

    (@lesley-austin)

    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?

    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;}

    Thread Starter Lesley Austin

    (@lesley-austin)

    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.

    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

    @dianadolce: Please post your own topic.

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

    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘css to change h3 titles on only one page?’ is closed to new replies.

Tags