Move Navigation Bar to side table or side of board

[Tumbleweed]

Jul 30, 2015 12:03:07 GMT -8 Yorko said:

Thanks Tumbleweed

I appreciate the help 

Can you give me a screen shot of the theme you'll be using this on as all I can see is the theme where you already have the menu on the side and I want something besides guessing to work with and I want to have some idea how much you might have modified the wrapper template.  Also what do you want to happen to the 'welcome guest and login/logout/register" on the right side?

[Yorko]

Hi Tumbleweed

Is this what you want to see



There have been minimal changes as its a new theme thats not been adapted as yet

I would like the log in/register at the side also if thats possible, otherwise they can stay where they are, the welcome can go

Many thanks

[Tumbleweed]

Jul 31, 2015 23:38:47 GMT -8 Yorko said:

Hi Tumbleweed

Is this what you want to see



There have been minimal changes as its a new theme thats not been adapted as yet

I would like the log in/register at the side also if thats possible, otherwise they can stay where they are, the welcome can go

Many thanks

Thanks Bobbins, That helped. It appears you have border around your forum. Was that added to your style sheet via css to your wrapper using the ID #wrapper? Do you want the side menu inside the border or outside it? Sorry for the questions but I don't want to give you something that messes thing up.

Also are you wanting it with a background like I have on the right  or each menu item with it's own background as on the left?

Do you want it in a fixed position so it is always on the page no matter where you scroll or do you want it to move with your forum as you scroll?

And sorry, I've just been very busy so not much time to spend on this.

 

[Yorko]

Hi Tumbleweed

The border was added to the stylesheet and if possible I would like the menu inside the border and can adjust the size of the border as necessary (or remove it if needs be)

It would be nice to have the style on the left, fixed would be preferable for me so that its always available in view

No need to apologise, Im grateful for the help 

[Tumbleweed]

Aug 1, 2015 3:49:08 GMT -8 Yorko said:

Hi Tumbleweed

The border was added to the stylesheet and if possible I would like the menu inside the border and can adjust the size of the border as necessary (or remove it if needs be)

It would be nice to have the style on the left, fixed would be preferable for me so that its always available in view

No need to apologise, Im grateful for the help 

I didn't expect you to be awake/around still. Was the border around the forum added to the wrapper id do you know? It's important I know that.

I'm going to be getting ready for work pretty soon. Have to be in the office most of this morning (and on Saturday, yuk) but when I come home I should have time to get on this seriously.

[Yorko]

Hi Tumbleweed

Im in the UK so its lunch time here now

I added the code below to the stylesheet and nothing else

#wrapper {
width: @wrapper_width;
overflow-x: hidden;
margin: 20px auto 20px auto;
padding: 15px 20px 5px 20px;
background: rgba(255,255,255,1);
border: 5px solid #3C9CB4;
border-radius: 2px;
}

Bad luck having to work on a Saturday, Im strictly a Monday to Friday person

Thanks for your help, whenever you can fit this in will be fine

[Tumbleweed]

Aug 1, 2015 4:08:08 GMT -8 Yorko said:

Hi Tumbleweed

Im in the UK so its lunch time here now

I added the code below to the stylesheet and nothing else

#wrapper {
width: @wrapper_width;
overflow-x: hidden;
margin: 20px auto 20px auto;
padding: 15px 20px 5px 20px;
background: rgba(255,255,255,1);
border: 5px solid #3C9CB4;
border-radius: 2px;
}

Bad luck having to work on a Saturday, Im strictly a Monday to Friday person

Thanks for your help, whenever you can fit this in will be fine

Almost have it done for you but one last thing. I assume you will have a banner. Will the banner span across the side bar with the menu and the forum or will it be just above the forum with the boards,etc.

Also need to know how you want the nav tree too, span across both side menu and forum or just above forum.

[Yorko]

hi Tumbleweed

I would like both the banner and nav tree across both the forum and the side bar

Many thanks

[Tumbleweed]

Here ya go Yorko,

This is the complete Forum Wrapper template:

<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
    <body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>  
           
      $[participated_threads_link]

{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}    
           
         
          <table>
               <tbody>
               <tr>
                   <td id="left_side_panel" valign="top">
<center>
                       
<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">
<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}
{if $[current_user.is_guest]}
<li><a href="https://login.proboards.com/login/6200360" type="button" class="btn btn-primary">Login</a></li>
<li><a href="https://login.proboards.com/register/6200360">Register</a></li>
{/if}
          {if $[current_user.is_member]}
<li>  <a href="https://login.proboards.com/logout/6200360" type="button" class="btn btn-primary">Logout</a></li>
              {/if}  
