How to Add Background Image on just the Index Page

[Gaius Kong]

I'm able to target the header and make a gradient shift for two colors:

#ipsLayout_header>Header{background: linear-gradient(#3e6eb2, #144580)}

I'm able to target the whole background:

body{background: url({resource="whatevername.jpg" app="forums" location="front"}) no-repeat center top scroll #000; height: 100%; background-attachment: fixed; background-position: center top; background-blend-mode:screen; background-size: cover;
}

 

I am unable to target JUST the home/index page (but not the sub-forum pages). I tried combinations of #ipsLayout_body, Home, container, contentArea, content, etc. to no avail, because these words appear in every page. I simply couldn't target the index page alone. 

Could anyone help?

 

 

[Adlago]

Use a multi-skin method.

For example - create a copy of your theme.
Make your homepage use a copy theme. Enter your background settings here.

For the rest of your pages and forums, use an original theme for settings with a different background.

All this themes should be accessible to all users.

[Gaius Kong]

Thank you. I'll test it out and see how it works and will report here.

[Gaius Kong]

1 hour ago, Adlago said:

Use a multi-skin method.

For example - create a copy of your theme.
Make your homepage use a copy theme. Enter your background settings here.

For the rest of your pages and forums, use an original theme for settings with a different background.

All this themes should be accessible to all users.

 

Thank you. It works. Basically, in ACP forum settings, I need to go into each forum and manually set a theme for every forum (and this overrides the site-wide default theme that would be applied in that forum). 

It creates additional themes in the Theme menu, which is annoying.

 

Every forum has a number. May I use CSS to target specific forum to achieve the same goal, and thereby not create additional themes? 

 

 

[opentype]

10 hours ago, Gaius Kong said:

I am unable to target JUST the home/index page

This does it:

body[data-pageapp="forums"][data-pagecontroller="index"] #ipsLayout_header header {

}

 

[Gaius Kong]

Thank you. It finally worked out (by not specifying anything further after targeting index):

 

[data-pageapp="forums"][data-pagecontroller="index"]        {background: url({resource="Seven Planets.jpg" app="forums" location="front"}) no-repeat center top scroll #000; height: 100%; background-attachment: fixed; background-position: center top;background-blend-mode:screen; background-size: cover;
}