XF 2.0 User name CSS not displaying

[Peter Cox]

Little bit stumped by this... using this user name CSS:

But none of the css is displaying:

Any suggestions appreciated!

 

[TimFL]

Have you checked your display styling priorities? Maybe another group causes a conflict?

 

[Peter Cox]

Thx, only Default style is installed.

 

[Paul B]

The display styling priority determines the user group styling which will be applied when a member of multiple user groups.

Set it to the highest value of all user groups.

 

[Peter Cox]

Nailed it.

My mistake - thought "0" had a higher value than "999". Back to Maths 101...

 

[cwe]

* bump *

I tried the code shown in the OP with a smilie sized .gif that I have. The .gif image displays in front of the username as expected, but it doesn't scale with the size of the text.

When I hover over the username in the who's online, the "profile pop-up" displays the username in a "large" font and the .gif image I selected is almost the right size (just slightly too tall). Inside the who's online block, the text is "small" and the .gif is cut in half (same issue with username/.gif display next to posts).

Is there an easy way to ensure the image scales with the text (or container) size?

 

[nocte]

Is there an easy way to ensure the image scales with the text (or container) size?

I assume you need background-size:

CSS background-size property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[cwe]

Awesome. That did the trick...

background: url('/path/image.gif') no-repeat transparent; 
background-size: contain;
padding-left: 16px; 
color: green;