Subhead Text Color Change

  • Author
    Posts
  • #1300570

    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.

    #1300648

    justpi
    Member

    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?

    #1300720

    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.

    #1300725

    justpi
    Member

    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.

    #1300772

    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?

    #1300789

    justpi
    Member

    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.

    #1300840

    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?

    #1300845

    justpi
    Member

    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.

    #1300846

    justpi
    Member

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

    #1300854

    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!

    #1300870

    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!

The topic ‘Subhead Text Color Change’ is closed to new replies.