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

Reply to This

Replies to This Discussion


not working.

For Hero Box and Merge i used

Left Column Text box

<div class="space"></div>

where i have to put that?. Accodiing to Herobox Tutoriion i have put my content inside DIV of Middle column

Middle COlumn

<div id="spotlight" class="space">CONTENTS GOES HERE</div>

Can put it in either. I've put it in left column wrapped in the space div

<div class="space">
<div style="xg-p: relative; top: 207px; left: 494px; z-index: 5;">
<ul class="tabs">
<li><a class="current" href="#">Forum</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Videos</a></li>

But if you want your tabbed modules to appear in the left column then you'll need to put them in the left column!


I need like this.. If i paste all in Left Check Below results

so you want the tabbed modules to span two columns and then have rest of the modules still in two columns. i think you're talking custom work. Why not approach Vaqz?

Hope, Vaqaz. Will reply.

Thx SP for help.

@Vaqaz without CSS we can inject it through Jquery. if you have method for it let me know,

Thnx in advance

Hello again I was hoping to get some design help for this cool feature of yours... Notice how in your images on this page of your site you have this really nice rounded 3D edge around your images (the border) I was wondering if you would know a way I can create a border just like that for this feature so as that it pops visually.

It would be really nice if you or anyone could help with this... It would give my site and anyone else site that uses this same design a sleek look and feel.

Thank you in advance.

its not just working on my network

can you tell me what the mater is?


<script src="" type="text/javascript"></script>
$(function() {
    $("ul.tabs").tabs("#xg_layout_column_2 .indented_content");

adding of class should only be applied on event module. use the code below instead:


let me try..what layout are you using? 2 or 3 column layout? how many textbox are there in the column wer your jtab is sitting?


i want to attach last Text box in middle coulmn. . check plz


What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next!

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces.

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.

APIsThe 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 'Disabling Timestamp'
"Thanks Kos...that works a charm...shouldnt be any problem with seo if its just in the activity…"
2 hours ago
Jurrien Mammen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"+1 for Mailchimp if time is limited maybe consider connecting to (easy way to connect…"
3 hours ago
Jorge Nava replied to Rowald's discussion 'Fase 2'
"I agree with you, i also consider that have been waiting for things to improve since almost two…"
5 hours ago
Jords favorited Eric Suesz's page Upgrading to Ning 3.0: FAQs
6 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
".js-followUnfollow {  display: none;}"
6 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"hide it with css"
7 hours ago
Kos replied to ceri shaw's discussion 'Disabling Timestamp'
"Ceri here you go.  Note:  idk how this may impact your SEO b/c Google looks for…"
7 hours ago
Just Asking replied to Dutchlabel's discussion '2 discussions in forum'
"I'm not sure I follow what you're asking, but I'll give it a shot.   When you…"
7 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service