Okay
  Public Ticket #3759740
Changing texts color
Open

Comments

  • Riccardo Alain started the conversation

    Hello there,

    first of all my compliments for the template!

    I'm trying to change the colors of the website texts. 

    I've tried inserting some lines in the additional CSS but it seems it doesn't works.


    Could you please let me know if there is another way to do it?

    Thanks in advance

  • Riccardo Alain replied

    Also, there's the chance to customize the color of the two menu bars?


    Thanks

  •  1,972
    Support replied

    Hello Riccardo,

    we can definitely try to help.

    what are the two menu bars, can you send us screenshots so we can have a look?

    classic navigation menu or fulscreen overlay.

    Also about the website texts? what exactly cand can you send us your site URL?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Riccardo Alain replied

    Hello there!

    Thanks for the reply!


    I'm currently using the "About" page as home page for my website that is at the moment under construction.

    You can find attached the screenshots of what I'm referring to.

    The two bars are the one underlined in red in the "Menu_Bar.png" file,

    Regarding the text that I need to change is the one underlined in the other pngs.


    Also, I'm using a video as header background but on mobile isn't displayed unlike the desktop version.


    Could you please help me?


    Thanks a lot



    Attached files:  Menu_Bar.png
      Text_Footer.png
      Text_Body.png
      Text_Header.png

  •  1,972
    Support replied

    Hello Riccardo,

    do you want to change the color of these elements site wide or only on this page (About)?

    My second question is do you use ajax page transitions  in customizer -> general settings?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Riccardo Alain replied

    I would like to be able to change the elements/text color even just individually since the overall design is still in development.

    Regarding your secondo question, no, I'm not using Ajax page transitions. I have to?


    Thanks 

  •  1,972
    Support replied

    Is not that you have to. it's just that we can use an unique class id stored in the body element of each page that allows us to do individual customizations.

    therefore if you have the page online we can send you the exact css code to change the colors. Currently the theme is using a light & dark background color schemes. 

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Riccardo Alain replied

    Ok got it. At the moment the website is unpiblished, there's the chance to have the css code you're referring about for the pages I'm attaching? I'll try to use the code for each page in the "Additional CSS" tool.


    Thanks 

    Attached files:  CONTACT.png
      ABOUT.png
      LOADING.png
      MENU.png

  •  1,972
    Support replied

    Hi Riccardo, thanks for sending the screenshots we still need to inspect the actual page in the browser (using the available web developer tools)

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Riccardo Alain replied privately
  •   Support replied privately
  •   Riccardo Alain replied privately
  •   Riccardo Alain replied privately
  •  1,972
    Support replied

    Riccardo, there is no need. I will send you an example for the About page in our demo site

    http://clapat-themes.com/wordpress/serano/about-2/

    in which case you inspect the page and get the unique class id stored inside the <body> element which in our case is page-id-2584

    https://prnt.sc/hseXMLi93SlN

    so here is the code corresponding to the page id

    .page-id-2584 #menu-burger span {
        background-color: #ffff00;
    }

    .page-id-2584 h1.hero-title {
        color: #ffff00;
    }

    .page-id-2584 .hero-subtitle {
        color: #ffff00;
    }

    .page-id-2584 .hero-text {
        color: #ffff00;
    }

    .page-id-2584 .button-text {
        color: #ffff00;
    }

    .page-id-2584 #hero-footer {
        color: #ffff00;
    }

    .page-id-2584 .next-hero-title, .page-id-2584 .next-hero-subtitle {
        color: #ffff00;
    }

    .page-id-2584 .copyright {
        color: #ffff00;
    }

    .page-id-2584 .socials-wrap {
        color: #ffff00;
    }

    .page-id-2584 .socials li a {
        color: #ffff00;
    }

     

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Riccardo Alain replied privately
  •   Riccardo Alain replied privately
  •  1,972
    Support replied

    Hello Riccardo,

    do this for each element you want to change the color for

    for example menu items

    right click -> Inspect

    and you will see which of the elements has the color attribute (it's somewhere along the hierarchy)

    https://prnt.sc/UeP9CYmU37Rk

    so in this case\

    @media (min-width: 1025px) {
        .fullscreen-menu.invert-header .flexnav li a {
            color: #fff;
        }
    }

    but then if you want the color only in one page you prefix it with the unique class id

    @media (min-width: 1025px) {
        .page-id-2584 .fullscreen-menu.invert-header .flexnav li a {
            color: #fff;
        }
    }

     

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy