Add a CSS class to Pinned Topic row

[NeedCoffee]

At the moment there's no class or ID on a pinned topic. This means we cannot easily adjust the appearance via CSS.

This was mentioned here, but not in the correct forum: 

I'm guessing the suggestion wasn't necessarily seen or considered for IPB 4.3, but hopefully it might now be ?

 

[steve00]

1 hour ago, NeedCoffee said:

At the moment there's no class or ID on a pinned topic. This means we cannot easily adjust the appearance via CSS.

This was mentioned here, but not in the correct forum: 

I'm guessing the suggestion wasn't necessarily seen or considered for IPB 4.3, but hopefully it might now be ?

 

Can be done but will need to make changes to the actual template (doing so may require reverting template and re-adding the change with future upgrades)

If happy with that then:

admincp >> themes >> far right of theme name select the </> button

find forums >> forums >> topicRow

in there look for

<li class="ipsDataItem ipsDataItem_responsivePhoto {{if $row->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $row, 'tableClass' ) && $row->tableClass()}}ipsDataItem_{$row->tableClass()}{{endif}} {{if $row->hidden()}}ipsModerated{{endif}}" data-rowID='{$row->$idField}'>

change to

			<li class="ipsDataItem ipsDataItem_responsivePhoto {{if $row->mapped('pinned')}}pinned{{endif}} {{if $row->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $row, 'tableClass' ) && $row->tableClass()}}ipsDataItem_{$row->tableClass()}{{endif}} {{if $row->hidden()}}ipsModerated{{endif}}" data-rowID='{$row->$idField}'>

then save

in custom.css add:

.pinned {
  background: #fff;
}

obviously change the #fff to your own choice

[NeedCoffee]

Thanks very much - that'll work for now, which is great.

Hopefully one of the IPS team will consider just adding a CSS when a topic is pinned, to save all that effort. Will they see this or do we need to tag them?

[The Jimmo]

Can do this without modification to the template. Not the best CSS practice though and will not work in old versions of IE:

.ipsDataItem_main span[title='Pinned'] {
    color: #000;/*Just for fun*/
	/*insert your CSS*/

}

 

[steve00]

57 minutes ago, The Jimmo said:

Can do this without modification to the template. Not the best CSS practice though and will not work in old versions of IE:

.ipsDataItem_main span[title='Pinned'] {
    color: #000;/*Just for fun*/
	/*insert your CSS*/

}

 

Afraid not, wants the background color changed

[The Jimmo]

18 minutes ago, steve00 said:

Afraid not, wants the background color changed

Misread, thought background of icon.

[TAMAN]

A simple jQuery code can do the job if it is important to you :; 

[steve00]

UPDATE TO MY CODE ABOVE:

Use the following code instead of above code

			<li class="ipsDataItem ipsDataItem_responsivePhoto  {{if $row->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $row, 'tableClass' ) && $row->tableClass()}}ipsDataItem_{$row->tableClass()}{{endif}} {{if $row->hidden()}}ipsModerated{{endif}} {{if $row->mapped('pinned')}}pinned{{endif}}" data-rowID='{$row->$idField}'>

Changed as if pinned topic is unread the that background color over rode the pinned background

[Luuuk]

On 5/1/2018 at 1:58 PM, NeedCoffee said:

At the moment there's no class or ID on a pinned topic. This means we cannot easily adjust the appearance via CSS.

 

On 5/1/2018 at 3:30 PM, NeedCoffee said:

Hopefully one of the IPS team will consider just adding a CSS when a topic is pinned, to save all that effort.

Yes, I really hope that a simple CSS solution (like in Xenforo) will be introduced without the need to alter the template.