Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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

  • SOLVED

Hi guys,

1. Will like to customize the Homepage slider background area, it currently curved but will liked to have it (straight). With a custom background i created in Photoshop.

2. Change Menu Dropdown color

3. Remove Buy Now Button
4. Help with footer background color



Thanks

Answers (4)

2012-02-07

Luis Abarca answers:

Could you please put the colors and upload the background image and write down the URL or upload as attachment here ??

The url of your site gonna help to edit the CSS and send it back with the changes.

Regards!


wunmzy comments:

Dear Luis,

you for your reply, it late here now, will get background ready tomorrow and attached it to you. Am not too sure what the size is in that area, but will forward it anywhere.

Thanks


wunmzy comments:

Hi, please what is the best way to attach file without public view.

Thanks


wunmzy comments:

Thank you for your great support, it all working fine.

2012-02-07

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]

2012-02-07

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

2012-02-08

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