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

Reply to This

Replies to This Discussion

Ning itself adds the class of indented_content to several modules including the forum module. 

(Go here: http://creators.ning.com/ and Check the Forums with FireBug and you'll see what I mean.)

I don't think its good to addClass('indented_content') in this app - better to call the class that the jquerytools library is going to work on, something else.  When I make tabbed content, I use the class 'Tabbed Pane' so it doesn't interfere with classes that Ning already uses.

If you really really wanna use indented_content for some reason, then you'll have to do a removeClass from forum_module so the tabs library doesn't include it on a tab pane.  As is, it will include it on a tabbed pane that is always hidden because you don't have a li in the tabbed menu to show it!

Best practice, in MY opinion only, is this:

$(function() {
$('.module_photo,.module_groups,.module_video,.module_events').addClass('TabbedPane');
$("ul.tabs").tabs("#xg_layout_column_2 .TabbedPane");
});

Best wishes!

"TJ"

Thanks for the information, but when I made the changes you suggested, the broken code quit working completely.  I have no more time to waste on this - got to get my site launched.

 

I like your site, Tim!   Best wishes to you and your site. :)

Ning sites differ and there may not be a div with id xg_layout_colum_2 in some.  If the class we are adding to the panes we want to show with this tabbed panes app is unique, something like TabbedPane or MyTabbedPaneClass, then no need to specify that that class is inside that div.  So this line might work too:

$("ul.tabs").tabs(".TabbedPane");

If someone has trouble getting this code to work at all, another thing to try is to move the script part of it to the custom code box.  That worked for Maxx ( http://creators.ning.com/xn/detail/4244211:Comment:1120185 )

Another thing that sometimes causes a tab to skip is putting RSS feeds in a tab.  If you have an RSS feed in a tab, try taking it out and see if that helps.

This is a great tip but may require some modification and debugging to work on some sites.

why do I KEEP getting the other links showing up at the bottom of the Tab I click?

     Example: I have "Latest Activity" as one of the 1st tabs, then Blog Posts, then Weekly Top 10, Then Groups...

However, when I click each tab...Everything UNDER the other tab modules in the Features section, so how up in the Main Page view. How do I quick fix this? Anyone Help Please!!! Thank You.

I have added the code to my site, and can see it working when I am logged in. But when I log out you can't see the 4 tabs or the content that should be showing.

I must be doing something wrong. Thanks for the help in Advance!

Kyle,

It's probably just the signed-out cache. Sometimes it takes a few minutes to catch up with signed-in. Give it a few minutes, and do a hard refresh in your Browser.

Best Regards,

Jen

Thanks Jen seems to be working now took a little longer than normal for the changes to take.

Also not sure if you could help on one other little issue I am having. Under each section of the tabs the title for each section is showing with the module header background. Is there a way to hide the background for the four sections.

The site is hrrevolution.ning.com

I would appreciate feedback you have. Thanks again for the earlier reply!

How do I get it like this:----> "Activity, Monthly Top 10, Groups, Events, Birthdays"?

Any idea on how to make it work if you are pushing Latest Activity to its on page. Will these modules also be able to be pushed to that page as well and hidden on the sidebar like the latest activity module?

Hi Vaqz, can you or anyone else help point out why the "currently selected tab" area doesn't display outside the textbox. Check out the screenshot below or my network's homepage.

I couldn't get it float over the module either with a z-index. I just ended up removing the pointy part in the CSS and it still looks fine.

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;

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

soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"good"
32 minutes ago
Phil McCluskey replied to Riccardo Rossini's discussion 'Please Ning staff'
"We reverted this change and will give it another shot early next week. Apologies for the bugs and…"
2 hours ago

NC for Hire
JFarrow replied to John Bizley's discussion 'Has anyone else considered using a tab container for help files ?'
"this tip is infinitely useful to NCs John .. I've been doing something similar, but instead of…"
4 hours ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"category nav seems fixed  but custom page module still screwy but..great job on a very speredy…"
4 hours ago
Jelena replied to Riccardo Rossini's discussion 'Please Ning staff'
"Same as SE. That would be a problem with the Trademark name.."
6 hours ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"same on all sites its a bug"
6 hours ago
Jelena replied to Riccardo Rossini's discussion 'Please Ning staff'
"Hi Riccardo I see no navegation on your network"
6 hours ago
Aaron replied to Rainer Glaap's discussion 'Heartbleed, MITM - Security Issues'
"Thanks for bringing this up! As Rainer mentioned, Ning.com wasn't vulnerable to the Heartbleed…"
7 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service