Side Bar Help

[dezhoni]

I was wondering if there was any way for me to get a sidebar on the side of my forum? I want to be able to adjust the colors of the table background and font. I would like it to be tabbed and include various links and site information. I want it to look like this sidebar - HERE. I absolutely LOVE LOVE the side bar in that forum. How it has the affiliates, VIP, site info, links, the c-box... But I can't seem to figure out how to get that. Much appreciation to anyone who can help! 

[♥ ℒʊ√ ♥]

Hi dezhoni   ~

This plugin will give you a side bar like your example.

And there are the Peekaboo styles as well.

[dezhoni]

♥ ℒʊ√ ♥ I have seen those and I've used those in the past. They are great, but they aren't really what I am looking for EXACTLY. I like just how the side bar is in the link that I provided, with the tabs at the top and the links, affiliates, staff members, and etc. I don't know how to code any of that and that is what I want.

[♥ ℒʊ√ ♥]

Ok, that's a better explanation of what you would like.

You want someone to give you code for placing tabs in a sidebar.

Perhaps, Chris or Tumbleweed can help.

[dezhoni]

BUMP! I don't know if anyone can help me or not... But I'd like to know whether or not my request can be filled. I was hoping it could be but I understand if not. :/

[Former Member]

Jan 9, 2016 5:41:36 GMT -8 dezhoni said:

BUMP! I don't know if anyone can help me or not... But I'd like to know whether or not my request can be filled. I was hoping it could be but I understand if not. :/

I clicked on that link.
It appears that forum moves up and down.

dezhoni, are you requesting a forum that scrolls up and down with a fixed wide side table?

[dezhoni]

@womenonly I changed my skin to a premade on the other day because I didn't think anyone would answer my question, so what you saw on my site was not what I needed help with. It is bare and basic now, as I have changed my skin back. But I did post my question here as well- support.proboards.com/thread/570289/get-kismet-tabbed-sidebar

I believe what I am looking for is kismet's tabbed sidebar.

[Tumbleweed]

dezhoni ,

I know you are getting help in another thread but if you are interested, I have a different tabbed one that is fixed on this site: putteraround1.proboards.com/
You can put it in your global header but that will show on all themes and also, if some are viewing with a really small screen the side table overlaps. If you don't want that then putting it in the forum wrapper template would work better and it would take a bit more html to add and you'd have to add it to every theme) The site you linked to does that as well, overlaps if on a smaller screen but they have it set so it goes behind the forum and that isn't ideal.
If you are interested here is the code: 

<style>
/*this sets the width of your forum and how right it is*/
#wrapper{
float:right;
margin-right:50px;
width:1000px;
}
/*this just makes the fixed position work*/
#side_position{
position:absolute;
top:100px;
left:0px;
}
/*sets the table where from the top you want it*/
#fixed_side{
width:300px;
position:fixed;
top:10px;
}
/*centers the tabs*/
.my_info_butns{
width:270px;
margin:auto;
}
/*your tab link style*/
.my_info_butns li {
   background-color: #006cb7;
   padding: 2px;
   width: 57px;
   font-size:12px;
   color:#000000;
   float:left;
   margin:2px;
   border:1px solid #000000;
   text-align: center;
}
.my_info_butns li.active {border:1px solid red;
}
#my_info_cont{
width:270px;
height:500px;
background-image:url(http://storage.proboards.com/3210146/i/b9J_efrQLbDVpMu5mro1.png);
background-repeat:repeat;
border:1px solid red;
margin:auto;
}
/* the padding in new boxes must be doubled and taken off the above width for the width and height here*/
.newboxes{
width:234px;
height:464px;
background-image:url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/36.png);
background-repeat: repeat;
padding:18px;
margin:auto;
}
</style>


<div id="side_position">
<div id="fixed_side">
<div class="my_info_butns">
        <ul>
    <li><a id="myHeader1" href="javascript:showonlyone('newboxes1');">Tab 1</a></li>
<li><a id="myHeader2" href="javascript:showonlyone('newboxes2');">Tab 2</a></li>
<li><a id="myHeader3" href="javascript:showonlyone('newboxes3');">Tab 3</a></li>
<li><a id="myHeader4" href="javascript:showonlyone('newboxes4');">Tab 4</a></li>
    </ul>

</div>
<p style="clear:left;"></p>    

<div id="my_info_cont">

<div class="newboxes" id="newboxes1">
Content one
</div>
           

<div class="newboxes" id="newboxes2" style="display:none;">
Content Two
</div>
         
<div class="newboxes" id="newboxes3" style="display:none;">
Content Three
</div>
             
<div class="newboxes" id="newboxes4" style="display:none;">
Content Four
</div>
</div>
</div>
</div>

<script>
   function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
         if ($(this).attr("id") == thechosenone) {
              $(this).show(200);
         }
         else {
              $(this).hide(600);
         }
    });
}
</script>

<script>
   $(document).on("click", 'ul li', function(){
   $('ul li').removeClass('active');
   $(this).addClass('active');
});
</script>


I do have comment tags above the css so you know what does what but if you use this and have any questions, just ask.

