Need help? Check out our Support site, then


Subhead Text Color Change

  1. Hello,

    I'm trying to change the color of my subheads in my site. I'm calling the subheads the words on the top of each page like "About" or "Why Camp Wed" on each page. Currently I have the Custom Design Upgrade and my theme is Adelle. When I set the color for the "banner" that acts as my menu bar it affects the color of these subheads. When the banner is pink (which I'd like it to be), the subhead color is red. Right now all of my subheads are green because I chose a different banner color. How can I make the banner color not relate to the subhead color? I'd like to make the banner pink but the subheads grey. I've tried some text color commands in CSS but none of them worked so I deleted them. Thanks!!

    The blog I need help with is campwed.com.

  2. The one part of your question is clear to me but the other isn't. So, before telling you how to change the color of the page titles, what exactly do you mean by "banner color"? The yellowish ribbon is the bg to your top menu, and each link inside it is a menu item. Do you want to change the color of the ribbon, or the color of the menu items?

  3. Sorry, I don't think I did a good job of explaining. This might be easier. If you look at my site, specifically a page like the "About" page, take a look at all of the red elements. I'm looking to change the color of these red elements. Specifically the "About" title on the top of the page and the red bar/lines at the bottom of the page. But I'd like to keep my ribbon bg top menu pink. I can change the color of the ribbon and this text and the bottom lines with my Custom Design upgrade but it all changes at the same time. I can't isolate the elements so that they're not changing at the same time. I'd like the "About" text and the bottom lines to be grey but I'd like to keep the ribbon at the top pink.

  4. If you used CSS editing to change the color of the ribbon, it would have no effect on other elements, so I understand you select color schemes in Customize > Colors.

    To turn those red elements to grey, add this in the CSS editor:

    .entry-title, .entry-title a, .comments-title, #respond #reply-title, .hentry:after, body.single .content-area:after, .hentry footer:after, body.single .site-content:after {
        color: #999999;
    }

    If it doesn't work, turn the color rule to this:
    color: #999999 !important;

    999999 is the grey of the menu items in your current color scheme. You can make it lighter or darker by changing the hex number. (Are you familiar with hex color numbers?)

    Also, the above code will change all those red elements to the same color. I'm not sure this is the best solution. If you see that you'd rather have one shade of grey for the title and the "Leave a reply" heading at the bottom but a different shade of grey for the line above that heading, let me know.

  5. justpi you're a life saver. Thank you so much. Now my text is grey which is perfect. Exactly what I wanted. The only thing left that I'd like to change now are the red lines at the bottom of the page. Any way to change those to grey as well?

  6. You're welcome.

    Sorry, I thought I took care of the red line too, bit I made a mistake. Replace my previous code with this:

    .entry-title, .entry-title a, .comments-title, #respond #reply-title {
        color: #999999;
    }
    .hentry:after, body.single .content-area:after, .hentry footer:after, body.single .site-content:after {
        border-color: #999999;
    }

    Now when you add this the red line will become the same grey as the page title, but it will seem darker because it's thicker. If I were you I'd probably change the second 999999 to bbbbbb or cccccc.

  7. justpi - Okay, this is so strange. Your code worked perfectly for a few days but now it's back to red again! Would you be able to check it out for me?

  8. I just checked the CSS of your blog, and the codes I suggested above don't show up. So first go to the CSS editor and make sure the codes are there. If they are, then this must a bug with the new CSS editor: over the past few days, several users have complained that their changes don't take.

  9. Try forcing the changes this way:

    .entry-title, .entry-title a, .comments-title, #respond #reply-title {
        color: #999999 !important;
    }
    .hentry:after, body.single .content-area:after, .hentry footer:after, body.single .site-content:after {
        border-color: #999999 !important;
    }
  10. Yes, we made a change in the order styles load and this has caused some issues. The change means that Custom Colors now come in after and may override your CSS. Adding !important will be a required fix for some of these now.

    Thanks for your help, justpi!

  11. Hello! I just wanted to post a quick note as a reply on this thread saying the earlier code change was reverted, and adding !important is no longer necessary to make CSS you saved previously work again.

    Sorry for the trouble that was caused!

Topic Closed

This topic has been closed to new replies.

About this Topic