Change Color of Categories Heading Background

[Chris04626]

I would like to change the background color behind where it Says Categories, Information etc.

[tdr170]

Need to know what version of Prestashop you are speeking of.

1.4 and 1.5 are different in the way you change these colors.

[Chris04626]

1.5.2

 

Some id like to change the color using code and some id like to change the color using an image

[tdr170]

For the most part you change these in the Global.css file, try this find the heading .block h4 and change the Background color, you can use a number such as #000 (black) #fff (white) or just use a common name like red, blue or green.

I use paint shop pro and with the color picker it will give you the hexadecimal value of that color.

Or you can use a chart like this one http://html-color-codes.com/

 

 

.block h4 {

padding:6px 11px;

font-size:12px;

color:#fff;

text-shadow:0 1px 0 #000;

text-transform:uppercase;

background:#383838

}

 

To change the background to an image you need to change the background line like this

background: url(../img/image21.jpg) in this case the image is uploaded to the ..themes/prestashop/img folder.

 

You will find that almost all the backgrounds for the block titles are covered by the .block h4 background color, however there are some you will need to change in other areas of the global.css file and a few possibly within the modules css file. But this should get you started if you run into trouble let me know and I can take a look at your site with a developer tool and tell you what to change.

[Chris04626]

Ok i got that

 

Now how about the Top Menu Bar?

 

http://freshchristma...athsofmaine.com

 

Im trying to make a christmas theme based on my current site http://familytraditionwreaths.com which uses a different shopping cart software

 

But i am not very good with this stuff

Edited December 1, 2012 by Chris04626 (see edit history)

[tdr170]

This link does not work http://freshchristma...athsofmaine.com tells me current theme unavailable 'default' please check your.....!

[Chris04626]

oops should work now

[tdr170]

Nope here is the message in full.

 

Current theme unavailable "default". Please check your theme directory name and permissions.

[Chris04626]

now?

[tdr170]

Now I at least get the maintenance page in order for me to view you need to take the site out of maintenance.

[Chris04626]

lol how about now. i Forgot i had that on

[tdr170]

This is superfish-modified.css located in ..modules/blocktopmenu/css you will need to change the following line under this heading

 

.sf-menu {

 

background: transparent url(../img/bg_blocktopmenu.png) repeat-x 0 0;

 

To something like this:

 

background: #23501A;

 

 

You will also need to change the following, the first line is what it is, the second is what I changed it to, to make it green you can

use the colors of your chose here.

 

 

.sf-menu li {

background: transparent url(../img/bg_li_blocktopmenu.png) no-repeat 100% 0;

 

.sf-menu li {

background: #1D3D17;

}

 

 

 

.sf-menu li li {

background: rgba(113, 113, 113, 0.9);

}

 

.sf-menu li li {

background: #26561C;

}

 

 

 

 

.sf-menu li li li {

background: rgba(113, 113, 113, 0.9);

}

 

.sf-menu li li li {

background: #26561C;

}

 

 

 

 

 

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: transparent url(../img/bg_blocktopmenu_li_hover.png) repeat-x 0 0;

}

 

 

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: #317224;

}

 

 

 

 

 

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #4e4e4e;

}

 

 

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #317224;

}

 

 

 

Will check back tomorrow to see how its going.

[Chris04626]

Awesome Thanks for your help its much appreciated.

 

How about the background to where it has money back, Exchange in Store, Payment Upon Shipping and 100% Secured?

 

Also i am really looking to make the header area the same as my current site so i can use that on this site. How would i even begin to do that?

[tdr170]

For the Blockreinsurance go to modules/blockreinsurance and edit syle.css

 

change this:

#reinsurance_block {background:url(../blockreinsurance/img/bg_reinsurance_block.gif) repeat-x 0 0 #c3c7cb}

 

to this:

#reinsurance_block {background:#1D3D17}

 

and this:

#reinsurance_block li {

color:#333;