</ul>
</div>
</center>
                       
                   </td>
                   <td id="right_side_panel">
<header>
</header>
$[header]

<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>

$[footer]
                  </td>
               </tr>
               </tbody>
           </table>
</div>
         
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
         
</html>
             

And the css to add to the bottom of your style sheet.

#navigation-menu{position:relative;width:130px;
-moz-box-sizing: border-box;
box-sizing: border-box;background-color:transparent;
background-image:none;
}
#navigation-menu > ul {
position:fixed;
top:200px; margin-left:22px;
list-style-type: none;
width:100px!important;
margin: 0;
padding: 0;
}
#navigation-menu > ul li {
background:   @title_bar_background_color @all_gradients left center repeat-x;
height:25px;
width:100px!important;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 4px;
text-decoration: none;
margin-bottom:2px;
padding: 0;
text-align:center;
 
}
#navigation-menu > ul li a, #navigation-menu > ul li a:visited{
padding-left:3px;
-webkit-transition: 1.5s all ease;
-moz-transition: 1.5s all ease;
-o-transition: 1.5s all ease;
transition: 1.5s all ease;
}
#navigation-menu > ul li a.state-active{
background-color:transparent;background-image:none;
}
#navigation-menu > ul li a:hover {
color:yellow!important;
}
/*tips*/
#navigation-menu div.tip-holder {
position: absolute;
top: -4px;
right: -15px;
display: inline-block;
}
/*tips*/
#navigation-menu div.tip-holder div.tip-number {
padding: 3px 7px 2px 0px;
background-color: tan;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font: 0.8em "Trebuchet MS", Verdana, Arial;
line-height: 0.8em;
text-shadow: none;
box-shadow: 2px 2px 2px #333333;
-moz-box-shadow: 2px 2px 2px #333333;
-webkit-box-shadow: 2px 2px 2px #333333;
height: 0.8em;
color: #000000;
}
/*tips*/
#navigation-menu div.tip-holder span.tip {
border-top: 5px solid tan;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
left: 6px;
}
#right_side_forum{
width:86%; 
}
#left_side_panel{
width:14%; 
}

The last two id' in the css will adjust the width of your side bar area and the forum. If you change those make sure they add up to 100%.

The ones prior to that are for your tips notifications. I had to adjust the positioning and change the color but you can just remove the color.

Other than that, the menu buttons should pick up your theme colors.

Also you will need to replace these links in the above wrapper template I gave you with your own as they need the blue number that is unique to your site.

I'd get that number before you add any of this. You can just right click on the login button on your forum and view element and you should see the number.

{if $[current_user.is_guest]}
<li><a href="login.proboards.com/login/6200360">Login</a></li>
<li><a href="login.proboards.com/register/6200360">Register</a></li>
{/if}
{if $[current_user.is_member]}
<li> <a href="login.proboards.com/register/6200360">Logout</a></li>
{/if}

Fingers crossed this works for you. Let me know if you need to adjust something and can't figure it out.

[Yorko]

Many thanks Tumbleweed

I will try this later today and report back

Much appreciated

[Yorko]

Hi Tumbleweed

I am trying to get the number in blue but when I right click the link it doesn't give me the option to "view element"

This is what I see




Thank you

[Tumbleweed]

Aug 2, 2015 0:41:35 GMT -8 Yorko said:

Hi Tumbleweed

I am trying to get the number in blue but when I right click the link it doesn't give me the option to "view element"

This is what I see




Thank you

Looks like yours is: 6046046

That is if you are putting this on the site you linked to on page one of this thread.

You can also just open your site in another browser (if you have one) and just click on register and you should see the number in the address bar.

[Yorko]

hi Tumbleweed

Everything has worked perfectly apart from the look of the buttons, they seem to be boxes within boxes if that makes sense (as below)




Many thanks

[Tumbleweed]

Aug 2, 2015 1:56:52 GMT -8 Yorko said:

hi Tumbleweed

Everything has worked perfectly apart from the look of the buttons, they seem to be boxes within boxes if that makes sense (as below)




Many thanks

Aww, didn't have that on any of my links but the home one. Try adding the blue to that first bit of css:

#navigation-menu > ul li a, #navigation-menu > ul li a:visited{
background-color:transparent; background-image:none;
padding-left:3px;
-webkit-transition: 1.5s all ease;
-moz-transition: 1.5s all ease;
-o-transition: 1.5s all ease;
transition: 1.5s all ease;
}

[Yorko]

Tumbleweed we have a winner

Thats perfect

This is on my test site at the moment but i am assuming that when I export it to the main site all I will have to change are the numbers

I can't thank you enough, great job