[Solved] How to change background colour on top menu and text block

[T-bird]

I've just migrated to PS version 8.2.0 and for the most part I've got everything looking like I want, but I'm damned if I can figure out how to change the background colour of the top menu:

and text block:

I've searched everywhere in themes/classic/assets/css/theme.css and found all the other colours I wanted to change but I just cannot find the styles controlling the background colour of these two items. Can anyone point me in the right direction please? Is there another style sheet somewhere that I haven't found?

Edited Sunday at 08:39 PM by T-bird (see edit history)

[ComGrafPL]

URL would be great to see it.

[WebDesk Solution]

@T-bird

To change the background color of the top menu and text block, please follow these steps:

Step 1: 
Open the CSS file for custom styles, usually found at (If this file does not exist, create them.)
File Path: themes/{{your_theme}}/assets/css/custom.css

Step 2:
Paste the following code into the custom.css file

for the top menu background please add this CSS

#header, #header .header-top {
  background-color: #000033;
}

Note: Add the color you want to the background-color property.

Also, for the text block background please add this CSS

#custom-text {
  background: #000033;
}

Note: Add the color you want to the background property.

Step 3:
In your PrestaShop admin panel, go to Advanced Parameters > Performance, and click Clear Cache.

Step 4:
Visit the front end to confirm that the background color changed. Review the screenshot reference if needed.

We hope this solution works for you!
 

[T-bird]

Thank you. It worked for the text block, but not the header. I tried changing every instance of #header .header-top {
  background-color: #......;
} in theme.css (I'd rather change this than create a new custom one) but the header will not change colour.

[WebDesk Solution]

@T-bird

Okay, we reviewed your last comment regarding changing the header color via theme.css. Instead of creating a new custom CSS, kindly add the following CSS to the theme.css file

body #header .header-top {
    background: #000000;
}

After adding the CSS, make sure to clear the cache from the back office.
Then, visit the frontend to confirm that the header background color has been updated.
Hope this solution will work for you..!!

[T-bird]

On 11/27/2024 at 4:16 AM, WebDesk Solution said:

@T-bird

Okay, we reviewed your last comment regarding changing the header color via theme.css. Instead of creating a new custom CSS, kindly add the following CSS to the theme.css file

body #header .header-top {
    background: #000000;
}

After adding the CSS, make sure to clear the cache from the back office.
Then, visit the frontend to confirm that the header background color has been updated.
Hope this solution will work for you..!!

Thank you, that worked! I had to play around with it a bit but I finally got it to work.