Jump to content

Using page-specific selectors for specific forum pages


Recommended Posts

After reading the help guide

I was trying to figure how to make certain CSS change various forum pages specifically. For example, I wanted to change the logo based on which forum ID you were visiting; i.e. if the viewer was reading a list of topics in forum ID 2; they'd see one a different logo from all the other pages. And if they went to forum ID 3, they'd see a completely different logo.

body[data-pageapp="forums"] .ipsPageHeader {
	...your styles

So for the most part I want the logo to remain untouched until they viewed that specific forum ID assigned in the custom.css editor. So far I've only got it to change if they move to the forums app; and it would return on every other module. I really don't understand the data-page attribute that determines what forum I'm presently viewing.


Link to comment
Share on other sites

1 minute ago, Joel R said:

This may or may not be the ultimate goal (and maybe you're more interested in coding your own CSS), but if your aim is to create a logo per forum then you can check out these two files:

The logo was just an example that I felt people could associate with. The custom CSS I have planned is pretty broad and the goal is to have various themes for each forum section without having to create multiple Themes entirely.

Link to comment
Share on other sites

1 hour ago, Insydius said:

The logo was just an example that I felt people could associate with. 

I see. My answer still stands though. There is an app identifier in the body tag, but not a forum identifier. So you can’t target specific forums the way it is described in the article you linked to. 

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

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