I want to change the color of the header gray bar in 1.5...

[huntleybill]

I have gone to themes>default>css>global.css and have made the changes to change the colors for the block headers as well as the footer. I cant find where I make the changes to change the black/grey color of the bar in the header. You know, the one that has the "home" link on it. I am using the default theme.

 

If it is in global.css, can you tell me where. I don't see it.

[Telesight]

It is not in the CSS changeable. This is een image called: bg_blocktopmenu.png

Situated in:

.../modules/blocktopmenu/img

Edited October 20, 2012 by Telesight (see edit history)

[huntleybill]

Thank you Telesight, but that did not work. I edited the file you suggested (which is a vertical grey line) to the color I wanted and re-saved it back to the original folder. It had no effect on the grey horizontal bar on the header.

 

Is there another suggestion?

[brady]

Did you ever figure this out? I want to change the black bar (and all the other black bars) to another color and can't figure out how to do this in the default theme?

[bside2234]

If I remember correctly. In 1.5.2:

themes/default/global.css

 

To change the block headers find this code and change the color.

/* BLOCK .block ******************************************************************************** */

.block {margin-bottom:20px}

#footer .block {margin-bottom:0}

.block h4 {

padding:6px 11px;

font-size:12px;

color:#fff;

 

Top horizontal menu:

Navigate to: modules/blocktopmenu/css/superfish-modified.css

 

The background on the horizontal menu is an image like mentioned.

This is found under .sf-menu and should look like this:

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

I think you can change it to a color by replacing it with something like:

background: #4e4e4e;

of course replace the color with what you want.

In this file you will also find the hover color, text color and the text shadow color.

[tdr170]

To change the color of the header backgrounds edit global.css and change .block .title_block background color (1.5.3) H4 in previous versions.

You can change the Top menu background color in superfish-modified.css as the img file is no longer used in 1.5.3, you could modify the background to use the image if desired. (if fresh install of 1.5.3 you will need to upload the image to modules/blocktopmenu/img)

 

Header Backgrounds: 1.5.3 --------1.5.2 used .block H4

 

/* BLOCK .block ******************************************************************************** */

.block {margin-bottom:20px}

#footer .block {margin-bottom:0}

.block .title_block {

padding:6px 11px;

font-size:12px;

color:#fff;

text-shadow:0 1px 0 #000;

text-transform:uppercase;

background:#6b7375;

text-align:left;

font-weight: bold;

}

.block .title_block a {color:#fff}

.block ul {list-style-type:none}

.block li.last { border:none}

.block li a {

display:block;

color:#333

}

 

Top Menu: 1.5.3.1

 

 

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

}

 

 

Top Menu 1.5.2.0

 

.sf-menu {

margin: 10px 0;

padding:0 5px;

width:970px;/* 980 */

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

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

-moz-box-shadow: 0px 1px 2px #c6c6c6;

-webkit-box-shadow: 0px 1px 2px #c6c6c6;

box-shadow: 0px 1px 2px #c6c6c6;

}

Edited January 4, 2013 by tdr170 (see edit history)

[brady]

Thanks. That worked great.

 

If I remember correctly. In 1.5.2:

themes/default/global.css

 

To change the block headers find this code and change the color.

/* BLOCK .block ******************************************************************************** */

.block {margin-bottom:20px}

#footer .block {margin-bottom:0}

.block h4 {

padding:6px 11px;

font-size:12px;

color:#fff;

 

Top horizontal menu:

Navigate to: modules/blocktopmenu/css/superfish-modified.css

 

The background on the horizontal menu is an image like mentioned.

This is found under .sf-menu and should look like this:

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

I think you can change it to a color by replacing it with something like:

background: #4e4e4e;

of course replace the color with what you want.

In this file you will also find the hover color, text color and the text shadow color.

[nops]

Thanks. That worked great.

 

Hi,

 

Can someone comment how is this done in Prestashop 1.5.4. I tried to change it in the modules/blocktopmenu/css/superfish-modified.css but I did not find the background: transparent url(../img/bg_blocktopmenu.png) repeat-x 0 0;

row.

 

In the css there are 2 categories "Essential Styles" and "Demo Skins", I probably should change this under the Essential Styles, right? It looks like that:

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

border-right: 1px solid #777;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

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

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

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

ul.sf-menu li li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

 

I want the color to be changed to #e9e6e2, currently it is some blackish color.

 

Many thanks!

[tdr170]

Hi,

 

Can someone comment how is this done in Prestashop 1.5.4. I tried to change it in the modules/blocktopmenu/css/superfish-modified.css but I did not find the background: transparent url(../img/bg_blocktopmenu.png) repeat-x 0 0;

row.

 

In the css there are 2 categories "Essential Styles" and "Demo Skins", I probably should change this under the Essential Styles, right? It looks like that:

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

border-right: 1px solid #777;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

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

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

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

ul.sf-menu li li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

 

I want the color to be changed to #e9e6e2, currently it is some blackish color.

 

Many thanks!

 

 

This was changed you will now need to change the background color here.

 

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

 

 

 

You will also need to change other colors in the Demo Skins area for the Hover and Sub Menu items.

Here are a couple of examples.

You will need to play a little to get it just how you want.

 

change this

.sf-menu li li {

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

To this

.sf-menu li li {

 

background: #6b7375

 

 

 

 

change this

.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;

outline: 0;

}

To this

.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: #6b7375;

outline: 0;

}

[nops]

Hi

 

Thanks, I tired that, so it looks like this now:

 

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #ebecec;

 

and

 

 

.sf-menu li li {

background: #e9e6e2;

}

.sf-menu li li li {

background: #e9e6e2;

}

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

background: #e9e6e2;

}

.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: #e9e6e2;

outline: 0;

}

 

