WordPress Themes, Plugins and HTML Templates › Forums › Farad WordPress Theme › Change colour of header/menu background › Re: Change colour of header/menu background
Hi Sally,
CSS of DesignOrbital themes is self explanatory and easy to customize, Let play with your ideas in the style.css file
I have made changes in the style.css for you. Changes are mostly #000 and #fff, you may modify the existing values with the followings in style.css.
I want to change the header/menu background to black
CSS Section:
/**
|
| =Header
|
*/
#header {
width: 100%;
margin: 0;
background: #000;
border-bottom: solid 2px #fff;
z-index: 100;
}[/CODE]
[B]and the menu font to white please. [/B]
[B][COLOR=#0000ff]CSS Section:[/COLOR][/B]
/**
|————————
| =Menu Primary
|————————
*/
[CODE]/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
display: block;
font-size: 14px;
line-height: 21px;
padding: 33px 20px;
position: relative;
text-decoration: none;
color: #fff;
}
/** Nested UL */
.menu ul ul.sub-menu {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
background: #000;
}
/** Global Anchors Hover */
.menu ul a:focus,
.menu ul a:hover,
.menu ul a:active {
color: #488ac5;
background: #000;
}[/CODE]
[B]Also, where can I edit the ‘BLOG’ banner?[/B]
If you are talking about switch off/on of this BLOG banner, than please follow the simple steps,
Go to: Appearance > Farad Options >Blog Settings
Here, you can control the Sub Heading easily.
If you want to edit the content than locate the following file,
farad/loop-meta.php
Enjoy![CODE]#header {
width: 100%;
margin: 0;
background: #000;
border-bottom: solid 2px #fff;
z-index: 100;
}[/CODE]
and the menu font to white please.
CSS Section:
/**
|
| =Menu Primary
|
*/
/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
display: block;
font-size: 14px;
line-height: 21px;
padding: 33px 20px;
position: relative;
text-decoration: none;
color: #fff;
}
/** Nested UL */
.menu ul ul.sub-menu {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
background: #000;
}
/** Global Anchors Hover */
.menu ul a:focus,
.menu ul a:hover,
.menu ul a:active {
color: #488ac5;
background: #000;
}[/CODE]
[B]Also, where can I edit the ‘BLOG’ banner?[/B]
If you are talking about switch off/on of this BLOG banner, than please follow the simple steps,
Go to: Appearance > Farad Options >Blog Settings
Here, you can control the Sub Heading easily.
If you want to edit the content than locate the following file,
farad/loop-meta.php
Enjoy![CODE]/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
display: block;
font-size: 14px;
line-height: 21px;
padding: 33px 20px;
position: relative;
text-decoration: none;
color: #fff;
}
/** Nested UL */
.menu ul ul.sub-menu {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
background: #000;
}
/** Global Anchors Hover */
.menu ul a:focus,
.menu ul a:hover,
.menu ul a:active {
color: #488ac5;
background: #000;
}[/CODE]
Also, where can I edit the ‘BLOG’ banner?
If you are talking about switch off/on of this BLOG banner, than please follow the simple steps,
Go to: Appearance > Farad Options >Blog Settings
Here, you can control the Sub Heading easily.
If you want to edit the content than locate the following file,
farad/loop-meta.php
Enjoy!