XF 1.x Icons for Polls, locked thread, watching a thread, and pinned

Mason K.

Well-Known Member
I was wondering how I could replicate the following (polls, locked thread, watching a thread, and pinned) styled icons which are displayed on a thread's listing.
 

Russ

Pixel Exit Staff
Not sure I follow, what exactly are you trying to achieve? The icons are already in our premium styles so just curious what you're trying to do :D
 

Russ

Pixel Exit Staff
These icons I am trying to achieve:
View attachment 3140
Oh replicate the icons we have here, I gotcha :)

Code:
html .discussionListItem .iconKey .sticky
{
   background-color: #d0f4ac;
   border: 1px solid #86b05c;
   text-align: center;
   padding: 3px;
   border-radius: 100%;
}
html .discussionListItem .iconKey .sticky:before
{
   color: #86b05c;
}
html .discussionListItem .iconKey .locked
{
   background-color: #ffbaba;
   border: 1px solid #e46969;
   text-align: center;
   padding: 2px 3px 5px 4px;
   border-radius: 100%;
}
html .discussionListItem .iconKey .locked:before
{
   color: #e46969;
}
html .discussionListItem .iconKey .moderated
{
   background-color: #ffbbc4;
   border: 1px solid #de5252;
   text-align: center;
   padding: 2px 3px 5px 4px;
   border-radius: 100%;
}
html .discussionListItem .iconKey .moderated:before
{
   color: #de5252;
}
html .discussionListItem .iconKey .watched
{
   background-color: #cbe7f4;
   border: 1px solid #6aa4bf;
   text-align: center;
   padding: 2px 3px 5px 4px;
   border-radius: 100%;
   line-height: 17px;
}
html .discussionListItem .iconKey .watched:before
{
   color: #6aa4bf;
}
I think I've posted this in the past, but this is the CSS we have. I don't have polls on there... I'd need to update that when I get a bit of time.
 

Russ

Pixel Exit Staff
Oh :), this CSS is cleaned up quite a bit:

Code:
html .discussionListItem .iconKey span
{
   text-align: center;
   padding: 2px 3px 5px 4px;
   border-radius: 100%;
   line-height: 17px;
}
html .discussionListItem .iconKey .hasPoll
{
   background-color: #e5d4f8;
   border: 1px solid #cbaced;
   color: #8868ad;
}
html .discussionListItem .iconKey .sticky
{
   background-color: #d0f4ac;
   border: 1px solid #86b05c;
   color: #86b05c;
}
html .discussionListItem .iconKey .locked
{
   background-color: #ffbaba;
   border: 1px solid #e46969;
   color: #e46969;
}
html .discussionListItem .iconKey .moderated
{
   background-color: #ffbbc4;
   border: 1px solid #de5252;
   color: #de5252;
}
html .discussionListItem .iconKey .watched
{
   background-color: #cbe7f4;
   border: 1px solid #6aa4bf;
   color: #6aa4bf;
}
And includes the poll too!
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.