How to specify if the header is 'light' or 'dark'

Free and Premium WordPress Plugins & Themes Forums WordPress Themes Luviana How to specify if the header is 'light' or 'dark'

  • This topic has 3 replies, 3 voices, and was last updated 1 month ago by J. Davis.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #889159
    Thomas Moore
    Participant

    Hi there,

    Does anyone know how I can specify if the header items at the top are going to display in ‘light’ or ‘dark’ mode, and how I can change these colours without changing them for both?

    By customising the colours, it sets them for both the ‘light’ and ‘dark’ versions.

    • This topic was modified 2 months, 3 weeks ago by Thomas Moore. Reason: clarity
    #889827
    Annette Hill
    Keymaster

    Hi Thomas, there is no opportunity to do this via Customiser, but you can manage it with the help of custom CSS.

    #890184
    Thomas Moore
    Participant

    OK, inspecting the element shows me the applicable CSS, but they are the same for both the light and dark versions, can you let me know how to do this? I’m just looking to get the same behaviour as the demo theme.

    Thank you!

    .site-branding .site-title a {
    display: inline-block;
    vertical-align: top;
    line-height: 1;
    margin-top: 2px;
    color: inherit;
    text-decoration: none;
    }
    a {
    color: #1c6042;
    text-decoration: none;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
    a {
    background-color: transparent;
    }
    *, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    }
    user agent stylesheet
    a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
    }
    .site-branding .site-title {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-size: 1.25rem;
    font-family: “Noto Serif”, serif;
    font-weight: 400;
    line-height: 1.4;
    }
    .site-branding {
    color: #ffffff;
    }
    body.absolute-menu .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fafafa;
    }
    .site-header {
    padding: 0.9375rem 20px;
    color: #404040;
    background: #fff;
    -webkit-box-shadow: 0px 1px 2px rgba(80, 80, 80, 0.1);
    box-shadow: 0px 1px 2px rgba(80, 80, 80, 0.1);
    position: relative;
    }
    body, button, input, select, optgroup, textarea {
    color: #5f6060;
    font-family: “Open Sans”, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.75;
    }
    html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    }
    user agent stylesheet
    html {
    color: -internal-root-color;
    }
    *, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    }
    *, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    }

    • This reply was modified 2 months, 3 weeks ago by Thomas Moore. Reason: more detail
    #907341
    J. Davis
    Keymaster

    Hi Thomas,

    We recommend to remove custom styles and make sure you use latest version of theme. The color of header depends on the usage of featured image. If you add featured image to the page then there is applied dark layout. If there is not used a featured image there is applied light header.

    best regards,
    J. Davis

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.