XF 1.2 Change Username Display Length In Navigation

TheBigK

Well-known member
Several members on my board have a long username (~16 characters) and it 'cuts' in the navbar. I'm trying to change the max length from 100px to 120px by adding following to the extra.css -

HTML:
.navTab.account .navLink .accountUsername {
max-width: 120px;
}
I'm wondering why the changes don't reflect on the site?
 

JulianD

Well-known member
Assuming that the classes are right, I would say that probably you need to prioritize it more in order for it to take effect.


Try with .navTab.account .accountUsername

If it doesn't work, post an url where we can see the problem so we can help you out :D
 

JulianD

Well-known member
I registered a new account with my full name up to the username character limit and I see it like:

Julian David ...

on the navbar.

Is that what you want to modify?
 

TheBigK

Well-known member
I registered a new account with my full name up to the username character limit and I see it like:

Julian David ...

on the navbar.

Is that what you want to modify?
Right. In my case it displays as 'Kaustubh Kat...' instead of 'Kaustubh Katdare'. If the max-width is 120px; It'll display without the '...' at the end.
 

TheBigK

Well-known member
Use this as the class selector:

Code:
div.navTabs .navTab.account .navLink .accountUsername {
...
}
Alrighty! That worked. Why didn't my approach worked? I simply copied the relevant CSS from Chrome's CSS editor.
 

JulianD

Well-known member
You did right, but the declaration you typed into EXTRA.css had a lower priority according to CSS language (techincal document: http://www.w3.org/TR/CSS21/cascade.html#cascade).

There are two ways to solve it:

Place the !important keyword on the selector that is not working for you, which will make your selector override anything that goes in front of it, or type a more specific selector, such the one I gave you. More specific selectors means higher priority.
 
Top