Icons for Polls, locked thread, watching a thread, and pinned

[Mason K.]

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]

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

 

[Mason K.]

These icons I am trying to achieve:

 

[Russ]

These icons I am trying to achieve:
View attachment 3140

Oh replicate the icons we have here, I gotcha

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.

 

[Mason K.]

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.

Thanks Russ! Whenever you get the chance

 

[WoodiE]

Love the icons, thanks for sharing!

 

[Mason K.]

Still waiting on the code for polls when you get a chance @Russ

 

[Russ]

Oh , this CSS is cleaned up quite a bit:

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!

 

[Mason K.]

Thanks! That works great and they look flatter which is always makes things look cool

 

[Russ]

Thanks! That works great and they look flatter which is always makes things look cool

Font color wasn't taking before