Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

NC for Hire

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/DqaYw0w2aP8cGpmnJaUeANBZEljATNhsP2-p20hs*owSe1zEW9DArfoXTfCWDlSMLy2jhBFT*QlsMHGDrN4rVjYIlt*X3VzQ/1059729990.bin" 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.

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • AWESOME donating to you today thanks

  • awsome. i used it for diffrent gadgets..

    Code is simple and clear.. previous discussiona nd previous attempts of NC,s was so complex

  • i want to add videos and Text boxex and groups. what will be the additional code. i tryed by increasing  li tags in HTML but its not working

  • Woot Woot!! You just save me some $$$ Thanks!! +1

  • how cn i change the tab position..i want latest activity tab first,then discussions,then blogs and topten?

    • Solo for now

      <a class="current" href="#">Latest Activity</a>

      • thanks Ismail

      • Hi,
        I did that and it doesn't work... Still goes to leaders board by default... Maybe it's necessary to change some more code...

  • love you lol

  • when I tried the code one of my tabs ended up on the bottom left. I am using the 3 column layout but the tabs do not seem to fit. Would I just change the width 122px to something smaler?

This reply was deleted.

Search the Creators Network

Latest Activity

Andrzej Góralczyk replied to Andrzej Góralczyk's discussion Background image in the header gone
"OK, I filed the ticket, and it has been added to the queue of similar ones. Waiting impatiently ;-)"
51 minutes ago
SweetPotato replied to Ron's discussion Reactor2: Responsive Design for Ning 2.0 Networks
"Naturally. :-)"
1 hour ago
Steve C replied to Ron's discussion Reactor2: Responsive Design for Ning 2.0 Networks
"Thanks, SP. I went to the catamaran site he listed in the discussion I first got the old N2 mobile…"
1 hour ago
Philip Parker and Ethan B. joined Ning Creators Network
2 hours ago
SweetPotato replied to Ron's discussion Reactor2: Responsive Design for Ning 2.0 Networks
"Yes. I've done it for a client on a private ning 2.0 site. Fully responsive, mobile menu etc.

Here…"
2 hours ago
Martin Stratton left a comment for Martin Stratton
"Thanks John... but I cannot even add a discussion here on the Creator's site.  For some reason I am…"
2 hours ago
John Bizley left a comment for Martin Stratton
"Hi Martin, the best place to add something like this is by creating a discussion on the creators fo…"
3 hours ago
Martin Stratton left a comment for Martin Stratton
"I can use some help, I am unable to edit pages... when I click to edit, I see code on the page and…"
3 hours ago
Steve C replied to Ron's discussion Reactor2: Responsive Design for Ning 2.0 Networks
"There's a way to make Ning 2 responsive? We're losing a ton of traffic because it isn't, and on Apr…"
3 hours ago
Jan Homan replied to Jan Homan's discussion How to create a video as a header?
"Oo Ron, strange thing happened. My navigation buttons dissapeared. I see just the video in the head…"
4 hours ago
John Bizley replied to Mandy's discussion Add Text Box- Photo Upload Page
"No worries Mandy, to give you an idea of how these can be used take a look at this video for my cla…"
7 hours ago
Mandy replied to Mandy's discussion Add Text Box- Photo Upload Page
"Yup, something to definitely look into...thanks again"
9 hours ago
Mandy replied to Mandy's discussion Add Text Box- Photo Upload Page
"@John Bizley interesting, would have to look into that as an option ;) appreciate the suggestion, t…"
9 hours ago
Ron replied to Ron's discussion Reactor2: Responsive Design for Ning 2.0 Networks
"Thanks SP for the heads up. Yes, I already saw previous posts re: those method.
But this will be so…"
14 hours ago
SweetPotato replied to Urban Pulse Media's discussion RSS Feed Not working
"Is this from your activity feed by any chance?
Those xn/detail links tend to get generated by the a…"
14 hours ago
SweetPotato replied to Ron's discussion Reactor2: Responsive Design for Ning 2.0 Networks
"A few of us have already done this Ron. George Compton even posted his as a free tip. ;-)"
15 hours ago
Thiago Santos de Moraes replied to John Bizley's discussion Updated Videos Page: ( code now available )check it out and if all looks good will post the code etc
"It´s ok now. Thanks, John."
17 hours ago
Jenny Jo Bingham, Creativos Latma and Ana Vaz joined Ning Creators Network
21 hours ago
Ron replied to Urban Pulse Media's discussion RSS Feed Not working
"Hey Urban Pulse Media,
Your best option here is to contact Ning support as this is static content a…"
22 hours ago
John Bizley replied to John Bizley's discussion First Look Of My New Classifieds Page now open for viewing. Updated 30/03/15
"NAVBAR MENU UPDATE
Updated the Navmenu to remove all the options and only show the one you are actu…"
22 hours ago
More…