XF 1.2 Change Username Display Length In Navigation

[TheBigK]

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 -

.navTab.account .navLink .accountUsername {
max-width: 120px;
}

I'm wondering why the changes don't reflect on the site?

 

[JulianD]

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

 

[TheBigK]

Didn't work. Please check URL: http://www.crazyengineers.com/ . Maybe you could signup using Facebook or create an account with a full name.

I will delete it afterwards, if you want.

 

[JulianD]

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]

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.

 

[JulianD]

Use this as the class selector:

div.navTabs .navTab.account .navLink .accountUsername {
...
}

 

[TheBigK]

Use this as the class selector:

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]

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.