Okay
  Public Ticket #3026965
Extra Class CSS
Closed

Comments

  •  2
    Tristan started the conversation
    April 19, 2022 at 6:38am

    I am building a contact page and need to put some elements into an icon list. I wish to change the colour of the font to a black. 
    https://kavaka.co.za/contact-page/

    The problem is there is an interference from the home page. I changed the home page icon list text colour to white to fit. Since it is a global setting it is applied to the contact page as well. 
    https://kavaka.co.za

    I believe using the extra class identifier would help to write specific changes but I can't quite seem to figure out how to structure it.

  •  1,877
    Judith replied
    April 19, 2022 at 7:51am

    Hello Tristan,

    Thanks for keeping in touch.

    Please try this css:

    .page-id-426 .contact .nectar-icon-list-item .content {
        color: #000000 !important;
    }

    Thanks.

  •  2
    Tristan replied
    April 19, 2022 at 9:55am

    Awesome, thanks! Worked perfectly. 

    I see the contact extra class identifier I put in was used as well as a page id tag. May I ask how to find the page id tag so I can do this again in the future?

    Final question, does this affect the whole page or would I be able to change individual elements. For example, make the left column have white text and the right column have grey text?

  •  2,958
    Andrew replied
    April 19, 2022 at 10:46am

    Hello Tristan,

    This guide might help in finding the page id https://www.elegantthemes.com/blog/tips-tricks/how-to-find-your-wordpress-page-id-and-post-id-and-what-you-can-do-with-them

    This CSS will apply to the whole page. If you need it to be more specific to a particular section, assign custom classes and add it to the CSS.

    Thanks,

  •  2
    Tristan replied
    April 19, 2022 at 10:53am

    That cleared it up perfectly, thanks for the help.