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.

[SweetPotato]

Dear,
Agreed. As far as I can see Vaqz is advocating either putting the script in custom code OR the text box, not both. Whether it's working by putting it in the text box I couldn't comment as I've not tried it, but Vaqz's instructions are clear.
Thanks
SP

[Fire-Tech]

I set mine up for the text box and it works fine. I'm using Latest Activity, Forums, Blogs & Events. I did have to change a little bit of the code for it to play nice. Here's the piece I changed for mine if you need an example. The rest of his example is spot on.

Original

$('.xj_leaderboard_module').addClass('indented_content');

My change

$('.module_activity,.module_forum,.module_blog,.module_events,').addClass('indented_content');

[Chris Herzig]

Hey, thanks! That worked perfect!!

[vaqz]

Hi Stygo,

Sorry it is my mistake. Try this if it works. On your textbox remove #xg_layout_column_2

so that what is left is this:

$('.xj_leaderboard_module').addClass('indented_content');

let me know how it works for you.

[vaqz]

And by the way don't forget to transfer Latest Activity, Leaderboard, Blogs, and Discussion on the left column below the textbox and should be in that order. I look at your site and I don't see the Discussion and Leaderboard on the left column. Try that and let me know how it works for you.

[solo]

hello vaqz thanks for the update..but cannot get it to work the way you have updated it..thanks again

[solo]

LOL...I DONT KNOW IF ITS THE WEATHER.ITS SO HOT..MAYBE SOMEONE SPIKED MY COOLAID..BUT THE NEW UPDATE WORKS ..SORRY FOR THE HASSLE....ONCE AGAIN THE NEW UPDATE DOES WORK 

[ismail shah]

solo, i check the code by viewing it.. it is useing dual google ajax library, any way .. waiting for filtered Code

[solo]

i was using the 2 column layout..if your using 2 column layout..the code is updated..vaqz has updated its highlighted in yellow..place that in text box..i think its a better code now than before

[Patrick Chappelle]

Hey vaqz, I was about to install this on a network I admin, but I'm having second thoughts.

The site owner wants:

Top Content
Latest Activity
Featured Blogs
Featured Videos

In that order. I'm pretty certain it can be done, but I feel like I'm missing something. Aside from the obvious, what changes would I need to make to this code?

 

[Patrick Chappelle]

It's definitely not working for me. Have a look here and please tell me what I have doing wrong.

Thanks.

[Patrick Chappelle]

Thank you kindly Stygo! I'm actually working on something else now, so I've removed the tabs for now. 

I will reinstall at a later time, I just needed to test it out first.

Cheers.