XF 1.2 Membercard Styling

[RoyalRumble]

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.

 

[EQnoble]

Thanks again!

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

View attachment 64677

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;

View attachment 64678

Then what you do in that case is get more specific...you would tell the rule to only apply to those classes if they are children of X classes...

.pairsInline.lastActivity .DateTime.muted {
    color: #FFFFFF;
}

 

[RoyalRumble]

Or the following, there are multiple solutions

.pairsInline dt, .pairsInline.lastActivity dt, .memberCard .muted
{
color: #ffffff !important;
}

That did the trick too

But it also edits the 'Discussions' and 'Messages' text here;

 

[RoyalRumble]

Then what you do in that case is get more specific...you would tell the rule to only apply to those classes if they are children of X classes...

.pairsInline.lastActivity .DateTime.muted {
    color: #FFFFFF;
}

Thank you

So should the code in EXTRA.CSS look like;

.pairsInline.lastActivity .DateTime.muted {
    color: #FFFFFF;
}
.pairsInline dt {
color: #ffffff !important;
}
.pairsInline.lastActivity dt {
color: #ffffff;
}
.DateTime.muted {
    color: #ffffff;
}

If so, the problem remains

 

[Lukas W.]

Try the following instead, if it still doesn't work:

.memberCard dt, .memberCard .muted, .memberCard h4 {
color: white !important!
}

 

[Paul B]

Always try and use as high specificity as possible, to avoid affecting other elements using common classes.

For example: http://xenforo.com/community/resources/member-card-stats-and-last-activity-in-two-columns.1655/

Using .xenOverlay.memberCard means just the member card will be affected.

 

[RoyalRumble]

Thanks Kat,

The forum 'Discussions' and 'Messages' text revert back to their normal colour, but the membercard goes back to the initial problem.

I'm being a right pain here aren't I?

 

[Lukas W.]

I've tried the code above in your forum and it worked for me, sure you got it right?

 

[EQnoble]

Thanks Kat,

The forum 'Discussions' and 'Messages' text revert back to their normal colour, but the membercard goes back to the initial problem.

I'm being a right pain here aren't I?

Not at all...
Try removing all the css you just added...

and replace it with this one block below

.userStats.pairsInline dt, .pairsInline.lastActivity dt, .pairsInline.lastActivity .DateTime.muted {
color: #ffffff;
}

 

[RoyalRumble]

I've tried the code above in your forum and it worked for me, sure you got it right?

Thanks - some effort to help

I think so :/




The forum text is ok;



... But the member card isn't changed;

 

[Lukas W.]

regarding Brogan's advice, may change it to

 .xenOverlay.memberCard.memberCard dt,  .xenOverlay.memberCard.memberCard .muted,  .xenOverlay.memberCard.memberCard h4 {
color: white !important;
}

edit: also have just seen there was a typo in it, fixed that, sorry

 

[RoyalRumble]

Not at all...
Try removing all the css you just added...

and replace it with this one block below

.userStats.pairsInline dt, .pairsInline.lastActivity dt, .pairsInline.lastActivity .DateTime.muted {
color: #ffffff;
}

Thank you, this did the trick

If anyone stumbles across this thread looking for an answer, what my eventual code was in Extra.CSS was;

.userStats.pairsInline dt, .pairsInline.lastActivity dt, .pairsInline.lastActivity .DateTime.muted {
color: #ffffff;
}

/* Member card stats and last activity in two columns */
.xenOverlay.memberCard .userInfo .userStats {
float: left;
width: 49% !important;
border-right: 1px solid #556655 !important;
}

.xenOverlay.memberCard .userInfo .userStats dd {
float: right !important;
}

.xenOverlay.memberCard .userInfo .userStats dt  {
float: left;
clear: both;
}

.xenOverlay.memberCard .lastActivity {
float: right;
width: 49% !important;
margin-top: 0px !important;
padding-top: 0px !important;
border-top: 0 !important;
}

.xenOverlay.memberCard .lastActivity.pairsInline dt {
float: left;
clear: both;
}

.xenOverlay.memberCard .lastActivity.pairsInline dd {
float: left;
clear: both;
}

Producing a membercard of;



Big thanks to @EQnoble @katsulynx @Brogan and @Amaury - really appreciate it. Amazing level of rapid support. I was with vBulletin for 8 years... the switch to XenForo already looking a good'un.

 

[RoyalRumble]

I've since noticed the above change has caused text to be unreadable on my members page - does anyone know how to exclude the text here?

 

[Paul B]

Are you sure it's not coming from somewhere else?

Anything prefixed with .xenOverlay.memberCard will only affect the member card and won't have any effect on that page.

 

[Jeremy]

You need to add .xenOverlay.memberCard to the first CSS definition in the above code.

 

[RoyalRumble]

Are you sure it's not coming from somewhere else?

Anything prefixed with .xenOverlay.memberCard will only affect the member card and won't have any effect on that page.

You need to add .xenOverlay.memberCard to the first CSS definition in the above code.

Only just noticed these replies - that did the trick. Thank you!