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

XF 1.2 Membercard Styling

Discussion in 'Styling and Customization Questions' started by RoyalRumble, Jan 11, 2014.

  1. RoyalRumble

    RoyalRumble Active Member

    Hello There,

    I'm new to XenForo (Purchased it an hour ago...)

    I've spent the past hour or so trying to change the colour of the text on the Membercards (as indicated)

    I need @mutedTextColor to remain Black so I can't edit that. I need to edit this text exclusively.

    If anyone could advise or kindly direct me to where I can find an answer I would be most appreciative.

    upload_2014-1-11_17-17-31.png
     
  2. katsulynx

    katsulynx Well-Known Member

    Code:
    .memberCard .userInfo .userLinks, .memberCard .userInfo .userStats, .memberCard .userInfo .lastActivity {
    color: YOURCOLOR
    }
     
    RoyalRumble likes this.
  3. Amaury

    Amaury Well-Known Member

    Make sure you add an !important declaration to that.
     
    RoyalRumble likes this.
  4. RoyalRumble

    RoyalRumble Active Member

    Wow. How about that for support? Thanks.

    Where is the best place to put that? Extra.Css? member_card.css or within Appearance -> Styles -> Default Style -> Style Property Groups -> Member Card -> additional CSS box
     
  5. Amaury

    Amaury Well-Known Member

    EXTRA.css
     
    RoyalRumble likes this.
  6. RoyalRumble

    RoyalRumble Active Member

    I've put that as so;

    upload_2014-1-11_17-47-17.png

    But if you click on any member card on my test forum here -> http://grandoldteam.com/xf/ you'll see the text remains Black
     
  7. katsulynx

    katsulynx Well-Known Member

    Code:
    .memberCard .userInfo .userLinks, .memberCard .userInfo .userStats, .memberCard .userInfo .lastActivity {
    color: white !important
    }
     
  8. Amaury

    Amaury Well-Known Member

    iGloo' likes this.
  9. katsulynx

    katsulynx Well-Known Member

    Doesn't matter if it is the one and only statement

    Try the following instead, if it still doesn't work:
    Code:
    .memberCard dt, .memberCard .muted, .memberCard h4 {
    color: white !important!
    }
     
    Last edited: Jan 11, 2014
  10. Amaury

    Amaury Well-Known Member

    Yes, it does.

    Use this, @DannyEFC:

    Code:
    .memberCard .userInfo .userLinks, .memberCard .userInfo .userStats, .memberCard .userInfo .lastActivity {
    color: white !important;
    }
     
  11. EQnoble

    EQnoble Well-Known Member

    Try this...


    If you are trying to target only where the arrows in your image point you can paste this in extra.css..

    Code:
    .pairsInline dt:nth-child(3) {
    color: #ffffff !important;
    }
    .pairsInline.lastActivity dt:first-child {
    color: #ffffff;
    }

    if you want to select on all of dt in the membercard use this instead...

    Code:
    .pairsInline dt {
    color: #ffffff !important;
    }
    .pairsInline.lastActivity dt {
    color: #ffffff;
    }
     
  12. katsulynx

    katsulynx Well-Known Member

    Try it, it doesn't...
    When you have
    Code:
    .xyz {
    color: #fff
    }
    you don't need to put a semi-colon unless you set a second statement after, just like
    Code:
    .xyz {
    color: #fff;
    border: 1px solid black
    }
    and even there you don't necessarily have to set it for the last one.
     
  13. EQnoble

    EQnoble Well-Known Member

    it's just better to close them, this way if you have to edit down the road you don't end up having to debug to find that you've left a line without a ; after adding to the css...it's just not good practice to leave anything open like that if you don't have to
     
    Amaury and katsulynx like this.
  14. katsulynx

    katsulynx Well-Known Member

    Of course it is better to, but you still don't necessarily have to ;)
     
  15. EQnoble

    EQnoble Well-Known Member

    True true...but if someone is asking questions in the effort to get something done...I try and just avoid the nuances and get them going and then later if they are interested in why I can explain it without confusing them on the part they actually asked about and need help with, yah feel me?
     
  16. katsulynx

    katsulynx Well-Known Member

    Yeah, but he got told that the missing semi-colon is his error, but as it wasn't, I just corrected the statement.
     
  17. RoyalRumble

    RoyalRumble Active Member

    Blown away by the level of support on here. Thanks again.

    Both the below;

    Code:
    .memberCard .userInfo .userLinks, .memberCard .userInfo .userStats, .memberCard .userInfo .lastActivity {
    color: white !important;
    }
    Code:
    .memberCard dt, .memberCard .muted, .memberCard h4 {
    color: white !important!
    }
    ...Didn't do the trick.

    This from @EQnoble

    Code:
    .pairsInline dt {
    color: #ffffff !important;
    }
    .pairsInline.lastActivity dt {
    color: #ffffff;
    }
    Has produced this - so very nearly there, just 'A moment ago...' left.

    Any ideas?





    upload_2014-1-11_18-21-20.png
     
  18. EQnoble

    EQnoble Well-Known Member

    Sorry didn't realize you wanted that part :)

    Code:
    .DateTime.muted {
        color: #ffffff;
    }
     
  19. RoyalRumble

    RoyalRumble Active Member

    Thanks again!

    That's certainly done the trick, but it has also altered the text elsewhere;

    upload_2014-1-11_18-25-39.png

    I'm needing all amends to be exclusive to the membercard bit. The forum is here: http://grandoldteam.com/xf/index.php

    The current EXTRA.CSS looks like;

    upload_2014-1-11_18-26-38.png
     
  20. katsulynx

    katsulynx Well-Known Member

    Or the following, there are multiple solutions

    Code:
    .pairsInline dt, .pairsInline.lastActivity dt, .memberCard .muted
    {
    color: #ffffff !important;
    }
    
    
    Remove everything from the extra.css and use the snippet above, it should work fine.
     

Share This Page