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: 12519

Reply to This

Replies to This Discussion

Uhm darn!... well Ismail I hope that someone can think of something to fix that, because I love having the more button, and I need the status update bar.

are you referring to the demo site? if so, the more button is currently not present because I don't have much activity on that site.

Oh ok cool that's good to know. But what about the activity status update bar?

You are not seeing it because you are not a member of the demo site. Try to signout on your own NING site so you will understand what I mean.

Aaaahhh yea I forgot, makes sence! Thanks

Hi SP,

Yes you are correct, it really has something to do with that line, only that you are using the wrong class that's why it didn't work. Use the code below instead. I haven't tried it but hopefully it will work for you. Share us your progress here when you get a chance.

$('.module_groups,.module_video,.module_events').addClass('indented_content');

Hi Vaqz, right, that did the trick but the weird thing is that the Activity Feed that i have in a different column disappears, not on a click of a tab, just disappears. The code is affecting it somehow but I really can't see where. Any thoughts?

SP

Hi SP, yeah you are right. The Activity feed bears also a class name "indented_content" and it is being hidden every time you click the tabs that's why. I have to update again the code to fit your requirement. See the code below for custom codebox:

<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
<script>
$(function() {
    $('.module_groups,.module_video,.module_events').addClass('indented_content');
    $("ul.tabs").tabs("#xg_layout_column_2 .indented_content");
});
</script>

Let me know how it works for you.

LOL, yeah, I just found that too using Firebug.

I put it in column one and this now works:

<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
<script>
$(function() {
$('.module_forum, .module_groups, .module_video, .module_events').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_1 .indented_content");
});
</script>

Thanks again

SP

Awesome find! YW!

vaqas not working for me. what will be final edition of your above code for adding.

Topmembers = lATEST ACTIVITY - FORUM BLOGS GROUPS VIDOS.

I WANT THESES ALL IN Single line.

Kindly give the final code. i tryed.but nto wkring

Hey Vaqz!

I was looking for this post, I was looking so hard I posted a new forum to see who knew where this was and Bernard Lama helped me out (thanks Bernard, your the man!) I guess me and SP were thinking alike in the sense that the tabs are not only appealing on the eye and makes you wanna click them LOL but they really save a ton of space hiding the modules within one another in the tabs! I set up my second of tabs under the first set and I have "events, groups, videos, and photos" only photos show but my first tab is actually events. What do I need to modify to have the setup I've created work? So far the code you provided above does work for hiding the other modules but with my setup it does nothing when I click on the tabs! LOL help please!

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Fire-Tech replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"Hey Anam. What theme are you using?"
1 hour ago
Evandro Dalben replied to Thiago Santos de Moraes's discussion 'Exemplos de comunidades inspiradoras usando o Ning 3.0' in the group Criadores Brasileiros - Brazilian Creators
"Estou a mais de 2 meses solicitando a migração e nada ... tomem cuidado pois fui…"
1 hour ago
Evandro Dalben replied to Evandro Dalben's discussion 'Suporte NING é bem ruim hein ?' in the group Criadores Brasileiros - Brazilian Creators
"Obrigado pela sugestão, estou aberto a novas pois irei remover minhas redes do ning uma vez…"
1 hour ago
soaringeagle replied to Monica Diaz's discussion 'MIGRATING TO NING 3.0 STATUS [UPDATE #2]'
"you most likely never responded to the migrzation confirmaztion email thats whats stopped most…"
1 hour ago
Evandro Dalben replied to Monica Diaz's discussion 'MIGRATING TO NING 3.0 STATUS [UPDATE #2]'
"I have been requested this since Feb 13 .. we are in April 19 and NING didn't migratred my…"
1 hour ago

NC for Hire
SweetPotato replied to SweetPotato's discussion 'Tip: Insert Adverts in Content after the First Paragraph'
"Glad it worked. SP"
5 hours ago
francesco pillinini replied to francesco pillinini's discussion '3rd Party Integration > Facebook'
"Elshara Thank you very for replying to my message still can't see what im looking for on…"
5 hours ago
Kevin Kelly replied to Chris Purington's discussion 'Paid Memberships & Recurring Payments in Ning 3.0'
"That would be a great feature to add.  There's bound to be lots of small membership…"
7 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service