Dentalia has now been updated to 2.3 and a major update for Recycle is coming soon. We hope you enjoy the new features! Thanks for your patience!

Okay
  Public Ticket #2790144
Different color in Header
Closed

Comments

  •  3
    rumenrs started the conversation

    Hi,

    I love theme and thanks for creating.

    I'm trying to change on few pages header color, is this possible?

    Example: 3 pages with 3 different header colors.

    I found only "Header overlay" but doesn't helps me.


    Thanks

  •  564
    OrionThemes replied

    Hi,

    Dentalia has a dark and a light header options. You can change the header type on a page edit screen. The colors can then be set in Theme Options:

    6806917850.png

    But this allows you for only two color options.

    To add a third color, I think the easiest way to change the header color is with CSS. 
    Each page has its own id, which can be used for setting the color. For example, Your home page id is 24618.

    4694251730.png

    You can change the color like this:

    .page-id-24618 .nav-container {
    background-color: blue!important;
    }

    if there are multiple pages, where you want to set the same color, you can write the css like this.

    .page-id-24618 .nav-container,
    .page-id-1234 .nav-container {
    background-color: blue!important;
    }

    The CSS code goes in Theme Options -> Custom CSS.


    You will also need to add a transparent png logo (instead of logo with solid background), for this to work nicely. 

    I hope this helps,

    Andrej

  •  3
    rumenrs replied

    Wow, Thank you very much!

    What a nice and easy for custom wordpress theme. I was able to change many colors in one page, using this page-id:

    .page-id-24680 .nav-container,
    .page-id-24680 .site-footer,
    .page-id-24680 .copyright-footer,
    .page-id-24680 .back-to-top,
    .page-id-24680 .sub-menu {
     background-color: #DF7401!important;
    }

    P.S. Yes, will change the logo to be transparent.

    Thanks again

  •  3
    rumenrs replied

    I was wondering...

    is it possible to change and the logo, using this kind of 

    .page-id-24680

    As far I can see, the img src, doesn't have class tag and can't replace it like:

    .page-id-24680 .site-branding > a > img{  background: url('')!important; }

    Any ideas?

    Thank you

  •  564
    OrionThemes replied

    Unfortunately this is not as easy. The logo is loaded through html ( not CSS ). It can't be replaced with CSS. 

    The theme supports dark and light logo. If there are max two logos altogether on the site, then you can use this to your benefit, but if there are more, then it gets complicated. You would need to write a custum orion_get_logo() function. This requires moderate knowledge of php and using a child theme. The original orion_get_logo() function is located in dentalia/framework/helpers.php file. But if you create a function with the same name in your child theme, then your function will load instead of the dentalia one.

    Kind regards,

    Andrej



  •  3
    rumenrs replied

    I understand, thank you for the answer. I think for now I'm okay with two logos.



    Thanks