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="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
<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>

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

Reply to This

Replies to This Discussion

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.

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.



My change


Hey, thanks! That worked perfect!!

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:


let me know how it works for you.

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.

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


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

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

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?


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


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.



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

NC for Hire
SweetPotato replied to SweetPotato's discussion 'Ning 3.0 Tip: Insert Videos and Music Players on Profile Pages'
"My pleasure Elena. SP"
2 minutes ago

NC for Hire
SweetPotato replied to soaringeagle's discussion 'fb style tagging and notification'
"+1 Buddypress has this in Twitter form, I.e you @memtiom someone by username. Fire-Tech you might…"
10 minutes ago
Thiago Santos de Moraes replied to Scott Bishop's discussion 'Better Captcha'
"I liked! Simple and innovative."
19 minutes ago
TJ @ jQueryHelp replied to Alexander's discussion 'Goodbye for now.'
"Hi Alex, I wish you all the best with your new network.  Maybe we'll see you again in the…"
28 minutes ago
Dustin Craig replied to Enrrico Torres's discussion 'Want to remove powered by from footer'
"Is there a way to change the copyright info without changing the network name. Our network is built…"
4 hours ago
Suzie Nielsen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"I should also state that my experience is unique with it's own problems- not all will have any…"
4 hours ago
Jeffrey Haskins replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"Sounds about right"
5 hours ago
Strumelia replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"Well i suppose we could speculate endlessly...."
5 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service