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.

[Kwaku OwusuAfriyie]

can some one give the final codes all together? having it here and there is really confusing especially for us the non pros.

Will be waiting................it never worked for either

[Andrew Sampson]

You are really awesome with your patience!
I was trying to change the items which would show - based on your original instructions

Basically in a simple 3 column layout we would like to have

Blogs Forums Groups Videos

Do I just need to change this $('.xj_leaderboard_module').addClass('indented_content');

to

$('.xg_module module_blog').addClass('indented_content');

(as well as the other bits which I understand :) )

or do I have to add something to custom code?

Appreciate your advice on this

[Armani Rouse]

This is a great tip and Ive implemented on my site! Now my question is adding direction as to where these tabs take you for instance when I click on "blogs" it hides the latest activity and shows the music player...how do add the URL for where these tabs would take you on my site?

[Tiffany Lane-Crane]

This is the most wonderferous thing I've come across on Creators. Thank you for this! This officially changed the way I run my network as I can now focus on certain aspects to highlight without taking up a lot of real estate on my home page. Huge improvement. Thank you!! 

[Ed]

thank you vaqz and everyone else who contributed to this thread.

[Selene Aswell]

you rock. thank you so much!

[igoravance]

Hi,

First of all thanks for so good tip!! But i have problem! i already prove all in my hands but this code dont work in my web www.ucraniaonline.com. My problem is that i can see all good, i mean table and all, but content dont appear in down of my web, this is the problem, dont appear in down nothing! what can i do? thanks

[igoravance]

...and i already changed # for links of my web

[Luke]

Hey, thanks this is awsome, i have one problem tho the tabs appear in a text box above the tabbed content, the text box has a boarder around it with a large gap between the two and it looks really odd. Is there a way to remove the borders from these without removing the borders from all my other text boxes?

[Luke]

Here is a screen shot. As you can see the tabs are in a separate box, is there a way to make them appear as the same box or get rid of there borders without turning off borders for all my other modules?

[Tim Cummings]

I am having trouble getting this to work:

 

I am displaying Activities, Events, Groups and Forums.  I wanted to include videos but could not get it integrated so I moved videos back to the left column. My site www.ceofellowship.com isa three column layout.

When the site comes up - Activities is highlighted, but there is nothing displayed in the column below the vavigation bar.  If I click on the next label, Events, Activities display; clisk on Groups and Events displays; click on Forums and Groups displays.

 

Here is the Javascript I am using -

<p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script src="http://nhacks.net/demo/js/jquery.tools.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
$(function() {
$('.module_events,.module_groups,.module_forums,').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_2 .module_activity,.indented_content");

});
// ]]></script>
</p>
<ul class="tabs">
<li><a class="current" href="#">Activities</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Forums</a></li>
</ul>

 

The CSS is :

/* Scroll Bar for Events */

.xg_theme.xg_widget_main .module_events .xg_module_body {

height: 300px;overflow : auto;position:relative;

}

ul.tabs {
height: 42px;
}
ul.tabs li {
background: none repeat scroll 0 0 #444444;
border-right: 1px solid #FFFFFF;
float: left;
list-style: none outside none !important;
margin: 0 !important;
text-align: center;
width: 95px;
}
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: 95px;
}
ul.tabs li:hover, ul.tabs a.current {
background: none repeat scroll 0 0 #b9121a;
color: #FFFFFF;
}
ul.tabs a.current:after {
border-color: #b9121a transparent;
border-style: solid;
border-width: 10px 10px 0;
content: "";
display: block;
margin-left: 10%;
margin-top: 5px;
position: absolute;
width: 0;
}

 

Here is an image of my Feature Layout

 

The site is live at www.ceofellowship.com.  Please tell me what I have to do to correct this situation.  I would like to move Videos into the center column and include it in the Navigation.  I have already adjusted the width of the buttons to allow for five links.

 

Thanks in Advance.

Tim Cummings

[e-mail]

[solo]

@Tim have you changed your  modules around..starting with latest A..then events..groups.forums..when i press on your L.A. tab it gives me events...try this if you havnt allready