[Support request] single page color background

[ratve]

Hello,

i istalled and use with child theme GeneratePress Versione: 3.0.2
I tried to change the background color of a single page through additional css:

body.page-id-3799 id pagina {
background-color:transparent;
background-image:url(‘https://ratve.it/imm/radiosfondo.png’);
background-repeat:no-repeat;
background-attachment:fixed;
}

and this:

.page-id-3799 .entry-title, .entry-title a {
color: #222;
text-decoration: none;
display: none;
}

but there is not change.

Could you help me please.

my website is ratve.it and the page in question is https://ratve.it/pagina-dei-download/

Thank you very much.

RaTve

[Leo]

Hi there,

The ID for the page you’ve linked is 4064 so try this CSS:

body.page-id-4064 {
    background-color:transparent;
    background-image:url(‘https://ratve.it/imm/radiosfondo.png’);
    background-repeat:no-repeat;
    background-attachment:fixed;
}
body.page-id-4064 .entry-title, .entry-title a {
    color: #222;
    text-decoration: none;
    display: none;
}

[ratve]

Dear Leo,
thank you for your replay. I tried with new ID page, but there is not change.

[David]

Hi there,

any reason you’re adding an Image to background instead of just adding a background color ?

[ratve]

Dear David,

no, i do not have reason to add image background and tried this css:
body.page-id-4064 id pagina {
background-color:#222;
background-repeat:no-repeat;
background-attachment:fixed;
}

and tried also this:

.page-id-4064 .entry-title, .entry-title a {
color: #222;
text-decoration: none;
display: none;
}

but background do not change. I also cleaned the cache.

or maybe the css code above i modified is not correct?

[David]

All you need is this to change the Body Background color:

body.page-id-4064 {
    background-color:#222;
}

[ratve]

Hello David,

Thank you for your replay.
yes it worked, but I would like to create a dark background around the players to bring out the colors of the videos. The link of the page is the following: https://ratve.it/pagina-dei-download/ everything remains white around the videos. I don’t know what that background is called.

[Ying]

Try this css:

.page-id-4064 #post-4064 .inside-article {
    background-color: #222222;
}

Let me know 🙂

[ratve]

Hi everyone,
Happy New Year to all!

Thanks thanks thanks! now it works. But at this point I would like to ask how to darken the header and the background of the menus, just to give it a try.

Thank you very much, you all are greit!

ratve

[Ying]

Great it works!

You can set the navigation background color at:
Customizing > Colors > Primary Navigation > Background.

Happy new year to yourself too 🙂

[ratve]

Dear Ying,

Thank you for your kind replay.

Could i ask what about the menu css for a single page? if not all menu all pages have some color, instead i would like to modify only one page, this: https://ratve.it/pagina-dei-download/
Thank you.
RaTve

[David]

You can add this CSS:

.page-id-4064 .site-header,
.page-id-4064 .main-navigation, 
.page-id-4064 .main-navigation ul ul,
.page-id-4064 .sidebar .widget{
    background-color: #222;
}

.page-id-4064 .main-navigation .main-nav ul li a, 
.page-id-4064 .menu-toggle, 
.page-id-4064 .menu-toggle:hover, 
.page-id-4064 .main-navigation .menu-bar-items, 
.page-id-4064 .sidebar .widget, 
.page-id-4064 .sidebar .widget a {
    color: #fff !important;
}

I have included the sidebar as well in the CSS – if you don’t want the sidebar changed then simply delete the CSS selecors containing the .sidebar CSS class.

[ratve]

Dear David,

I managed to get what I wanted and recombined the code like this:

body.page-id-4064 {
background-color:#222222;
}

.page-id-4064 #post-4064 .inside-article {
background-color: #222222;
}

.page-id-4064 .site-header,
.page-id-4064 .main-navigation,
.page-id-4064 .main-navigation ul ul,
.page-id-4064 .sidebar .widget{
background-color: #222222;
}

.page-id-4064 .main-navigation .main-nav ul li a,
.page-id-4064 .menu-toggle,
.page-id-4064 .menu-toggle:hover,
.page-id-4064 .main-navigation .menu-bar-items,
.page-id-4064 .sidebar .widget,
.page-id-4064 .sidebar .widget a {
color: #808080 !important;
}

I hope it is optimized.
Thank you very much, this forum really works! congratulations!
RaTve

[David]

Glad to hear thats working for you!

[Author]

Posts