different background color for one specific page

This topic has 15 replies, 2 voices, and was last updated 3 years ago by Skandha.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
October 8, 2021 at 11:43 am #291956

Hans
Participant

Hello

I need to change the background color of one specific page. On that page there is now one image and under the image there is a white space.And I do not get rid of it. I tried to change the background image. I found numerous solutions, but all fail. One of the solutions of which I think it must work is on the catch forum:
.page-id-1859 #main { background-color: #f7f7f7; }
Also this css did not make the trick.

Is there a solution for this problem?

Kind regards

Hans Hagmeijer

October 9, 2021 at 1:26 am #291990

Skandha
Participant

@toerfiets: Hello Hans,
Can you please post the URL of the page where you want to change the background color?

Kind Regards,
Skandha

October 9, 2021 at 3:16 am #292006

Hans
Participant

Hello Skandha,

I tried on hagmeijer.nl the css:
.site-header-main {
padding: 0;
}

(I found that, not your suggestion)

This worked fine in Google Chrome.
But in safari on the Mac the sub-items dissapear.
That is amongst others why I should like the different background color, because the gap between image and menu disappears.

Kind regards

Hans Hagmeijer

October 9, 2021 at 7:55 am #292005

Hans
Participant

Hello Skandha,

The URL is: https://www.sinfore.nl/?page_id=1085

What I should like is that this page is equal full width as https://www.hagmeijer.nl/test-2/.

The yellow part on hagmeijer.nl is an image with 1920 x 1200 px.
On https://www.sinfore.nl/?page_id=1085 the image is 1920 x 1000. Today I will make this image 1920 x 1200.

Kind regards

Hans Hagmeijer

October 9, 2021 at 8:00 am #292027
Skandha
Participant
@toerfiets: Hello Hans,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
.page-id-1085 #page,.page-id-1085 .header-media .wrapper {
    max-width: unset;
    width: 100%;
}
```
Let me know if this works out!
Kind Regards,
Skandha
October 9, 2021 at 9:40 am #292029

Hans
Participant

Hello Skandha,

This worked fine as far as it concerns the width.
If it should be possible to give the page-id 1085 another background color, then it is totally fine, because then there is a connection between the menu and the image. Now there is still a gap between the image and the menu.
I tried:.site-header-main {
padding: 0;
}
This worked well in Google Chrome but didn’t work in Safari.

Kind regards

Hans Hagmeijer.

October 10, 2021 at 9:51 am #292083

Hans
Participant

Hello Skandha.

I spent hours to find a aolsution and maybe I did not describe the problem.

What I should like is the functionality of changing background colors as is it standard in the possibilities of the customizer, but then for just one page. Then I should be very glad.
Is that possible.

I tried many solutions from the supportforum, but every solution did not work.

Kind regards

Hans Hagmeijer

October 10, 2021 at 11:08 pm #292120
Skandha
Participant
@toerfiets: Hello Hans,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
/* To get rid of the gap between menu and the image */
.page-id-1085 #header-content {
    display: none;
}
```
Can you let me know for which section you would like to change the background color on this page?

Let me know if this works out!
Kind Regards,
Skandha
October 11, 2021 at 2:44 am #292135

Hans
Participant

Hello Skandha,

This worked perfect. Thank you.

What I should like is the background color like in Customize -> colors -> page background color.
Then the whole page (content part also) gets the whisked color.
I should like -if it is possible- that the page section under the image gets the whisked background color.

Kind regards

Hans Hagmeijer

October 11, 2021 at 11:22 pm #292180
Skandha
Participant
@toerfiets: Hello Hans,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
#content, #site-generator {
    background: #ffc90d;
}
```
Let me know if this works out!
Kind Regards,
Skandha
October 12, 2021 at 2:59 am #292196

Hans
Participant

Hello Skandha,

Thank you. This worked fine.

Kind regards

Hans Hagmeijer

October 12, 2021 at 5:55 am #292203

Hans
Participant

Hello Skandha,

There is still a problem. I noticed it when I looked the other pages. OM all the pages there occurs a little yellow band at the page bottom. see: https://1drv.ms/u/s!AlMivTDXp7Eso8t6Q0bmPuqcjjH5qQ?e=HG4230

I added: .page-id-1085 #content, #site-generator {
background: #ffc90d;
}
Because page 1085 is the only page with that color I added .page-id-1085 to the css you gave me.

I should be glad when the little band at the bottom can dissapear.

Kind regards

Hans Hagmeijer

October 19, 2021 at 9:09 am #292607

Hans
Participant

Hello Skandha,

Did you already find a solution for this problem?

Kind regards

Hans Hagmeijer

October 20, 2021 at 6:27 am #292664
Skandha
Participant
@toerfiets: Hello Hans,
Change the code I provided you above to
```
.page-id-1085 #content, .page-id-1085 #site-generator {
    background: #ffc90d;
}
```
Let me know if this works out!
Kind Regards,
Skandha
October 20, 2021 at 7:47 am #292671

Hans
Participant

Hello Skandha,

Thios is working fine. Thank you.

Kind regards

Hans Hagmeijer

October 20, 2021 at 7:50 am #292672

Skandha
Participant

@toerfiets: Glad it worked out. Have a good day! 🙂

Kind Regards,
Skandha
Author

Posts