3 added 395 characters in body
source | link

I have several pages, which are ordered like this:

Home
Projects
- Project 1
-- Project 1 Subpage 1
-- Project 1 Subpage 2
- Project 2
-- ...

And I want to change the background color (in this case of .site-main {} or any other css classes) depending on the page the user is right now.

  1. Currently on Home page (this is the default layout) -> Standard background color light blue
  2. I am on Page Project 1 -> background should be green.
  3. I am on Project 1 Subpage 1 -> background should be green.
  4. I am on Project 2 -> background red or something else

This is the standard layout right now (the lightest part should be changed):

enter image description here

What would be the best/easiest way to achieve this?

Edit:

What I did know is this:

In my page.php I added this

<div id="main-content" class="main-content <?php echo "roadkill-main-content"; ?>">

This is working fine (I'm getting another color now). What's missing is how to detect if the current page is child or grandchild or whatever of a page with the slug "project1" or others. What is the correct way to do this?

I have several pages, which are ordered like this:

Home
Projects
- Project 1
-- Project 1 Subpage 1
-- Project 1 Subpage 2
- Project 2
-- ...

And I want to change the background color (in this case of .site-main {} or any other css classes) depending on the page the user is right now.

  1. Currently on Home page (this is the default layout) -> Standard background color light blue
  2. I am on Page Project 1 -> background should be green.
  3. I am on Project 1 Subpage 1 -> background should be green.
  4. I am on Project 2 -> background red or something else

This is the standard layout right now (the lightest part should be changed):

enter image description here

What would be the best/easiest way to achieve this?

I have several pages, which are ordered like this:

Home
Projects
- Project 1
-- Project 1 Subpage 1
-- Project 1 Subpage 2
- Project 2
-- ...

And I want to change the background color (in this case of .site-main {} or any other css classes) depending on the page the user is right now.

  1. Currently on Home page (this is the default layout) -> Standard background color light blue
  2. I am on Page Project 1 -> background should be green.
  3. I am on Project 1 Subpage 1 -> background should be green.
  4. I am on Project 2 -> background red or something else

This is the standard layout right now (the lightest part should be changed):

enter image description here

What would be the best/easiest way to achieve this?

Edit:

What I did know is this:

In my page.php I added this

<div id="main-content" class="main-content <?php echo "roadkill-main-content"; ?>">

This is working fine (I'm getting another color now). What's missing is how to detect if the current page is child or grandchild or whatever of a page with the slug "project1" or others. What is the correct way to do this?

2 added 39 characters in body
source | link

I have several pages, which are ordered like this:

Home
Projects
- Project 1
-- Project 1 Subpage 1
-- Project 1 Subpage 2
- Project 2
-- ...

And I want to change the backgroundcolorbackground color (in this case of .site-main {} or any other css classes) depending on the sitepage the user is right now.

  1. Currently on Home page (this is the default layout) -> Standard background color light blue
  2. I am on Page Project 1 -> background should be green.
  3. I am on Project 1 Subpage 1 -> background should be green.
  4. I am on Project 2 -> background red or something else

This is the standard layout right now (the lightest part should be changed):

enter image description here

What would be the best/easiest way to achieve this?

I have several pages, which are ordered like this:

Home
Projects
- Project 1
-- Project 1 Subpage 1
-- Project 1 Subpage 2
- Project 2
-- ...

And I want to change the backgroundcolor (in this case of .site-main {} or any other css classes) depending on the site the user is right now.

  1. Currently on Home page (this is the default layout) -> Standard background color light blue
  2. I am on Page Project 1 -> background should be green.
  3. I am on Project 1 Subpage 1 -> background should be green.
  4. I am on Project 2 -> background red or something else

This is the standard layout right now:

enter image description here

What would be the best/easiest way to achieve this?

I have several pages, which are ordered like this:

Home
Projects
- Project 1
-- Project 1 Subpage 1
-- Project 1 Subpage 2
- Project 2
-- ...

And I want to change the background color (in this case of .site-main {} or any other css classes) depending on the page the user is right now.

  1. Currently on Home page (this is the default layout) -> Standard background color light blue
  2. I am on Page Project 1 -> background should be green.
  3. I am on Project 1 Subpage 1 -> background should be green.
  4. I am on Project 2 -> background red or something else

This is the standard layout right now (the lightest part should be changed):

enter image description here

What would be the best/easiest way to achieve this?

1
source | link

Change background color of subpages

I have several pages, which are ordered like this:

Home
Projects
- Project 1
-- Project 1 Subpage 1
-- Project 1 Subpage 2
- Project 2
-- ...

And I want to change the backgroundcolor (in this case of .site-main {} or any other css classes) depending on the site the user is right now.

  1. Currently on Home page (this is the default layout) -> Standard background color light blue
  2. I am on Page Project 1 -> background should be green.
  3. I am on Project 1 Subpage 1 -> background should be green.
  4. I am on Project 2 -> background red or something else

This is the standard layout right now:

enter image description here

What would be the best/easiest way to achieve this?