General Help Needed!!

[The girl who waited]

So...I have been beautifying...(or trying O.O)

So I added a staff legend. How do I make it clickable, and list names of who's who??

The board is here: here so you can looksee. 

Thanks!

[Tumbleweed]

I wouldn't know how to add a function for info using that code. I do have a user legend code something like that but it is above the Info Center and I don't write javascript so I'd not know how to add it below. However, using the code to put a div betweent the info center and forum I was able to add some tabs for content.

You can view it here:
eltest.proboards.com/index.cgi

Nothing is styled in it, just basic. You could do the styling but would that work?

[The girl who waited]

Mar 14, 2013 0:37:24 GMT -8 Tumbleweed said:

I wouldn't know how to add a function for info using that code. I do have a user legend code something like that but it is above the Info Center and I don't write javascript so I'd not know how to add it below. However, using the code to put a div betweent the info center and forum I was able to add some tabs for content.

You can view it here:
eltest.proboards.com/index.cgi

Nothing is styled in it, just basic. You could do the styling but would that work?

IT"S PERFECT
 
LOL, at this point, I am just looking for "nice looking" until I can replace my coding person (who moved out of the country for a school-exchange....)

[Tumbleweed]

First you'll need this code that adds the div above the info center: Main footer

smangii.proboards.com/index.cgi?board=pbsupport&action=display&thread=34014

Now put this right above that code.



<!--Link to the Jquery library-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>


<!--CSS for the show and hide user legend-->
<style>
#div1{
background-color: #bbbbbb;
width: 100%;
margin-bottom: -14px;
}
#tabs{
border:1px solid ##880000;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#tabs li{
display:inline;
}
#tabs a{
display:inline-block;
padding:2px;

}
#tab-1, #tab-2, #tab-3, #tab-4{
background-color: white;
text-align: left;
padding: 4px 20px 4px 20px;
display: none;
}
</style>

<!--Jquery for the show and hid-->
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').hide();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>


<!-- Hides on all pages but main page -->
<script>if(pb_action!="home")document.write('<xmp style="display:none;"\>');</script>

<!--Start of the user legend-->
<div id="div1">
<div class="titlebg" style="text-align: center; line-height: 22px; vertical-align: top;"><span class="text1" style="line-height: 26px;">User Legend</span></div>
<div class="welcomebg">
<div id="tabs">

<ul>
<li><a href="#tab-1">Admin</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1" display: none;">
Names here for tab 1<br />
Names here<br />
Names here<br />
</div>

<div id="tab-2" display: none;">
Names here for tab 2<br />
Names here<br />
Names here<br />
</div>

<div id="tab-3" display: none;">
Names here for tab 3<br />
Names here<br />
Names here<br />
</div>

<div id="tab-4" display: none;">
Names here for tab 4<br />
Names here<br />
Names here<br />
</div>

</div>
</div>
</div>
<!--end of the user legend-->
<script>document.write('<xmp\>');</script>
</xmp>
<!--end of the hide on all pages but main-->