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

XF 1.3 Grouping Selectors?

Discussion in 'Styling and Customization Questions' started by xomp, Jul 4, 2014.

  1. xomp

    xomp Member

    Is there any way to group all of these selectors so that I can change the background color for Staff messages?

    .message.staff
    .messageList .message
    .messageText
    .message .editDate
    .message .messageInfo

    Peas and Apples
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Do you mean this?

    Code:
    .message.staff,
    .messageList .message,
    .messageText,
    .message .editDate,
    .message .messageInfo
    {
    background-color: orange;
    }
     
  3. xomp

    xomp Member

    Thank you Brogan, it appears however, that it's changing the background color for all posts and not just Staff. Any ideas? I'm not sure if this is entirely possible.
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    The selector(s) will be incorrect.
     
  5. xomp

    xomp Member

    So there is no possibility to have those selectors changed for staff posts only? Or have I identified the wrong selectors to pull this off? My knowledge of CSS is rather low.

    EDIT: I was able to somewhat get things working with this.

    Code:
    .staff .messageText
    {
    background-color: #FFFFE9;
    }
    
    .staff .messageList
    {
    background-color: #FFFFE9;
    }
    
    .staff .editDate
    {
    background-color: #FFFFE9;
    }
    
    .staff .messageInfo
    {
    background-color: #FFFFE9;
    }
    
    However, I can't seem to lock the .messageList to .staff
     
    Last edited: Jul 4, 2014
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Yes, you can use the .staff class.
    You will just need to create the correct selectors.

    For example:
    Code:
    .message.staff,
    .message.staff .messageContent
    {
    background-color: orange;
    }
    This may help: http://xenforo.com/help/user-group-styling/
     
  7. xomp

    xomp Member

    Thank you, I tried following that but it seems to stop short of what I need done :)

    Since I'm terrible at explaining what I'm looking to achieve, I thought it'd be best to break out an image. I'm trying to go from this:

    [​IMG]

    To this:

    [​IMG]
     

Share This Page