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

Replace background with colour/image?

Discussion in 'Styling and Customization Questions' started by Travis, Apr 13, 2013.

  1. Travis

    Travis Active Member

    How can I replace the background of the highlighted areas with a colour or an image?

    howtochange.png
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

    The "XXX said:" can be styled in EXTRA.css with

    .bbCodeQuote .attribution {
    background: #726C60 url('images/default/xenforo/gradients/form-button-white-25px.png') repeat-x top !important;
    }

    just change the background url to what you want.
     
    Shelley and Travis like this.
  3. Travis

    Travis Active Member

    Thanks! How do you change the text colour?
     
  4. Tracy Perry

    Tracy Perry Well-Known Member

    Travis likes this.
  5. Tracy Perry

    Tracy Perry Well-Known Member

    Just use the

    color: #colorcode;

    in the EXTRA.css definition.
     
  6. Tracy Perry

    Tracy Perry Well-Known Member

    Message block is controlled by

    .messageUserBlock a.username {
    color: red;
    background: #726C60 url('images/default/xenforo/gradients/form-button-white-25px.png') repeat-x top !important;
    }

    The color:red; makes the default for the name color red. You can change this to whatever you want. It works for the other 2 examples also.
     
  7. Travis

    Travis Active Member

    Background Changes but not text Colour. I want to make text colour white. I've tried "color:white;" and "color:#ffffff;" snd its not working.
     
  8. Tracy Perry

    Tracy Perry Well-Known Member

    Add !important after the color and before the ";".
    That will force an override of the default - but, if you use custom codes in your group settings it may also override them.
     
    Shelley likes this.
  9. Travis

    Travis Active Member

    Got it. Thanks! One final bit of help - in the likes summary, the User link is grey. I want to make this white, while not changing the link colour on the rest of the site. Is this possible?
     
  10. Tracy Perry

    Tracy Perry Well-Known Member

    Now on that... I'll defer to Shelley... Oh Shelley.... where are you?
    I've got a feeling it's something to do with

    .likesSummary a:link a:visited

    I'm having to do this based upon the base XenForo site as I use a likes replacement plugin.

    I just do a global colorization for them, since it fits my theme better using

    body .muted, body a.muted, body .muted a{
    color: rgb(146, 107, 6) !important;
    }
     
  11. Tracy Perry

    Tracy Perry Well-Known Member

    Just as an aside, if you want to make your usernames in the message block and members list have a shadow effect you can use

    .messageUserBlock a.username {
    text-shadow: 3px 3px 4px black !important;
    }
    .memberListItem h3.username {
    text-shadow: 3px 3px 4px #5C5B5B !important;
    }
     
  12. Travis

    Travis Active Member

    Thanks for your help Tracy!

    Shelley, you around? :)
     
  13. Tracy Perry

    Tracy Perry Well-Known Member

    She's offline right now, but she'll get a notice whenever she logs back in since she's participated in this thread (unless she stopped watching it).
    Sorry I couldn't definitively help with that last portion.
     
  14. Shelley

    Shelley Well-Known Member

    If you can provide a link to your forum it will be easier for the person helping to debug the issue and provide you with the necessary code.

    But guessing here:

    if you want to change the colour, the screenshot can be used as a reference with conjunction with the css (below) and add/adjust to your preference.

    likes.png

    Code:
    .likesSummary .username {color: red;}
     
    .likesSummary a {color: green;}
     
    .likesSummary {color: blue;}
    
     
    Tracy Perry likes this.
  15. Tracy Perry

    Tracy Perry Well-Known Member

    Your ears get to burning? :p
    I knew he could count on you to come thru in the crunch. Since I don't use the built in likes I was having to try and do it from the XF site - and not very well at that. o_O
     
    Shelley likes this.
  16. Shelley

    Shelley Well-Known Member

    I had to temp disable post ratings on my site. :D
     
  17. Tracy Perry

    Tracy Perry Well-Known Member

    duh.... didn't think of that. :confused:
     
  18. Travis

    Travis Active Member

  19. Shelley

    Shelley Well-Known Member

    try just adding this

    Code:
    .likesSummary .username {color: white !important;}
    .likesSummary a {color: white !important;}
    .likesSummary {color: white !important;}
    background: #726C60 url('@imagePath/xenforo/gradients/threadview-bg.png') repeat-x top !important;
    }
    
    If you are making all the text white you may as well do this in style properties and adjust the like text from in there.
     
    Tracy Perry likes this.
  20. Travis

    Travis Active Member

    Now the background image isn't showing up?

    I would do it in Style properties, but I can't get the link to change to white in just the like summary...
     
    thanhtienpda likes this.

Share This Page