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 4 years, 8 months ago by J. Davis.
- AuthorPosts
- November 30, 2019 at 10:33 am #889159Thomas MooreParticipant
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, 10 months ago by Thomas Moore. Reason: clarity
December 2, 2019 at 1:33 pm #889827Anna ChuprynaSpectatorHi Thomas, there is no opportunity to do this via Customiser, but you can manage it with the help of custom CSS.
December 3, 2019 at 3:03 am #890184Thomas MooreParticipantOK, 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, 10 months ago by Thomas Moore. Reason: more detail
January 21, 2020 at 10:51 am #907341J. DavisKeymasterHi 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 - AuthorPosts
- You must be logged in to reply to this topic.