Sight Theme Color CSS for Headings

  • Unknown's avatar
    sandranickel · Member ·

    Hi.
    I’m trying to change my headings (not the main title header) to show in the color red, specifically #cc0000. I have tried:

    h2{
    color: #cc0000;
    }

    and I also tried

    h2{
    color: red;
    }

    But neither is working to change my headings to the color red. Any ideas of what I need to change?

    Thanks so much!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    fabianapsimoes · Member ·

    Hey there,

    By headings, do you mean the title of your posts or the title of the widgets in your sidebar?

    If you meant posts, give this a try:

    .entry-title a {
    color: #CC0000;
}

    If you meant widgets, try this other bit:

    .widget-title {
    color: #CC0000;
}

    The reason why your CSS isn’t working is that the headings you are trying to target are not enclosed between <h2> HTML tags. If you take a look at your page’s source code (Ctrl+U will show it in most browsers), you’ll see that both the headings of your posts and of your sidebar widgets are enclosed between <h1> tags. Because of that, you are not able to style those elements by referring to h2 in the CSS.

    In order to change how an element appears on your page, you need to target it with a CSS selector. A selector is usually an id or class that is applied to the element on its HTML tag. For example, in your page, you’ll see that the titles of your posts are tags between <h1> tags that have the “entry-title” class. That’s why I used “.entry-title a” as my selector: It will target all tags between HTML elements of class “entry-title”.

    I hope that helps :)

  • Unknown's avatar
    sandranickel · Member ·

    This is perfect! Thank you. It all came out just as you said it would. Red and gorgeous.

    One more question: To look at the source code with the Ctrl+U, where do I need to be to get it to pop up? At the published blog? Right now I don’t have any pages as such, only the blog roll and I’m not able to pull up the source code on the published page.

    Thanks again!!

  • Unknown's avatar
    fabianapsimoes · Member ·

    Hey @sandranickel,

    Yes, the published blog. If you are using Firefox, for example, just open sandranickel.wordpress.com and hit Ctrl+U. It should open a pop-up displaying your source-code.

    There are other ways to inspect your HTML tags. A good one is to use your browser’s developer tools. For example, in Firefox, if you want to inspect the HTML for your titles, you can just right-click them in your page and select “Inspect Element”. They will display a panel showing the HTML for that element and, on the right, all the CSS styles that apply to it. Here is a good post on how to use developer tools and find CSS selectors: https://dailypost.wordpress.com/2013/07/25/css-selectors/

    Hope you’ll find that useful and fun :)

  • Unknown's avatar
    sandranickel · Member ·

    You just taught me so much–and I would have never been able to wade through it on my own. Thanks a billion times over!

  • Unknown's avatar
    fabianapsimoes · Member ·

    Oh, that’s great to hear, @sandranickel! Please, let me know if you have any questions about CSS selectors and all that stuff :)

  • Unknown's avatar
    myriteofpassage · Member ·

    Can you please tell me if I should copy and paste my entire CSS code into the CSS Editor in order to make changes, now and in future?
    Thank you.

  • Unknown's avatar
    myriteofpassage · Member ·

    Can you please tell me if I should copy and paste my entire CSS code into the CSS Editor in order to make changes, now and in future?
    Thank you.

  • Unknown's avatar
    sandranickel · Member ·

    When I made the changes to my headers, I only pasted in the 6 lines of code recommended above. Nothing more than those 6 lines to change the color of my headings.

  • Unknown's avatar
    myriteofpassage · Member ·

    Thank you, Sandra. I’ve pasted the entire section related to Header and managed to reduce the size of the site title but I’m unable to increase the font size of the site description … don’t know why that is.

  • Unknown's avatar
    designsimply · Member ·

    Can you please tell me if I should copy and paste my entire CSS code into the CSS Editor in order to make changes, now and in future?

    The most common approach is to just copy in the CSS rules for changes you want to make. There is also a setting that will let you start fresh, but that’s a more advanced way of doing it and you would need to paste in all of the CSS starting from scratch.

    Check out this related help page for more tips about how CSS editing works at WordPress.com:
    http://en.support.wordpress.com/custom-design/editing-css/

  • Unknown's avatar
    designsimply · Member ·

    but I’m unable to increase the font size of the site description …

    Can you provide a link to the WordPress.com blog you’re working on?

  • Unknown's avatar
    myriteofpassage · Member ·

    Here’s the link: http://myriteofpassage.wordpress.com

    I’d like to increase the font size of “Welcome to the blog of author Belinda Nicoll” slightly, though I’d like to keep it to one line.

  • Unknown's avatar
    thesacredpath · Member ·

    The site description is currently at 13px, and even moving it to 14px takes it to two lines. Give the following a look and see what you think. This takes the font size to 15px and narrows the space for the site description down to 30% so the two lines are about the same length.

    .wf-active .site-description {
font-size: 15px;
width: 30%;
line-height: 1.5em;
}

    Another option would be to move it down below the site title although you would likely then want to stretch the site title out.

  • Unknown's avatar
    myriteofpassage · Member ·

    That did it … with another few small tweaks, I’ve got the two much better balanced, thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Sight Theme Color CSS for Headings’ is closed to new replies.