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

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

ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Great!!! Plenty of ideas to play with, thanks all I have to do is find one…"
1 hour ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
"Your welcome. This would look good with your cover. I added a padding so that the text does not…"
2 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Background color makes a huuuuuge differenc.....might make it a lighter color though."
2 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Once again many thanks....made it bold white 22px times new roman....looks fine now :)"
2 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
"I just noticed you are using the Courier New Font. If you want a background color you can try…"
2 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
".groupHeader-groupName {font-family: 'book antique';font-size: 20px;color: black;}Look at…"
3 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Basically I want to enlarge the text on the group cover photos as in the example below in order to…"
3 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
"You can change the text size in Design Studio. Is there a specific text you want to target?"
3 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service