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

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

Discussion in 'Styling and Customization Questions' started by Heavy, Mar 13, 2015.

  1. Heavy

    Heavy Active Member

    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: [​IMG]
    How i want it to be: [​IMG]

    Thanks in advance!
    Heavy
     
  2. Dylan V

    Dylan V Well-Known Member

    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:
    Code:
    .accountUsername:before
    {
        content: "Welcome, ";
        margin-right: 5px;
    }
    Screenshot_1.png
     
  3. Heavy

    Heavy Active Member

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

    Dylan V Well-Known Member

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

    Dylan V Well-Known Member

    I've an alternative solution. Go to the templates of your style and search for "navigation_visitor_tab". Then, search this line of code:
    Code:
    <a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><strong class="accountUsername">{$visitor.username}</strong>
    and replace it with:
    Code:
    <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.
     
  6. Heavy

    Heavy Active Member

    Dylan V likes this.
  7. Dylan V

    Dylan V Well-Known Member

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

    1e28ae0f2d4cf7c09345495f07f3f5a6.png

    You must go in the "navigation.css" template and remove "max-width: 100px" in:
    Code:
        .navTabs .navTab.account .navLink .accountUsername
        {
            display: block;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
     
    teletubbi and Heavy like this.
  8. Amaury

    Amaury Well-Known Member

    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.
     
  9. Dylan V

    Dylan V Well-Known Member

    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.
     
  10. Amaury

    Amaury Well-Known Member

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

    Dylan V Well-Known Member

    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.
     
  12. Brad P

    Brad P Active Member

    Nice work Dylan.
     
    Heavy and Dylan V like this.

Share This Page