jquery tabs - save more space

[vaqz]

Preview of Final Results. Checkout Live demo here!
Last updated 4/22/12 to fix issues address here, here and here! :p

Step 1

Setup center column of feature layout. Follow setting below and save your changes.

Step 2

The HTML: Copy and paste the html code below to the 1st textbox that we add on the
center column (see screenshot above). Important:make sure that you are in html mode when
pasting the code and save your changes.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://api.ning.com:80/files/JHw5Rw1dl6EzQodA1ybSCIJaDOcuGnda991bRWvHRKexSEXhz3lfokr7olFZ316enFRjdaqGCsZ0XYuJXa0gdOXUkZKGWsZ7/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.xj_leaderboard_module').addClass('indented_content');
$("ul.tabs").tabs(".indented_content");
});
</script>
<ul class="tabs">
<li><a class="current" href="#">Monthly Top 10</a></li>
<li><a href="#">Latest Activity</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="#">Blogs</a></li>
</ul>

Step 3 (Final)

The Custom CSS: Copy and paste the css code below to the Advance section of your design
Studio or advance appearance if you are using the old editor. Important: there may be a need to
change some of the values on each properties below since we have different settings of our network themes. Please do so when needed.

 

ul.tabs {
height: 42px;
}
ul.tabs li {
background: none repeat scroll 0 0 #054C83;
border-right: 1px solid #FFFFFF;
float: left;
list-style: none outside none !important;
margin: 0 !important;
text-align: center;
width: 122px;
}
ul.tabs a, ul.tabs li a:hover {
background: none repeat scroll 0 0 transparent;
color: #FFFFFF;
display: block;
padding: 5px 0;
}
ul.tabs a.current {
width: 122px;
}
ul.tabs li:hover, ul.tabs a.current {
background: none repeat scroll 0 0 #0088C3;
color: #FFFFFF;
}
ul.tabs a.current:after {
border-color: #0088C3 transparent;
border-style: solid;
border-width: 10px 10px 0;
content: "";
display: block;
margin-left: 10%;
margin-top: 5px;
position: absolute;
width: 0;
}

 

save now your changes and your good to go. If you still in trouble following my steps please drop your questions down below and I will get back to you as fast as I can.

[Aanu Bello]

@ solo : i am using the 3 column layout. and i have tried following the steps one after another carefully.

can you help? maybe i send my log in for you

[solo]

have you tried putting the code that goes in custom code box on top? of everything in the custom code box?..

[solo]

also if like pm me your info ill take alook

[Aanu Bello]

i have just tried it and its not still going..... i just sent you an invitation, please do accept so i can pm you my username and pw

[Aanu Bello]

Finally it worked, but still one more thing????? Can I make the latest activities be the first thing on list?

[solo]

<a class="current" href="#">Latest Activity</a>

[Aanu Bello]

it is still showing Monthly Top 10 as the default. i think it have to do with this $('.xj_leaderboard_module').addClass('indented_content'); 

and not this

<a class="current" href="#">Latest Activity</a>

thank you

[solo]

@Bello

<ul class="tabs">
<li><a class="current" href="#">Latest Activity</a></li>
<li><a class="current" href="#">Monthly Top 10</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="#">Blogs</a></li>
</ul>

[Aanu Bello]

i don't think you can have current" href twice on a script, anyway, i tried it and it came up with i two arrow pointers 

<li><a class="current" href="#">Latest Activity</a></li>
<li><a class="current" href="#">Monthly Top 10</a></li>

[solo]

@bello your right ...try this...

<ul class="tabs">
<li><a class="current" href="#">Latest Activity</a></li>
<li><a href="#">Monthly Top 10</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="#">Blogs</a></li>
</ul>

[Aanu Bello]

i have tried that several times and its not working

[solo]

i apologize then,,that is the code that im using..