Color change of logo, typo and background from one page to another

Hi there,

Any chance you can link us to your site in question?

You can use the private information field.

Let me know :)

Hello thanks for your answer, here are the links

The example site you linked is using text title so it can be done with CSS.

Your actual is using image logo so it's not possible to change the color with CSS.

You will need this filter to change the logo image on other pages:
https://docs.generatepress.com/article/generate_logo/
https://codex.wordpress.org/Conditional_Tags#A_PAGE_Page

Thanks for your reply

And to change the background color, text and menu color as well as the tabs on a single page, its possible ? (Without touching the logo)

Thanks 😄

You'd need this method:
https://generatepress.com/forums/topic/using-a-different-menu-for-a-particular-page/#post-1842722

Thank you for your answer, I added this:

body.page-id-41 .main-navigation {
background-color: # ff8080;
}

body.page-id-41 .main-navigation .main-nav ul li a,
body.page-id-41 .main-navigation .menu-toggle {
color: #FFFFFF;
}

Except that as you can see on the page, it doesn't totally change the menu ...

Looks like you need to change the header color as well:

body.page-id-41 .site-header {
    background-color: #ff8080;
}

Thank you for your reply !

Is there a solution to remove the white background from menu items?

As well as for the footer?

Thanks

All the CSS for the menu are listed here:
https://docs.generatepress.com/article/changing-navigation-colors/

The white background would be the /* CURRENT ITEMS */.

As for the footer, this should work:

body.page-id-41 .site-info {
    background-color: #000;
}

Hello, Thanks for your reply !

For this :

.main-navigation .main-nav ul li [class * = "current-menu-"]> a {
color: #FFFFFF;
background-color: # 1e72bd;
}

Where should I put the: "page-id-41" so that the changes only appear on this page?

Last question, for the footer, is it possible to define a different color for the links on hover? White example

Thank you so much 😃

Hi Matthieu,

Page ID class is applied on the body tag.

You can put it as the first part of the selector.

Example:

.page-id-41 .main-navigation .main-nav ul li [class*="current-menu-"]> a {
color: #FFFFFF;
background-color: #1e72bd;
}

Ah thank you for your answer !

On the other hand this code does not work to remove the white background in the menu bar in hover on "a propos" and "contact" nor on the icons of the social networks

A solution ? 😀

If you want to apply it on multiple pages, use a Hook element and remove the page id selector.

Add this within the hook element:

<style> 
.main-navigation .main-nav ul li [class*="current-menu-"]> a {
color: #FFFFFF;
background-color: #1e72bd;
}
</style>

and then set the display rule location.

Or if you want it to apply on the all of the pages, just set it properly to what you want on the Customize > Colors setting.

I want to apply the elements below only on one specific page: ".page-id-41"

- Background of the "A Propos" "Contact" menu items and the icons of social networks in # b2dfdb (Like the background of the page)

- Overview of these elements in white

- Overview of the links of the footer "Mentions légales" and "Plan du site" also in white

Thanks 😀