Nav Bar at top of forum

[Dzharet]

As i have no idea how.. Also how can you build a drop down navigation for a profile selection like on the SPECTRUM theme?

[Tumbleweed]

May 14, 2015 10:41:03 GMT -8 Dzharet said:

As i have no idea how.. Also how can you build a drop down navigation for a profile selection like on the SPECTRUM theme?

Just the nav bar (menu bar with home, help, search) so it would be above your banner? If yes, find go to Admin > Themes> Layout Templates>Forum Wrapper and find this part.....

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>

...and move it down so it is above this:

</header>

I need to go look at the SPECTRUM theme because I have no idea what the profile looks like. I'll post back if I have any suggestions. If I don't have any suggestions bump your topic to let people know you still have an issue.

[Dzharet]

cheers mate

[Stinky666]

May 15, 2015 23:05:44 GMT -8 Tumbleweed said:

May 14, 2015 10:41:03 GMT -8 Dzharet said:

As i have no idea how.. Also how can you build a drop down navigation for a profile selection like on the SPECTRUM theme?

Just the nav bar (menu bar with home, help, search) so it would be above your banner? If yes, find go to Admin > Themes> Layout Templates>Forum Wrapper and find this part.....

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>

...and move it down so it is above this:

</header>

I need to go look at the SPECTRUM theme because I have no idea what the profile looks like. I'll post back if I have any suggestions. If I don't have any suggestions bump your topic to let people know you still have an issue.

Hopefully the below helps you help Dzharet. On Spectrum I used:

<div id="user_options">
                       {if !$[current_user.is_member]}
                           <ul id="uo_dd">
                               <li>$[current_user.avatar_small] </li>
                               <li>
                                   <a href="$[login_link.href]"><strong>Sign In</strong></a> or <a href="$[register_link.href]"><font style="color: #2f2f2f;"><strong>Join Us</strong></font></a>.
                               </li>
                           </ul>
                       <ul id="options_dd" style="display: none">
                           <li>Welcome guest, to
                               <br /><strong>$[forum.name]</strong>.
                               <br />We hope you have fun here.</li>
                           {else}
                           <ul id="uo_dd">
                               <li>$[current_user.avatar_small] </li>
                               <li id="current_user_menu"><strong><span style="color: $[current_user.color];">$[current_user.name]</span></strong>
                                   <span id="noti">(<script>
                                       var msg = $[current_user.messages.new];
                                       var noti = $[current_user.new_notifications];
                                       var bookm = $[current_user.new_bookmarks];
                                       var i =  msg + noti + bookm;
                                       document.write(i);
                                   </script>)</span>
                                   </li>
                           </ul>
                           <ul id="options_dd">
                               <li><a href="/user/$[current_user.id]/notifications"><strong>$[current_user.new_notifications]</strong></a> New Notification{if $[current_user.new_notifications] != 1}s{/if}</li>
                               <li><a href="/conversations/inbox"><strong>$[current_user.messages.new]</strong></a> Received Message{if $[current_user.messages.new] != 1}s{/if}</li>
                               <li><a href="/bookmarks"><strong>$[current_user.new_bookmarks]</strong></a> Updated Bookmark{if $[current_user.new_bookmarks] != 1}s{/if}</li>
                               <li><a href="/user/$[current_user.id]/avatar">Edit Profile</a></li>
                               <li><a href="$[logout_link.href]"><font style="color: #2f2f2f; text-decoration: underline;">Sign Out</font></a></li>
                               {if $[current_user.is_staff]}
                                   {if $[current_user.new_reports] > 0}
                                       <li><a href="/admin/security/reported_posts"><font style="color: #dd4346;"><strong>$[current_user.new_reports] Reported Post{if $[current_user.new_reports] != 1}s{/if}</strong></font></li>
                                   {/if}
                               <li><a href="/admin/settings/forum">Forum Settings</a></li>
                               <li><a href="/admin/themes/manager">Theme Manager</a></li>
                               <li><a href="/admin/structure/category_board">Cats. & Boards</a></li>
                               <li><a href="/admin/structure/headers">Headers & Footers</a></li>
                               <li><a href="/admin/plugins/manage">Plugin Manager</a></li>
                               <li><a href="/admin/members">Member Settings</a></li>
                               <li><a href="/admin/security/log">Security Log</a></li>
                               {/if}
                           </ul>
                       {/if}
                   </div>


#user_options {
   float: right;
   height: 49px;
   margin-right: 68px;
   width: 200px;
}
#user_options li {
   float: left;
   line-height: 40px;
}
.avatar-wrapper.avatar_size_small img {
   height: 20px !important;
   margin: 0;
}
.avatar-wrapper div object, .flash-avatar object, #avatar-preview.flash_present.image_present div object, .avatar-wrapper > div > img {
   position: static !important;
}
#current_user_menu {
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 110px;
}
#uo_dd {
   background: url('http://storage.proboards.com/5431856/i/LgDN3y6KJtS1IrxkNIUV.png') repeat scroll 0 0 transparent;
   border-left: 1px solid #E6E6E6;
   border-right: 1px solid #E6E6E6;
   border-top: 2px solid #E6E6E6;
   height: 44px;
   margin-top: 2px;
   width: 200px;
}
#options_dd {
   background-color: #F3F3F3;
   border-bottom: 1px solid #E6E6E6;
   border-bottom-left-radius: 5px !important;
   border-bottom-right-radius: 5px !important;
   border-left: 1px solid #E6E6E6;
   border-right: 1px solid #E6E6E6;
   position: absolute;
   width: 200px;
   z-index: 9999;
}
#options_dd li {
   float: none !important;
   line-height: 20px;
   padding: 10px 0 10px 20px;
   border-bottom: 1px solid #e6e6e6;
   width: 180px;
}
#options_dd li:hover {
       background-color: #e6e6e6;
}
#options_dd li:hover a {
       color: #2f2f2f;
       text-decoration: underline;
       background-color: #e6e6e6;
}
#options_dd li:nth-child(1) {
   margin-top: 5px;
}

#user_options:hover #options_dd {
   display: block;
   
}


And finally...


<script>
$(document).ready(function() {
  $("#options_dd").hide();
});
$("#user_options").hover(
   function() {
       $("#options_dd").slideDown('fast');
   },
   function() {
       $("#options_dd").slideUp('fast');
   }
);
</script>

[Dzharet]

holy jesus that is a lot haha thanks bro

[Stinky666]

May 16, 2015 8:21:26 GMT -8 Dzharet said:

holy jesus that is a lot haha thanks bro

Haha, it's not too much in reality, it's very simple to do...

For the first part of coding that I gave, find this in your Forum Wrapper:

<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>


Replace it with the code I gave you (the first part (3 parts total).


Now scroll to the very bottom and on a new line, add the LAST part, so add this:


<script>
$(document).ready(function() {
  $("#options_dd").hide();
});
$("#user_options").hover(
   function() {
       $("#options_dd").slideDown('fast');
   },
   function() {
       $("#options_dd").slideUp('fast');
   }
);
</script>


Now, go to your Style Sheet and at the very bottom add that second part of coding.
You're going to need to do a fair amount of editing so it suits/matches your theme (colour wise, size etc).

[Dzharet]

thanks bro y'all are legends.