text-shadow:0 1px 0 #fff

 

to this:

#reinsurance_block li {

color:#fff;

text-shadow:0 1px 0 #000

 

 

Then in Global.css change this:

 

#footer {

background:#333;

}

 

to this:

#footer {

background:#23501A;

}

To finish go to modules/blockmyaccountfooter and edit blockmyaccount.css and change this:

#footer .myaccount h4 {

background:#333

}

to this:

 

#footer .myaccount h4 {

background:none

}

 

 

For the header logo just create 1 logo using the snow background and the wreath logo and an area on top in the green color thanupload from the BO. Should be 980px wide and 225 to 250 px high.

 

Like This:

 

 

[Chris04626]

Awesome, thanks

 

Take a look what do you think?

 

I really appreciate all your help

[tdr170]

Ok now go to global.css and change the header_logo margin-top to 0px.

 

Now go to modules/blocksearch and edit blocksearch.css and chage to the following:

 

#search_block_top {

position:absolute;

top:-267px;

margin-left:260px;

}

 

 

Now go to modules/blockpermenentlinks and edit blockpermenentlinks.css and change to the following:

ul#header_links {

list-style-type: none;

float: left;

margin-top:-260px;

margin-left:-300px

}

#header_links a {text-decoration: none; color:#fff; font-size:12px; }

 

 

 

Now go to modules/blockuserinfo and edit blockuserinfo.css and change to the following:

 

#header_right #header_user {

clear:both;

float: right;

margin-top:0px;

width: 535px;

margin-right:-30px

 

}

 

#header_user_info {

clear:both;

float:left;

margin-top:-20px;

padding:0;

font-size:12px;

margin-left:150px

}

 

and it will look like this:

[Chris04626]

i think i messed up somewhere as it dont look like that

[Chris04626]

Ok i got it all and it looks great other than the cart goes to the right too much

[Chris04626]

Also when you log in the log out button merges into the cart area

[tdr170]

Try this adjust a couple things in modules/blockuserinfo/blockuserinfo.css

 

Change this:

#header_right #header_user {

margin-top:0px;

}

 

to this:

#header_right #header_user {

margin-top:-10px;

margin-right:-30px

}

 

 

 

 

change this

#shopping_cart a{

background: url('img/icon/cart.gif') no-repeat 10px 9px #eee;

}

 

to this

#shopping_cart a{

background: url('img/icon/cart.gif') no-repeat 10px 9px ;

}

 

 

 

and this:

 

#header_user_info {

margin-top:-20px;

margin-left:150px

}

 

to this:

 

#header_user_info {

margin-top:-25px;

margin-left:110px

}

[Chris04626]

nope, that did work, check it out

[Chris04626]

I seem to have got it,

 

Any other suggestions?

 

IS there a way to make it so it has a Home link to the top left in front of Contact?

 

Maybe even move the log in and cart up there too like my other site?

 

I appreciate all the help and guidance you have given.

Edited December 2, 2012 by Chris04626 (see edit history)

[Jim McGill]

Hi tdr170,

 

I have successfully changed the background color for the Block Reinsurance but how do I change the four corners of the icons from white to my color #006699?

 

The screen capture is below:

 

http://img441.imageshack.us/img441/8070/yw8d.jpg

 

Many thanks for you help!

 

Jim

[vekia]

in this case you have to edit these images in some images editor like photoshop

there is no other way to achieve what you want - it's beceuse these "gray corners" are on images, not in the code / css

[Jim McGill]

in this case you have to edit these images in some images editor like photoshop

there is no other way to achieve what you want - it's beceuse these "gray corners" are on images, not in the code / css

 

I see... Thanks vekia for your advice!

[cudasan]

Hi,

 

I want to change the same in Nice and Clean theme. How it is possible?

 

Need to change the categories, newsletters, contact us heading background color.

 

 

Please help me to solve this.

Your above solution not working in nice and clean theme

 

Thanks in advance