Changing Background Color of a Blog's Title page

Shopify Discussion
1

Hi there,

I have a Dawn theme site where I have created a blog page.

Unfortunately I am unable to change the Blog Page title’s Background color to toher than the Default theme colors.

(I am referring to the The Blog page in itself and not the featured Blogs titles) .

You can find attached a screenshot explaining my issue.

I would appreciate any solution,

Regards,

FDT

Blog Title Background2.png
Blog Title Background2.png996×393 21.4 KB

1 Like
2

Hi @FDT ,

Can you share your website so we can provide a code specific for you? Thank you

3

https://fillesdetanios-9130.myshopify.com/blogs/news/la-finesse-de-la-cuisine-du-chef-virginie-giboire

pass : testing

4

Hi @FDT ,

I see you have a code added already with an !important. I always discourage using “!important” and hopefully Shopify developers never advise someone to use this. This creates a problem in the future. Just like what happen to you now.

made4Uo_0-1679336395025.png
made4Uo_0-1679336395025.png880×777 39.1 KB

Two solutions you can choose.

First Solution:

Remove the code below that is in the base.css file under the Asset folder. But this will affect whatever the element that you want this to work

header{
  background: #D8C5A5 !Important; /*couleure Beige*/
   /*background: #201E1C !Important;*/
  /*background: #D3D3D3 !Important;*/
  color: #FFFFFF !Important;

}

Second Solution:

Add an !important code to cover the previous one. I recommend not using this.

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
header.page-width.page-width--narrow {
    background-color: unset !important;
}
5

Hi @made4Uo ,

I appreciate your prompt reply and solution.

But as you can see if I remove the code I have set I will lose the color of my header.

Is there any solution to separate each color apart; One for the website header and one for the Blog page Title>

6

Hi @FDT ,

I understand. Please remove the said code with !important and replace it with the code below. The code only applies to the header and not the page title

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    background: #D8C5A5;
    color: #fff;
}
7

this has partially solved the issue as I lost now the whole website header color. I only have a part of the header with the background as per attached.

Blog Title Bckg_Mod1.png
Blog Title Bckg_Mod1.png1327×489 24.5 KB

8

Sorry, my bad. I thought I did tried the code. Please replaced the previously provided code with the code below.

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    background: #D8C5A5;
    color: #fff;
}
9

@made4Uo this code worked perfectly!

Excellent. I really appreciate your prompt action and solution.

I recommend @made4Uo as a Shopify coding solution.

Best regards,

FDT

Best regards,

1 Like