These icons I am trying to achieve:
View attachment 3140
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.
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;
}
Thanks! That works great and they look flatter which is always makes things look cool![]()