How do I decipher the code that correlates to the visual page elements?

  • Resolved johnthompson008

    (@johnthompson008)


    11 years, 9 months ago

    Thank you, between the online instruction with CSS and the book i’m reading i’m starting to get it. But I’m still struggling to figure out when there is a visual element I want to format, how I find where that element is referenced in code so that I can manipulate it with the right selectors in CSS. I see all the code in the Editor, I just don’t know how to decipher what in the html is correlating with what i’m looking at visually on the page.

    Here’s what i’m trying to figure out at the moment. Per someone’s advice I’ve entered:

    #access li.page-item-37 a {
    font-family: curlz mt; font-size: 23px; color: #aabadd;
    }

    into my Custom CSS Manager and have successfully formatted just the font, size, and color of the one menu item i want. Even when i changed the order of that menu item on the menu, the formatting followed it which made made me happy, i thought it would just format whatever item was in that space.

    I understand the the # is used to select and element based on it’s id, so the id must be “access” li. means list, and page-item-37 must obviously be the menu item i’m working with. My understanding here is that these symbols are relating to the HTML written already in the theme. So i thought as an experiment i would try to custom format a different menu item by finding it in the HTML editor to see how that menu item is labeled (since i’m not quite sure why one of the 6 links in my menu bar is labeled page-item-37) and then i could format that. I opened up the HTML editor and did a search for “page-item-37”, or just “page-item” to find where the other menu items are listed and how they are listed, so i could manipulate them using CSS. But i don’t find that anywhere in the editor. Am i on the right track? Where would i find out what the other menu items are in order to manipulate them with CSS, and am i right that i need to basically understand how to read the HTML in order to know how to apply CSS to accomplish what i’m working toward?

    Thanks!

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

  • Yes, you are totally on the right track – and it does take a bit of practice and knowledge to “get it” – but you will :).

    Firebug (addon for Firefox browser) is your best friend for CSS work – it shows you exactly what you are looking for – you can use “inspect element” on any element and it shows you the HTML and the CSS for that element. Sometimes you can just use the existing CSS, while other times you will need to add additional CSS selectors in order to target the item you want.

    Thread Starter johnthompson008

    (@johnthompson008)

    Thank you, thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I decipher the code that correlates to the visual page elements?’ is closed to new replies.