• 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

#1
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
 
#4
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
 

katsulynx

Well-known member
#7
Code:
.memberCard .userInfo .userLinks, .memberCard .userInfo .userStats, .memberCard .userInfo .lastActivity {
color: white !important
}
 

katsulynx

Well-known member
#9
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:

Amaury

Well-known member
#10
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!
}
Yes, it does.

Use this, @DannyEFC:

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

EQnoble

Well-known member
#11
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.

View attachment 64673
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;
}
 

katsulynx

Well-known member
#12
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.
 

EQnoble

Well-known member
#13
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.
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
 

EQnoble

Well-known member
#15
Of course it is better to, but you still don't necessarily have to ;)
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?
 
#17
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
 

EQnoble

Well-known member
#18
Blown away by the level of support on here. Thanks again.

Both the above 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?





View attachment 64676
Sorry didn't realize you wanted that part :)

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

katsulynx

Well-known member
#20
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.