How To Change Order Of Links In Nav Bar

[Violette]

Is there a way to move the "Welcome, [name]" in the Nav Bar to the far left, to be first before the "Home" link?




It just seems more logical (to me) to have the Welcome first, instead of next to "logout."



Thanks in advance for any help with this,

Violette

[tis ✻ bry]

You'll probably have to do some css styling afterwards to accomplish a polished look, but if you go to admin > themes > layout templates > forum wrapper, and find:

<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>

then, right underneath it should be:

<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span>  $[logout_link]
{/if}
</p>

flip the two around, and it should reverse their order.

To put the logout link back, delete the $[logout_link] in the second code and add the below to the first, before the final </ul>:

<li>$[logout_link]</li>

[Violette]

Hi tis ✻ bry! Thank you for being willing to help me! I've done something wrong, I think, because this is what I got:



This is what I did in the forum wrapper, starting at Line 24 and ending with Line 49:

                   <p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span>  <!-- $[logout_link] -->
{/if}
</p>

<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
                       <li> $[logout_link]</li>
</ul>

<!-- <p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span>  $[logout_link]
{/if}
</p> -->

[tis ✻ bry]

Violette, actually, you did everything completely correct! it's just the css that's preventing the modification now.

go to admin > themes > advanced styles and css > style sheet (tab) and find the following line (it should be around #252 or so):

#welcome { text-align: right; color: @welcome_text_color; font: @welcome_text_font; text-shadow: @welcome_text_shadow; float: right; vertical-align: middle; line-height: 31px !important; }

see float: right; ? change it to float: left; and you should be good to go.

As for the odd logout link, I'm not quite sure why that's happening? I just tried this process myself on my testing site (and a skin that's not visible to guests), and I got the attached result.

Here's what that section of my forum wrapper layout template looks like, just for reference:

<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
                   <p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span>
{/if}
</p>
                   
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
                       <li>$[logout_link]</li>
</ul>
</div>

Attachments:

[Violette]

Yay! That worked! This is how it looks:





But, of course, now I'm wanting the word Logout to be at the extreme right! LOL Never satisfied!


Thank you so much for your expertise and help on this!

Hugs,

Violette

[tis ✻ bry]

You're so welcome! I'm glad to help

so I was playing around with things, and there's no built-in way to put it back on the right, but have no fear! I coded you a simple solution that will conform with the other links on your navigation bar.

First, admin > themes > layout templates > forum wrapper and change this:

<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
<li>$[logout_link]</li>
</ul>
</div>

to this:

<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
                   <div class="nav-logout">$[logout_link]</div>

Now go back to admin > themes > advanced styles and css > style sheet (tab), and scroll all the way down to the bottom of the style sheet. Paste this at the end:

/* LOGOUT LINK ON THE RIGHT */

.nav-logout { float:right; }

   .nav-logout a { color: @nav_bar_button_color;
       font: @nav_bar_button_font;
       text-decoration: @nav_bar_button_decoration;
       text-shadow: @nav_bar_button_shadow;
       line-height: 31px !important; }

[Violette]

That was perfect! This is how the Nav Bar looks now:



I love it! And I thank you most sincerely for your patience and tremendous help!

More hugs,
Violette