How do i set a welcome text before username in navbar?

[Heavy]

Hi XenForo!

I have tried to do this for a while but have not succeeded, I want to put the "Welcome" in front of my name in the navigation bar! Exactly like vBulletin.
Mine:

How i want it to be:

Thanks in advance!
Heavy

 

[Dylan V]

Hi,

It's pretty easy to reproduce using the easiest method: use the pseudo-element :before.

Go to the templates of your style and search for "EXTRA.css". Now, add the following inside:

.accountUsername:before
{
    content: "Welcome, ";
    margin-right: 5px;
}

 

[Heavy]

Hi,

It's pretty easy to reproduce using the easiest method: use the pseudo-element :before.

Go to the templates of your style and search for "EXTRA.css". Now, add the following inside:

.accountUsername:before
{
    content: "Welcome, ";
    margin-right: 5px;
}

View attachment 101077

I have been adding the code to my extra.css, not working?

 

[Dylan V]

I have been adding the code to my extra.css, not working?

It works perfectly for me, strange. Can you give me the name of your site?

 

[Dylan V]

I've an alternative solution. Go to the templates of your style and search for "navigation_visitor_tab". Then, search this line of code:

<a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><strong class="accountUsername">{$visitor.username}</strong>

and replace it with:

<a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><strong class="accountUsername">Welcome, {$visitor.username}</strong>

It is strange that it does not work, but it is maybe because you have a custom style.

 

[Heavy]

Solved, thanks @Dylan V

 

[Dylan V]

For people who want to reproduce this and who have this problem:



You must go in the "navigation.css" template and remove "max-width: 100px" in:

    .navTabs .navTab.account .navLink .accountUsername
    {
        display: block;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

 

[Amaury]

I've an alternative solution. Go to the templates of your style and search for "navigation_visitor_tab". Then, search this line of code:

<a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><strong class="accountUsername">{$visitor.username}</strong>

and replace it with:

<a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><strong class="accountUsername">Welcome, {$visitor.username}</strong>

It is strange that it does not work, but it is maybe because you have a custom style.

Optionally, you can make the welcome text be a phrase so it's not hard-coded.

Admin CP > Appearance > Phrases > Create New Phrase

Prefix it with your site name so you know it's custom and then add _welcome.

 

[Dylan V]

Optionally, you can make the welcome text be a phrase so it's not hard-coded.

Admin CP > Appearance > Phrases > Create New Phrase

Prefix it with your site name so you know it's custom and then add _welcome.

No, it's more easy for the user to do how I did, because people might want to put this modification only on their custom style and not on all styles. Your modification applies to all styles.

 

[Amaury]

Your modification applies to all styles.

No, it doesn't, if you only call the custom phrase in the style you want it in.

 

[Dylan V]

No, it doesn't, if you only call the custom phrase in the style you want it in.

I think anyway that it is easier to modify the code in the style for nothing lose by exporting the style, etc. It is better to do like I did, but it is an alternative solution.

It's solved now.

 

[Brad P]

Nice work Dylan.