XF 2.2 How to change the background color of @-quoted usernames in a post?

[ShikiSuen]

I tried the following LESS but it doesn't work:

/* ===== Quoted Usernames =====*/
[data-xf-init^="member-tooltip"]{
    .username {background-color: @xf-textColor;}
}

 

[creativeforge]

I tried the following LESS but it doesn't work:

/* ===== Quoted Usernames =====*/
[data-xf-init^="member-tooltip"]{
    .username {background-color: @xf-textColor;}
}}

Can you try this, then? ▼ In extra.less template. Using your preferred color, of course, adapting for your theme's color.

/*Username quote background*/

#js-XFUniqueId115.username {
    background-color: #555555 !important;
}

It shows like this for me. On Dark theme.
▼



On Light theme.
▼


IMPORTANT - I got the usernames IDs by using the Inspect (or F12) function. In my case, they showed as 115 (dark theme) and 118 (light theme).


Good luck!

 

[ShikiSuen]

Can you try this, then? ▼ In extra.less template. Using your preferred color, of course.

/*Username quote background*/

#js-XFUniqueId115.username {
    background-color: #555555 !important;
}

It shows like this for me.

View attachment 269403


Good luck!

Thanks for your trick. Unfortunately, the UniqueID varies among contexts.

 

[Paul B]

[data-template*="thread_view"]
{
    .bbWrapper .username
    {
        background-color: orange;
    }
}

 

[creativeforge]

Thanks for your trick. Unfortunately, the UniqueID varies among contexts.
View attachment 269404

Brogan has a better one!

EDIT: And if you have more than one color theme (like me), you simply change the background color in the specific theme's template.

I also added a padding: 2px 3px; in order to get a bit of color around it too, so that the colored box wouldn't cut so sharply so close to the username. I also added a border-radius 25px.

So here is my full code for this.

/*Username quoted background*/

[data-template*="thread_view"]
{
    .bbWrapper .username
    {
        background-color: #4f5766;
        padding: 2px 4px;
        border-radius: 25px
    }
}

XF 2.2 - How to change the background color of @-quoted usernames in a post?

I tried the following LESS but it doesn't work: /* ===== Quoted Usernames =====*/ [data-xf-init^="member-tooltip"]{ .username {background-color: @xf-textColor;} }

xenforo.com

It works perfectly! Thank you, Brogan!

And thank you @ShikiSuen for the great idea!

 

[Charlie G]

I also added a padding: 2px 3px; in order to get a bit of color around it too, so that the colored box wouldn't cut so sharply so close to the username. I also added a border-radius 25px.

So here is my full code for this.

/*Username quoted background*/

[data-template*="thread_view"]
{
    .bbWrapper .username
    {
        background-color: #4f5766;
        padding: 2px 4px;
        border-radius: 25px
    }
}

Apologies for the dumb question here, where does this code need to be inserted?
I have tried it in the extra.less but it has no effect.

 

[TPerry]

Apologies for the dumb question here, where does this code need to be inserted?

Generally in extra.less. If they aren't taking effect, you may want to use an !important in the LESS code.
Also, if you have multiple styles, be sure you are working in the one you want it to take effect in.

 

[Charlie G]

Generally in extra.less. If they aren't taking effect, you may want to use an !important in the LESS code.
Also, if you have multiple styles, be sure you are working in the one you want it to take effect in.

Just tried this and it still doesn't work,

/*Username quoted background*/

[data-template*="thread_view"]
{
    .bbWrapper .username
    {
        background-color: #4f5766;
        padding: 2px 4px;
        border-radius: 25px !important;
    }
}

 

[TPerry]

Just tried this and it still doesn't work,

Link to site (specifically a post utilizing that function that guests can view). You can get more help that way, especially if you are running a 3rd party style.
Realize also that post you quoted data from is almost a year old... so some data may have changed... are you specifically wanting it ONLY on the thread view?

 

[Charlie G]

Realize also that post you quoted data from is almost a year old... so some data may have changed... are you specifically wanting it ONLY on the thread view?

My apologies, all works with this now, it was me miss reading the title of this thread. I realise this is for something totally different.

What I am trying to achieve is to change the background colour of a quoted message and also the font colour of the user name in the quote.

 

[creativeforge]

Hope I'm not too late responding.

Not sure if you found a solution for the background color for the quotes, but look in your admin panel, under Appearance, in BBCode Elements, find BB code blocks. Under Background, is where you set the color.
▼


I picked Alternate content background color. It's part of Xenforo color convention, not an hexadecimal in this case.
▼


I don't know how you could change the font color specifically for the BBCode quote, though.

Good luck!

 

[ShikiSuen]

Hope I'm not too late responding.

Not sure if you found a solution for the background color for the quotes, but look in your admin panel, under Appearance, in BBCode Elements, find BB code blocks. Under Background, is where you set the color.
▼
View attachment 287282

I picked Alternate content background color. It's part of Xenforo color convention, not an hexadecimal in this case.
▼
View attachment 287283

I don't know how you could change the font color specifically for the BBCode quote, though.

Good luck!

You just put Brogan's code into the end of your Extra.less template, and the thing gets done.