1. 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?

Discussion in 'Styling and Customization Questions' started by BlackImpallaSS, Oct 18, 2012.

  1. BlackImpallaSS

    BlackImpallaSS New Member

  2. DBA

    DBA Well-Known Member

    This is how I did mine:
    Code:
    .sticky, .sticky .posterAvatar, .sticky .stats {
    background-color: #FF0 !important;
    }
     
    Jake Bunce likes this.
  3. BlackImpallaSS

    BlackImpallaSS New Member

    Thanks DBA, but it did not work , in the attachment, i need to change the black background thats circle in red.
    Untitledbackground.png
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  5. BlackImpallaSS

    BlackImpallaSS New Member

    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?
     
  6. DBA

    DBA Well-Known Member

    Could you please post a url? Feel free to PM it to me.
     
  7. Shelley

    Shelley Well-Known Member

    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*/
    
     
    kkm323 and Jake Bunce like this.
  8. BlackImpallaSS

    BlackImpallaSS New Member

    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.
     
  9. DBA

    DBA Well-Known Member

    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;
    }
     
  10. BlackImpallaSS

    BlackImpallaSS New Member

    DBA, i added the code to my extra.css , and the results was still the same. background color is still black.
     
  11. Shelley

    Shelley Well-Known Member

    Could you link to your site/style? And are you using one of the frameworks that comes with the style?
     
  12. BlackImpallaSS

    BlackImpallaSS New Member

    Yes I figured it out. Thanks for everybody help.
     
  13. kkm323

    kkm323 Well-Known Member

    Thank you Shelley for this code it should definitely be a resource(y)
     
  14. Shelley

    Shelley Well-Known Member


    I'll post it in resources then if it helps people out and find a use for it.
     
    kkm323 likes this.

Share This Page