Support Forum

Sticky Posts with Different Background on Forum

JL Justin Lewis
Justin Lewis
Member

I’d like to find out how I can make it so Sticky Posts/Topics can have a different background (versus just that little pin image).

I want to separate stickies from that actual post area all together in a sense, so it’s distinctive where a sticky is and where a post from everyone else is.

8 Answers

New Answer

MP Mr Papa
Mr Papa
Member

you just need to add the css you want to your sp theme… all the classes are already there…

for pinned posts, the div will have a class of ‘spPinnedPost’…

for pinned topics, the div will have a class of ‘spPinnedTopic’…

just add the css to your sp theme style file… as always, we suggest having your own sp theme to keep from losing changes on upgrades:

http://codex.simple-press.com/codex/themes/theme-basics/creating-a-theme/

JL Justin Lewis
Justin Lewis
Member

Hmmmm.

When I tried to use spPinnedTopic it didn’t seem to work.

Can you give me a copy and paste of the CSS code?

JL Justin Lewis
Justin Lewis
Member

I figured it out :)

 

#spMainContainer .spPinnedTopic.spEven {
  1. background: gray;
}
#spMainContainer .spPinnedTopic.spOdd {
  1. background: gray;
}
JL Justin Lewis
Justin Lewis
Member

Nevermind :( when I tried that didn’t seem to work. But in Inspect Element it did.

BR Brandon
Brandon
Member

As a quick note to this. Recently the properties first pinned and last pinned have been added in to 5.1.4

This allows you to write some code that checks for first last pinned post and add some display or special info to them.

For example before the first pinned post you could created a banner that tells someone the following posts are pinned to the top and why. Then after the last pinned one you could do the same and have it say something like latest posts.

With that and the CSS changes you are doing it allows you to really point out the pinned posts to users. I have been meaning to setup one of my sites with it but have not gotten a chance to yet.
If that is something that might help you don’t hesitate to ask for a couple of examples. :)

JL Justin Lewis
Justin Lewis
Member

Hey Papa, just wanted to note that I said it didn’t work after I actually added the code to my custom css.

It worked only in inspect element in chrome (which usually works).

MP Mr Papa
Mr Papa
Member

what did you add???  and it should go in your sp theme… though wp theme should work too…

but what is the 1. and 2.??  probably copied from the inspector…  and really should be:

#spMainContainer .spForumTopicSection.spPinnedTopic.spEven {
    background: gray;
}
#spMainContainer .spForumTopicSection.spPinnedTopic.spOdd {
    background: gray;
}