How to change the color of your Site Title & Tagline?

Asked on August 10, 2016 in Customization.
Answered

How do you go about changing the font color of your site title & tagline? I’d like tyo change mine from black to white.

andrew Layers User
Reply
  • Possible Answers to Your Question:

  • 2 Answer(s)
    Answered on August 11, 2016. Best answer

    Hey Andrew,

    You can change it to white with the following CSS code :

    
    .sitename a , .tagline {
    
    color: #FFF;
    
    }
    
    

    If you want for example your title white and tagline gray
    you can do the code separate :

    
    .sitename a {
    
    color: #FFF;
    
    }
    
    .tagline {
    
    color: #d3d3d3;
    
    }
    
    

    You can add the css code with devkit if you have it , otherwise go to dashboard -> Customizer -> CSS

    – Dieter

    Can I use this to change the size of the title as well? how would I do that?

    on August 12, 2016.

    Hi ,

    To increase the size of the title add the following CSS code :

    
    .sitename {
    
    font-size: 4rem;
    
    }
    .tagline {
    
    font-size: 2rem;
    
    }
    
    

    – Dieter

    on August 15, 2016.

    Thank you for any help.

    I am trying this technique with the Acquire theme and I can’t seem to get the sitename and the tagline to change color?

    Here is my code I am editing using the DEVKIT option.

    /*- HEADER ————*/
    .copyright .icon-2x,
    .header-secondary .icon-2x{
    font-size: 1.4rem;
    }
    .header-site,
    .header-site.header-sticky{
    background-color: #fff;
    }
    .header-site{
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
    }

    .header-overlay-no-push .header-overlay:not(.is_stuck){
    box-shadow: none;
    background:
    transparent linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%,
    transparent 100%) repeat scroll 0% 0%;
    }
    .sitename a{color: #3141a9;}
    .tagline {color: #3141a9;}

    on May 28, 2018.
    Reply
    Answered on August 15, 2016.

    Just a side note, the text will change from black to white automatically based on the “header” background color, by using specific color controls in Layers Pro, or the above Custom CSS.

    Here is the technical doc on the Header for anyone interested:

    Layers Framework: Header

    Vail Joy Layers Team
    Reply