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'

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by   Thomas Moore 1 week, 1 day ago.

Viewing 3 posts - 1 through 3 (of 3 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 1 week, 4 days 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 1 week, 1 day ago by   Thomas Moore. Reason: more detail
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.