How do i change color of Sticky background?

Sort by date Sort by votes
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.webp


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*/
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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;
}
 
Upvote 0 Downvote
Shelley said:
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*/
Click to expand...
Thank you Shelley for this code it should definitely be a resource(y)
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

mercures
  • Question Question
How can I change color of page numbers?
Replies
2
Views
55
mercures
mercures
Nordgard
  • Solved
XF 2.2 How do I change color on this text?
Replies
2
Views
560
Nordgard
Nordgard
sbj
  • Solved
XF 2.2 Change color of selection
Replies
2
Views
579
sbj
sbj
thesignalman
  • Question Question
XF 2.2 How do I change the color on the text of the google translate tagline?
Replies
2
Views
263
thesignalman
thesignalman
thesignalman
  • Question Question
XF 2.2 How do I change the colors of all the widgets?
Replies
3
Views
489
htsumer
H
Back
Top Bottom