1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Change Username Display Length In Navigation

Discussion in 'Styling and Customization Questions' started by TheBigK, Aug 17, 2013.

  1. TheBigK

    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 -

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

    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
  3. TheBigK

    TheBigK Well-Known Member

    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.
  4. JulianD

    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?
  5. TheBigK

    TheBigK Well-Known Member

    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.
  6. JulianD

    JulianD Well-Known Member

    Use this as the class selector:

    div.navTabs .navTab.account .navLink .accountUsername {
    twollert and TheBigK like this.
  7. TheBigK

    TheBigK Well-Known Member

    Alrighty! That worked. Why didn't my approach worked? I simply copied the relevant CSS from Chrome's CSS editor.
  8. JulianD

    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.
    TheBigK likes this.

Share This Page