• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How do i change color of Sticky background?

#5
Thanks Jake, but it did not change the black background , it only change the text that is in the sticky. Is there a code that would just change the black color in the sticky?
 

Shelley

Well-known member
#7
here's a guide i wrote a while back. not sure it will help you as it styled to the point it separates each thread that is listed probably could be done with condensing the css though it was wrote a while ago.

sticky-thread-enhancements.png


Summary: A simply guide to enhance and make sticky thread listings distinguishable between standard threadlistings. This serves as a guide and you can style them in the colour of your choice.

Just place the following into your EXTRA.CSS Template:

Code:
/*STICKY THREAD  ENHANCEMENTS*/
 
.discussionList .sticky {
    background-color: #f7caca !important;
    border: 1px solid #d88585 !important;
}
 
.discussionList .sticky .posterAvatar, .discussionList .sticky .stats {
    background-color: #f7caca !important;
}
 
.discussionListItem .iconKey .sticky{
    border: 0px solid #d88585  !important;
}
 
.discussionList .sticky .avatar img,
.discussionList .sticky .avatar .img, .avatarCropper {
    border: 1px solid #d88585 !important;
}
 
.discussionList .sticky .title a, .discussionList .sticky .DateTime, .discussionList .sticky .EditControl {
    color: #8F080A !important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fbe8e8;
}
 
.discussionList .sticky .username, .discussionList .sticky .pairsJustified dt  {
    color: #373737 !important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fbe8e8;
}
.discussionList .sticky .stats dl  {
    border-left: 1px solid #d48f8f !important;
    border-right: 1px solid #d48f8f !important;
}
 
.discussionList .sticky .itemPageNav a  {
    background-color: #fee6e6 !important;
    border-color: #dfa4a4 !important;
    color: #c57c7c !important;
 
}
.discussionList .sticky .itemPageNav a:hover  {
    background-color: #fee6e6 !important;
    border-color: #dfa4a4 !important;
    color: #c57c7c !important;
    opacity: 0.4;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}
.discussionList .sticky .itemPageNav span {
    color: #c28686 !important;
}
.discussionList .sticky .muted {
    color: #373737 !important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #FBE8E8;
}
 
/*STICKY THREAD ENHANCEMENTS*/



Additonal Notes: For those that haven't styled the discussionlist here you should paste the following also into your EXTRA.CSS template which will style standard threads (as seen in the screenshot above).

Code:
/*STANDARD THREAD LISTING ENHANCEMENTS*/
 
.discussionListItem, .memberListItem {
    background: url("@imagePath/xenforo/gradients/breadcrumb-grad.png") repeat-x scroll center bottom #F6F6F6 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 3px 3px 3px 3px;
    margin: 5px 0;
}
 
.discussionListItem .stats dl {
    border-left: 1px solid #E0E0E0 !important;
    border-right: 1px solid #E0E0E0 !important;
}
 
.discussionListItem .posterAvatar, .discussionListItem .stats {
    background: url("@imagePath/xenforo/gradients/breadcrumb-grad.png") repeat-x scroll center bottom #F6F6F6 !important;
}
 
.discussionListItem .avatar img, .discussionListItem .avatar .img, .discussionListItem .avatarCropper {
    border: 1px solid #E0E0E0 !important;
}
.discussionListItem.InlineModChecked .posterAvatar, .discussionListItem.InlineModChecked .stats {
  background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #FFFFC8 !important;
}
 
/*STANDARD THREAD LISTING ENHANCEMENTS*/
 
#8
I tried the code you listed shelley , but the same thing happened, it did not change the black background , it only change the text that is in the sticky, but the black background still remain.
 

DBA

Well-known member
#9
You're using a custom style, try this:

Code:
.discussionListItem.visible.sticky, .discussionListItem.visible.sticky .posterAvatar, .discussionListItem.visible.sticky .stats, .discussionListItem.visible.sticky .lastPost, .discussionListItem.visible.sticky .listBlock
background: #fff !important;
}
 

kkm323

Well-known member
#13
here's a guide i wrote a while back. not sure it will help you as it styled to the point it separates each thread that is listed probably could be done with condensing the css though it was wrote a while ago.

View attachment 35945

Additonal Notes: For those that haven't styled the discussionlist here you should paste the following also into your EXTRA.CSS template which will style standard threads (as seen in the screenshot above).

Code:
/*STANDARD THREAD LISTING ENHANCEMENTS*/
 
.discussionListItem, .memberListItem {
    background: url("@imagePath/xenforo/gradients/breadcrumb-grad.png") repeat-x scroll center bottom #F6F6F6 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 3px 3px 3px 3px;
    margin: 5px 0;
}
 
.discussionListItem .stats dl {
    border-left: 1px solid #E0E0E0 !important;
    border-right: 1px solid #E0E0E0 !important;
}
 
.discussionListItem .posterAvatar, .discussionListItem .stats {
    background: url("@imagePath/xenforo/gradients/breadcrumb-grad.png") repeat-x scroll center bottom #F6F6F6 !important;
}
 
.discussionListItem .avatar img, .discussionListItem .avatar .img, .discussionListItem .avatarCropper {
    border: 1px solid #E0E0E0 !important;
}
.discussionListItem.InlineModChecked .posterAvatar, .discussionListItem.InlineModChecked .stats {
  background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #FFFFC8 !important;
}
 
/*STANDARD THREAD LISTING ENHANCEMENTS*/
Thank you Shelley for this code it should definitely be a resource(y)