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

[Thomas Moore]

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 4 years, 5 months ago by Thomas Moore. Reason: clarity

[Anna Chupryna]

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

[Thomas Moore]

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 4 years, 5 months ago by Thomas Moore. Reason: more detail

[J. Davis]

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

[Author]

Posts