But still nothing .

 

I forgot to mention that I am using Alysum 2.3 theme, so maybe I need to look somewhere under the theme catalogues?

 

Sorry for the silly questions, this is the first time for me to open a css file let alone to edit one.

 

Many thanks for your help!

[tdr170]

Can you give a link to the shop, also look in themes/yourtheme/modules and see if there is a top horizontal menu.

[nops]

uus.beebiriided.ee

[Paulito]

Good morning,

 

You need to go to:

 

alysum.css around line 279 and change the background colour

 

• background: rgb(241, 18, 18);
  
• color: #ccc;
  
• padding-top: 25px;
  
• font: normal 12px Georgia, "Times New Roman";
  
• line-height: 18px;
  

 

 

Hope this helps

 

Paul

[tdr170]

Good morning,

 

You need to go to:

 

alysum.css around line 279 and change the background colour

• background: rgb(241, 18, 18);
  
• color: #ccc;
  
• padding-top: 25px;
  
• font: normal 12px Georgia, "Times New Roman";
  
• line-height: 18px;
  

 

Hope this helps

 

Paul

 

 

Yes Sir, Sorry nops but this is not the same top menu that this post was started about.

Hope this works for you just the same.

[nops]

Many thanks, this helped. You can have a look uus.beebiriided.ee, the color is changed but can you also guide me to the place where I can change the background of the shopping cart and the footer. They are still black.

 

And another mystification, I seem to have lost my Top Mega Menu, I tried to restore it, it is activated and has all the categories linked to this but it is still not showing. It cannot be connected to the css files, I only changed the colors and did not touch anything else.

 

Many thanks.

[vekia]

follow the forum rules, if you've got another question not related to main case in this thread - create new topic.

 

Some posters may have a tendency to create a single topic and to list in it all of their questions rather than flooding the forum with posts. However, unless your questions are very closely related, it is necessary to create one topic per question, and to post them in the appropriate sections (installation, use, etc.).

This will give you a greater chance of getting them all answered.

 

 

The posts containing heterogeneous demands may be deleted by the moderators.