StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Changing heading independantly

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing heading independantly

This topic is: resolved
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 20, 2014 at 12:16 pm #132299
    faisal
    Member

    When I change the color of "About Me" to red color with CSS. It changes other titles below e.g " Get free updates of blog". I know that they might be linked so changing one item changes the other. My question is that how can I uniquely change the color of "About Me" to a different color without seeing same impact of the other titles

    http://www.test.telecomlighthouse.com
    November 20, 2014 at 12:59 pm #132305
    Lauren @ OnceCoupled
    Member

    The thing to remember here is that classes (beginning with a period) can appear on a page multiple times, while an ID (beginning with a pound symbol) should only appear once. So, to impact a single element on a screen, best practice would be to use the element ID. If the element you're targeting doesn't have an ID, try to find a parent element with an ID, then also select that appropriate class under it. In your case:

    #user-profile-2 .widgettitle

    Best,
    Lauren

    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

    November 20, 2014 at 9:33 pm #132344
    faisal
    Member

    Thanks Lauren,

    I tried hovering using Firebug but do not know how to reach to the above code ( ID for parent element) directly from screen. When I select " About Me" with hover tool. It takes me to .widgettitle only, instead of ID.

    FAISAL

    November 21, 2014 at 10:36 am #132405
    Lauren @ OnceCoupled
    Member

    Have a look at this: http://oi58.tinypic.com/206k9ja.jpg

    In this screenshot, I'm using Chrome, but the inspector works similarly to Firebug.

    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

    November 21, 2014 at 11:47 am #132417
    faisal
    Member

    Thanks, in the screen shot, there is " Red" shown, when I change this color, it changes the color of all titles. What I want is to change only "About Me "

    Am I missing something or selecting the wrong element ?

    November 21, 2014 at 12:38 pm #132427
    Lauren @ OnceCoupled
    Member

    Yes, I think you're missing the point(s).

    1. I already gave you the answer. You need to define the color of #user-profile-2 .widgettitle to change only that header.
    2. If you want to understand HOW to find the answer in the future, you need to look at the highlighted parts in the image. I'm showing you where the class of your element is, and then I'm showing you how to move UP and find the ID, so you can target only that header.

    Best,
    Lauren

    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

    November 21, 2014 at 12:59 pm #132430
    faisal
    Member

    Thanks, clear now

    I understand that I need to add this code to the end of CSS file ?

    November 22, 2014 at 6:37 am #132487
    faisal
    Member

    THANKS, Its done now

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Changing heading independantly’ is closed to new replies.