help locating CSS element

  • Resolved lemonlake

    (@lemonlake)


    10 years, 11 months ago

    Hi there, this is my first post so forgive my ignorance, but I have tried everything I can think of and I have an issue which should be easily resolved.

    I am currently building a website at https://www.lemonlake.ch using the “AccordInc” theme by TommusRhodus. (I have contacted them but this seems to fall under the category of “customization” which is only supported through a third party support site which I cannot afford at this time.)

    The theme is built such that the colorization can be set through the ‘Customize’ section under ‘Appearance,” which consists of a list of elements which you can change the color of (obviously), including Highlight Color, Background Color, Text Color, etc. Here is a screenshot. I am also using the plugin WP Google Fonts to customize my fonts, and as I have learned, most of the time I have to add custom CSS in the Google Fonts with the !important declaration to overwrite the parent stylesheet (I hope my terminology is correct here.)

    My question is this: each of the numbered menu items (Agence, Portfolio, etc.) when clicked, changes to the “highlight color” (as described/pictured above) which is fine – however, “highlight color” also dictates the color of the Project Title in the Portfolio section slider. I want to change the CSS to make the Project Titles black. When I right click the title and ‘Inspect Element’ I can see that the Project Titles are coded with the <h4> tag. I resolved to make a new font style in WP Google Fonts and then specify that as a different tag (whichever of the ones that aren’t already used, I think I decided on h6) and make all h6 elements black. BUT I CAN’T FIND WHERE IN MY CODE IT SPECIFIES PORTFOLIO TITLE AS H4!!! I can clearly see when doing ‘Inspect Element’ that the element is given the h4 tag, but I don’t know where I go to change that!!! I have searched (using ?F) EVERYWHERE in my stylesheets, and nowhere seems to contain anything remotely close to assigning <h4> to the Project Title.

    I really hope this makes sense and that someone can help me. I have done so much research and I can’t seem to figure this out for the life of me!!! It’s infuriating!!!

    Thank you in advance!

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

  • Hi lemonlake,

    You won’t find anything in your stylesheets that assigns HTML tags. CSS is styling the existing HTML. You would need to look into your theme template files such as page.php to locate the code, but don’t do so as you would want to learn about and create a child theme first.

    If you want to target the H4 for your Project Titles you can do so with the following CSS:

    .project-detail > h4 a {
  color: #000;
}
    Thread Starter lemonlake

    (@lemonlake)

    Thank you middev!

    Where would I enter that bit of code? Also, wouldn’t this also change the Menu highlight color (e.g. PORTFOLIO, when selected, turns that color, and I assume this is because of H4) ? If not, and you can tell me where to enter this, everything will be solved!

    I misspoke when I said I had looked everywhere in my “stylesheets.” I meant that I have looked all throughout my template files in the “Editor” section.

    I am familiar with the basics of child themes, but I’m not sure how that would solve my problem if I don’t even know why (or where) in my files this element (Project Title) is assigned h4 or how to change that?

    Again, thank you so much!

    Thread Starter lemonlake

    (@lemonlake)

    Nevermind! I entered it in the Custom CSS field and it worked!!!! Thank you so much. I was really overwhelmed by the idea of entering the forum, but you solved my problem instantly!

    You would add the code the the end of your style.css file. Since you have the option to edit your theme files, locate the style.css file and scroll to the end and add what I gave you.

    This will not affect the Portfolio color as it is more specific and will override that. It will affect all H4 elements that are within the class of .project-detail.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘help locating CSS element’ is closed to new replies.

Tags