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

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

Jelena replied to Riccardo Rossini's discussion 'Please Ning staff'
"Same as SE. That would be a problem with the Trademark name.."
1 hour ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"same on all sites its a bug"
1 hour ago
Jelena replied to Riccardo Rossini's discussion 'Please Ning staff'
"Hi Riccardo I see no navegation on your network"
1 hour ago
Aaron replied to Rainer Glaap's discussion 'Heartbleed, MITM - Security Issues'
"Thanks for bringing this up! As Rainer mentioned, wasn't vulnerable to the Heartbleed…"
1 hour ago
Khatlen Guse replied to Stig Karlsen's discussion 'Problems with Facebook activity feed'
"Hi Stig! My feed its ok now! :) I hope that your is ok too."
1 hour ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"id use that but to be safe make sure theres no copywrite on the pentaprism and if there is it…"
2 hours ago
Riccardo Rossini replied to Riccardo Rossini's discussion 'Please Ning staff'
"I know very well SE, I ensure you that it was a sort of gratitude for the new platform for us. I…"
2 hours ago
Riccardo Rossini replied to Riccardo Rossini's discussion 'Please Ning staff'
"Phil. I take the occasion just to ask you if you took alook at this, for me ot could be e very good…"
3 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service