How do I change text color on the overlay / member card?

danielwerner

Active member
Hi!

Quick question: How do I change text color on the overlay / member card? WITHOUT changing colors in the color palette. I have the colors as I like them now, but the only problem is that in the overlay the text is just a bit too dark.

Can it be done in the style properties?

Thanks!
 
I used EXTRA.css for this.

Code:
/* Change colour of username on member card */
.xenOverlay.memberCard .userInfo h3 {
color: @secondaryLight !important;
}
 
.xenOverlay.memberCard .userInfo h3 a {
color: @secondaryLight !important;
}
 
/* Change colour of title on member card */
.xenOverlay.memberCard .userInfo h4 {
color: @primaryLight !important;
}
 
/* Change colour of upper horizontal divider on member card */
.xenOverlay.memberCard .userLinks {
border-bottom: 1px solid @dimmedTextColor !important;
}
 
/* Change colour of links title on member card */
.xenOverlay.memberCard .userLinks a {
color: @primaryLight !important;
}
 
/* Change colour of lower horizontal divider on member card */
.xenOverlay.memberCard .lastActivity {
border-top: 1px solid @dimmedTextColor !important;
}



Do anyone know if there is an option in the Style Properties in the current version of XF? That would be nice.
Some text is too difficult to read, so the easiest way would be to change the background box.
color-change.webp
 
Thanks Jake:) That is great - I will do this if I can't change the text without manuel code.

And anyone who knows if I can change the Member Since: - Messages: and these lines in the style properties?
 
Great - thanks for your help.

I was just hoping I could change everything (textcolors and backgrounds) from the Styles Properties. Maybe this option will come later on.
 
See my previous two posts. Use that code in the EXTRA.css template to change that dark text color from your picture:

Hey Jake, maybe you can help me - again:)

I added this til the extra.css but the text does not change - only some of it - any suggestions?



/* Change colour of username on member card */
.xenOverlay.memberCard .userInfo h3 {
color: @secondaryLight !important;
}

.xenOverlay.memberCard .userInfo h3 a {
color: @primaryLighter !important;
}

/* Change colour of title on member card */
.xenOverlay.memberCard .userInfo h4 {
color: @primaryLighter !important;
}

/* Change colour of upper horizontal divider on member card */
.xenOverlay.memberCard .userLinks {
border-bottom: 1px solid @dimmedTextColor !important;
}

/* Change colour of links title on member card */
.xenOverlay.memberCard .userLinks a {
color: @primaryLighter !important;
}

/* Change colour of lower horizontal divider on member card */
.xenOverlay.memberCard .lastActivity {
border-top: 1px solid @dimmedTextColor !important;
}

.xenOverlay.memberCard .lastActivity dt
{
color: @primaryLighter !important;
}

.xenOverlay.memberCard .userStats th
{
color: @primaryLighter !important;
}

.xenOverlay.memberCard .muted
{
color: @primaryLighter !important;
}

extra_css.webp
 
Hey Jake, maybe you can help me - again:)

I added this til the extra.css but the text does not change - only some of it - any suggestions?



/* Change colour of username on member card */
.xenOverlay.memberCard .userInfo h3 {
color: @secondaryLight !important;
}

.xenOverlay.memberCard .userInfo h3 a {
color: @primaryLighter !important;
}

/* Change colour of title on member card */
.xenOverlay.memberCard .userInfo h4 {
color: @primaryLighter !important;
}

/* Change colour of upper horizontal divider on member card */
.xenOverlay.memberCard .userLinks {
border-bottom: 1px solid @dimmedTextColor !important;
}

/* Change colour of links title on member card */
.xenOverlay.memberCard .userLinks a {
color: @primaryLighter !important;
}

/* Change colour of lower horizontal divider on member card */
.xenOverlay.memberCard .lastActivity {
border-top: 1px solid @dimmedTextColor !important;
}

.xenOverlay.memberCard .lastActivity dt
{
color: @primaryLighter !important;
}

.xenOverlay.memberCard .userStats th
{
color: @primaryLighter !important;
}

.xenOverlay.memberCard .muted
{
color: @primaryLighter !important;
}

View attachment 24066

you can change the member since: etc text by adding the following changing the colour to your preference

Code:
.xenOverlay.memberCard .userStats dt {
    color: #ff0000 !important;
}
 
you can change the member since: etc text by adding the following changing the colour to your preference

Code:
.xenOverlay.memberCard .userStats dt {
    color: #ff0000 !important;
}

You gays are so cool - It worked perfect:)

Thanks a lot for taking your time to help.

All the best
Morten
 
Code:
/* Change colour of username on member card */
.xenOverlay.memberCard .userInfo h3 {
color: @secondaryLight !important;
}

This is really good thank, however I am looking to style colours based on user group, is this possible? For example, my standard users have the standard text colour that came with XenForo so I do not need to change them, however my administrators are black. Would it be possible to add black on the 'Administrative' user group for their member cards? Thanks.
 
Top Bottom