Jump to content

How to Add Background Image on just the Index Page


Gaius Kong
 Share

Recommended Posts

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?

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

 

 

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...