Change Slider Area background color, footer bg, dropdown menu WordPress

Charles Klycinski answers:

Hey,

This job need few css changes. Please send me email with your pattern for slider background and hex color for the menu. I will be happy to help you.

My email [email protected]

Duncan O'Neill answers:

Hi,

you need to make changes to

yourdomain.com/wp-content/themes/Hermes/css/screen.css

The relevant lines in that file are lines 2947 for the div#slider_wrapper ( the full-page-width container for the slider ), and line 993 for div.nivoSlider ( the slide itself ).

Below are the css lines which control the slider at present;


#slider_wrapper {
width: 100%;
height: 360px;
margin: auto;
overflow: visible;
margin-top: -250px;
background: transparent url('../images/slider_shadow.png') no-repeat center bottom;
text-align: center;
}



.nivoSlider {
position: relative;
width: 960px;
height: 340px;
margin: auto;
background: black url('../images/ajax-loader.gif') no-repeat 50% 50%;
}


The relevant lines are the background rules. Just upload your background image, and change the rule to point to that background image.

Part 2 of your question. The background color in the header can be changed on line 463 of the screen.css file I pointed to earlier.


#top_bg {
width: 100%;
background: white;
padding-top: 5px;
padding-bottom: 5px;
}


And the background for the dropdown can be edited on line 635 of the screen.css file;


#menu_wrapper .nav ul li ul, #menu_wrapper div .nav li ul {


This theme uses the nivoSlider. You can find more information about that at [[LINK href="http://nivo.dev7studios.com/"]]http://nivo.dev7studios.com/[[/LINK]]

If needed I can make these changes via FTP.

hope this helps

idt answers:

For simplicity do all these changes in your/wp-content/themes/Hermes/css/screen.css file.

1. To remove curve, remove these styles:
.curve
{
background: transparent url('../images/curve.png') no-repeat center top;
width:100%;
height: 96px;
margin-top: -74px;
}

body.home .curve
{
margin-top: -48px;
}
1.a, The simplest way to change background of slider is, change this style:

body.home #header_pattern
{
background: transparent url('../images/skins/flower3_pattern.png') repeat;
padding: 20px 0 0 0;
height: 260px;
margin-top: -390px;
}
Change ../images/skins/flower3_pattern.png to the filename of the image you want to use and add !important after repeat. So your new style will be like this:
body.home #header_pattern
{
background: transparent url('../images/skins/your-new-background-image.png') repeat !important;
padding: 20px 0 0 0;
height: 260px;
margin-top: -390px;
}
Take note of how flower3_pattern.png, it's just a small image but it was repeated horizontally because of the repeat property specified in your style. If your new background has a gradient or of different size as the image used before, the style above needs to be changed. That's why it's important we see your images and perhaps your site so we can adjust what we post here.

And this to use the same background image as above and add !important:
body #header_pattern {
background: url("../images/skins/flower3_pattern.png") repeat;
height: 140px;
margin-top: -222px;
padding: 20px 0 0;
}
so it becomes
body #header_pattern {
background: url("../images/skins/your-new-background-image.png") repeat !important;
height: 140px;
margin-top: -222px;
padding: 20px 0 0;
}

2. TO change background color of the drop down, look for this:
#menu_wrapper .nav ul li ul, #menu_wrapper div .nav li ul
{
display: none;
list-style: none;
background: #fff;
position:absolute;
float: none;
padding: 0;
width: 180px;
z-index: 1000;
margin-top: 0px;
padding-bottom: 0;
font-size: 11px;
z-index: 9999;
border: 1px solid #E1E1E1;
border-bottom: 1px solid rgba(150, 150, 150, 0.2);
-webkit-box-shadow: 4px 4px 0px 0px rgba(150, 150, 150, 0.1);
-moz-box-shadow: 4px 4px 0px 0px rgba(150, 150, 150, 0.1);
box-shadow: 4px 4px 0px 0px rgba(150, 150, 150, 0.1);
}
Change the line
background: #fff;
Change #fff to the color you want.

The CSS for item #1 changes will probably still needs additional changes depending on your background image. But at least with this you'll have an idea. If you have more questions related to this, fire away, I'll be glad to answer.

Thanks,
idt

wunmzy comments:

Thank you so much for your reply, am so excited to have discovered this website, everyone is so supportive.

Luis Abarca have solve my problem.

thanks a lot

idt comments:

Sure, no problem... It is always a good practice though to let everyone know if someone is already working behind the scene on your issue.

Thanks,
idt