Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Pro Site Header Change Background Color And Text Color
Tagged: Altitude Pro, site-header
- This topic has 3 replies, 2 voices, and was last updated 7 years, 8 months ago by Christoph.
-
AuthorPosts
-
August 3, 2016 at 1:19 pm #190713kayakauthorityMember
Hello-
I know this is a simple fix but since I am new to wordpress/CSS, I just can't seem to figure out how to do the following in Altitude Pro.
Of note, Studiopress has advised me ANY time I change/edit code that I always log into my host provider (Bluehost) > Child Theme > Style.css and edit from there. Never add or edit from inside WordPress. I just wanted to explain that beforehand so that anybody who responds can provide direction using that method of code edting. Also, if you could just paste exactly what to change and what to change it to, that would definitely help me with understanding and learning how to do this.
I would like to remove the transparent effect on the home page site header and just make the background color of the site header to be white (for all pages, not just the home page). It is currently set as black. Of note, I want to keep the effect that transparent header box has (i.e. it minimizes the size of the header itself when you scroll). I just don't want it to be transparent. What lines do I edit and to what? There are numerous lines of code in style.css that reference the site header (such as lines 163 989, and 1083 just for some examples).
Since the site header will now be white and there will be no transparent header, I obviously need to know how to change the menu text from white to black for the site header. What lines do I need to edit and to what?
Since I am now changing the menu text color, I will also have to know how to change the hover color for the menu for the site header. What lines do I edit and to what?
Thanks for any help you can provide.
http://www.hiydrate.comAugust 3, 2016 at 6:15 pm #190719ChristophMemberHi,
take a look at this introduction to the Chrome Inspector: https://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/
This way you can find out which selectors to change.
August 4, 2016 at 2:34 pm #190745kayakauthorityMemberHello-
Thanks for the reply. This definitely does make it easier.
Just some basic questions that I'm not sure about.
If I want the site header to be white, do I need to change the text "dark" to "white" or some other word and also change "#000" to "#fff"?
.site-header.dark {
background-color: #000;What is moz-placeholder and moz-selection? If I'm changing the colors for the site header, do I also have to change either of these? When I change their colors, I don't notice anything changing on the preview screen.
*::-moz-placeholder {
color: #fff;
opacity: 1;
}
*::-moz-selection {
background-color: #fff;
color: #000;August 4, 2016 at 10:57 pm #190761ChristophMemberHi,
the name of the selector has nothing to do with the actual color.
In this case, the selector is used by jQuery so changing the name would prevent the theme to functions properly.For colors, you will in 99% of the time change the hex value. https://en.wikipedia.org/wiki/Web_colors
So yes, change #000; to #fff;You can ignore the -moz- things.
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.