Preview of Final Results. Checkout Live demo here!
Last updated 4/22/12 to fix issues address herehere 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.

Tags: toptip

Views: 11059

Reply to This

Replies to This Discussion

Hi everyone i want to combine the carousel (slider) with this jquery tabs but I guess the codes somehow conflicts with each other. I use the above code for jquery tabs and for the carousel slider I use from here http://creators.ning.com/forum/topics/simple-plug-n-play-content

The code:

<div class="xg_module_body nopad"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script> <script type="text/javascript" src="http://api.ning.com/files/*FK87Mos7FqSwGxq4NyVz0JVG3aSLtzzIjAH*CEpmFbL0mUm-66F4HvNdw2JR1hwbC0sIuFrxQjkddLwrv70lK--KKE0psos/jquery.simpleslider.js">
</script> <script type="text/javascript">
$(function() {
$('#slider').simpleslider({
auto: true,
interval: 8000,
speed: 600,
direction: 'horizontal',
buttons: true,
previoustext: 'Previous',
nexttext: 'Next'
});
});
</script>
<div id="container" style="overflow: hidden;" meebo:notsharable='true'>
<div class="spacer"></div>
<ul id="slider" style="overflow:none;height:136px;">
<li style="margin:0;padding:0; list-style:none;height:136px;"><a href="http://yourning.com/link"><img src="http://api.ning.com/files/sSMfgXbtClSh0ktPBRXsacUHyu*D74LLHFNZ24PEyoa0deutRC5rjM0tGQQGG47YFsgtM6A2dKzl83ni**09wBxy7-mmjo47/22565.gif" alt="" /></a></li>
<li style="margin:0;padding:0; list-style:none;height:136px;"><a href="http://yourning.com/link"><img src="http://api.ning.com/files/t2uy6ufIS7uK9zWpNi5amBhbM5wDvGmiPEWliEz4C9t00eDh9otMe1uwRzetsfwDhn2qsnNrKrifoHA9F5DNndXdoNuztQlL/doppler_136.png" alt="" /></a></li>
<li style="margin:0;padding:0; list-style:none;height:137px;"><a href="http://yourning.com/link"><img src="http://api.ning.com/files/6gT*1GoKf0O79CgJUM3vEVX9cMXm-UxTsEsyRqcu2TdnEoEu2sIQSHZobPz*aPvKLkZjxbArRdahnj4lZxNzMx0KBLkKXh*e/22595.png" alt="" /></a></li>
</ul>
</div>
</div>

Can anyone tell what I did wrong? 

Thanks!

Sasha

Hi guys. 

I followed the recommended steps in order to have the tabs up and running on the network I'm working on, but no luck the tabs would load the right content. I still can see all the modules below the tabs.

I placed the scripts first in the text module, then I left the ul class there and moved the javaScript code to the custom code section and still the same results.

Any advice? You can take a look at http://hambook.ning.com

Thanks in advance!

Ty.

hi, i went by the instructions, links are there but they dont deliver anything. pls HELP

why would people post not working/not full  codes here (APPARENTLY FOR FREE), then asking for $ to 'fix the issue' ???

if you plan to charge for your code, why don't state this at the beginning, instead of collecting all the 'thanks' etc

Is there a way to add a fifth tab for a 5th box? Or more?

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

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

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?

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!! 

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

you rock. thank you so much!

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

RSS

Latest Activity

Suzie Nielsen replied to soaringeagle's discussion 'killer penguins'
"Is this what is happening? My stats are totally off!!! This is scary because once again not being a…"
23 minutes ago
Barbara West replied to John Bizley's discussion 'Show Your Ning 3.0 Sites'
"Sorry my mistake--deleted it--Barb"
25 minutes ago
Rafael replied to Rafael's discussion 'Multiple Chat rooms for Ning 3.0'
"Hey Ningaholic, The categorization of members is an excellent idea.  On your perception of the…"
36 minutes ago
Kos replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'
"Your picture doesn't show that you're signed in.  You must be signed in for the site…"
41 minutes ago
Aurora Carlson replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'
"Great update and wonderful possibilities, thank you! I have a question though- will it be possible…"
43 minutes ago
A discussion started by soaringeagle was featured
46 minutes ago
Phoron replied to Phoron's discussion 'Transparency'
"Thank you"
47 minutes ago
Jordon McGee (Jords) replied to Dave Preece's discussion 'Youtube video comments and Ning activity feed'
"I think this will be capable when they add the video embed integrations."
50 minutes ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service