Feature Request: Extra Unique CSS Classes

[Sai5i]

I have been used to modifying wordpress themes where each page gets different class in body. e.g: "single-post post-id-123 post-type-books post-category product-single product-category menu-item-123 widget-text widget-recent-posts" etc. So basically i can make each page, each area look different, hide some parts, add :before :after content, change fonts etc and that's what i do all the time.

But IPS have some major limits on that part. Even forum index page doesn't have any extra unique class in body. I tried to hide title "Forums" on index page and that created problems with other titles. Until i found that hide forum title plugin and then someone posted this simple code on that, which solved the issue.

body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader{ 
    display: none;
}

I mean do i really need a custom plugin to hide some text on forum index? or use that data-pagemodule etc. There is another example is modifying some forum or sub-forum name, i have lots of sub-forums. Each forum is listed on one line and i want to add some text after the sub-forum title. e.g:

Main Forum

• Random Stuff  (please post everything else here)

Its very easier with css but each sub-forum get code like this.

<ul class="ipsDataItem_subList ipsList_inline">
<li class="">
<a href="#">Random Stuff</a>
</li>

No class at all. If there was a unique class like that forum id. like `<li class="forum-30">` that would have make things easier. Its even difficult to use nth-child because all other forums also have same class selector for sublist..

So i would suggest to include some unique css selectors for each page. Forum index get its unique class in body, main forums and sub-forums on index gets their unique class selector in <li> tags and topics also get a unique class in body like "forum-topic" at-least but if there is topic-id class as well that would great. Forum category view also gets class like "forum-category forum-id-30".

All these classes would give great power to end-user over styles and anyone with simple CSS knowledge can change the design without going into PHP code and modifying the whole theme. Also same CSS code would be applicable on other themes.

[TAMAN]

You have data attributes to target by like for everything

for example

12 minutes ago, Sai5i said:

here was a unique class like that forum id. like `<li class="forum-30">` that would have make things easier.

You can target by forum id 

[data-forumid="1"] .ipsDataItem_subList.ipsList_inline{}

 

[clearvision]

I know you are looking for a built in solution, but for most of the cases you discuss you can make a simple template edit to add a class (like add "subforum-12" in index/forumRow for the children loop) or even with a line of php code in the template check the id and do something more specific to the html.

[Sai5i]

20 minutes ago, TAMAN said:

You have data attributes to target by like for everything

for example

You can target by forum id 

[data-forumid="1"] .ipsDataItem_subList.ipsList_inline{}

 

Okay. here is my quick code and it works. Thanks

[data-forumID="127"] .ipsDataItem_subList.ipsList_inline li:nth-child(5):after {
    content: "(Post everything else here)";
    margin-left: 10px;
}

But all sub-forums are sorted by alphabet. So if i add another sub-forum and it took earlier spot then this CSS will be useless for "Random Stuff" forum. Instead other number 5 sub-forum will show this message.

Its a feature request and a built-in single unique class for each forum in subList and body wouldn't hurt anyone and would save lot of time to find and modify theme files. It would also help on all other pages as i mentioned above. I hope IPS team will consider this in future versions and give designers to power over different types of pages.

[clearvision]

If you need to solve it now you can add this in the index/forumRow template, find the if $forum->hasChildren foreach loop, and add this

subforum-{$subforum->id}

to the li class.

I've had to do that and a similar thing in profile fields to get at stuff.  Fairly simple to maintain as single line.

 

[Sai5i]

Just now, clearvision said:

If you need to solve it now you can add this in the index/forumRow template, find the if $forum->hasChildren foreach loop, and add this

subforum-{$subforum->id}

to the li class.

I've had to do that and a similar thing in profile fields to get at stuff.  Fairly simple to maintain as single line.

 

That's great. Thanks for posting this.

I hope if IPS include that by default including some body classes and make them permanent. So it can work with all themes. It would help with changing themes and forum upgrades.