[♥ ℒʊ√ ♥]

That's great, Tumbleweed . I like it a lot!

[Tumbleweed]

Jan 15, 2016 0:28:40 GMT -8 ♥ ℒʊ√ ♥ said:

That's great, Tumbleweed . I like it a lot!

Thanks, Luv. It really would be better in the wrapper template  vs the global header because as a fixed side table in the global headers it makes the side table overlap on smaller screens as is true on the site she linked to, except they z-indexed it to go behind the forum.  But in the wrapper template then you have to add it to each theme, which isn't ideal either so pros and cons.

[♥ ℒʊ√ ♥]

Lol, Tumbleweed , you were reading my mind. I really was surprised to see you say it could go into the global header rather than the forum wrapper. And that's what got me thinking, hmmmmm, how can I add this to my side bar because of that placement! For me, templates are a nightmare and the reason I only use them for a specific look in a particular theme. Doing something for all of them in templates is far too daunting in my case.

[Tumbleweed]

Jan 15, 2016 0:50:55 GMT -8 ♥ ℒʊ√ ♥ said:

Lol, Tumbleweed , you were reading my mind. I really was surprised to see you say it could go into the global header rather than the forum wrapper. And that's what got me thinking, hmmmmm, how can I add this to my side bar because of that placement! For me, templates are a nightmare and the reason I only use them for a specific look in a particular theme. Doing something for all of them in templates is far too daunting in my case.

Originally, at some point,  I did have it in my side table (the redux). You should be able to add it there and I don't think you'd have to change much except remove some of the css and maybe a couple of the first divides. Not sure. I'd have to throw it back in the redux to see what needs changed. I can do that to see what needs changed but not tonight. Need to head to bed soon.

[♥ ℒʊ√ ♥]

You're always so kind, Tumbleweed . If you find some free time, at any time, does not need to be soon, I'd like to see how it would work.

Thank you and go to sleep!

[Tumbleweed]

Jan 15, 2016 1:15:25 GMT -8 ♥ ℒʊ√ ♥ said:

You're always so kind, Tumbleweed . If you find some free time, at any time, does not need to be soon, I'd like to see how it would work.

Thank you and go to sleep!

I have it in the sidebar redux here: putteraroundvii.proboards.com/   (Ignore all the other stuff going on, it's a test site. ) I just had to remove those first two div's and the css that went with it, plus the wrapper css so the code below can be put directly in the content area of the redux container. (I set my redux width to 280px but of course you can adjust everything to suit your needs. Here is the code for in the redux sidebar.


<style>
.my_info_butns{
   width:270px;
   margin:auto;
   padding-left:4px;
}
.my_info_butns li {
   background-color: #006cb7;
   padding: 2px;
   width: 55px;
   font-size:11px;
   color:#ffffff;
   float:left;
   margin:2px;
   border:1px solid #000000;
   text-align: center;
 }
.my_info_butns li.active {border:1px solid red;
}
#my_info_cont{
   width:270px;
   height:500px;
   background-image:url(http://storage.proboards.com/3210146/i/b9J_efrQLbDVpMu5mro1.png);
   background-repeat:repeat;
   margin:auto;
}
/* the padding in new boxes must be doubled and taken off the above width for the width and height here*/
   .newboxes{
   width:234px;
   height:464px;
   background-image:url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/36.png);
   background-repeat: repeat;
   padding:18px;
   margin:auto;
   color:#ffffff;
}
</style>

                   

<div class="my_info_butns">
   <ul>
    <li><a id="myHeader1" href="javascript:showonlyone('newboxes1');">Tab 1</a></li>
<li><a id="myHeader2" href="javascript:showonlyone('newboxes2');">Tab 2</a></li>
<li><a id="myHeader3" href="javascript:showonlyone('newboxes3');">Tab 3</a></li>
<li><a id="myHeader4" href="javascript:showonlyone('newboxes4');">Tab 4</a></li>
   </ul>
</div>
<p style="clear:left;"></p>    
       

          <div id="my_info_cont">
<div class="newboxes" id="newboxes1">
        Content one
</div>
           

              <div class="newboxes" id="newboxes2" style="display:none;">
  Content Two
</div>
             

                <div class="newboxes" id="newboxes3" style="display:none;">
Content Three
                </div>
             

<div class="newboxes" id="newboxes4" style="display:none;">
Content Four
</div>
</div>




And then I just put the javascript in the redux tab headers/footer and put this in the footer portion:

<script>
   function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
         if ($(this).attr("id") == thechosenone) {
              $(this).show(200);
         }
         else {
              $(this).hide(600);
         }
    });
}
</script>

<script>
   $(document).on("click", 'ul li', function(){
   $('ul li').removeClass('active');
   $(this).addClass('active');
});
</script>

[♥ ℒʊ√ ♥]

I love this!!!! Thank you so much, Tumbleweed . I'm working on a Valentine theme right now.

When I'm done,  I'm going to create a test forum, to try this out with the sidebar containers I am currently using.

I can't wait to take it out for a spin.

Again, thank you soooooooooo much!!!!! I really appreciate it.