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

Ron replied to Jan Homan's discussion How to create a video as a header?
"ok sorry, I thought you know how to enclose a script already. Anyway, try this again with the attac…"
26 minutes ago
Jan Homan replied to Jan Homan's discussion How to create a video as a header?
"Heey Ron,
I think the code is working, but the video is above the page and above the so called: <di…"
38 minutes ago
Ron replied to Jan Homan's discussion How to create a video as a header?
"Hi Jan,
Ok looks good. Try the javascript code link below and add it to your custom code. Assuming…"
58 minutes ago
Jan Homan replied to Jan Homan's discussion How to create a video as a header?
"Hello Ron,
I streched the canvas as well the full width background of the header.
Here is the link…"
2 hours ago
Ron replied to Mandy's discussion Add Text Box- Photo Upload Page
"This could be an alternative John, if you won't fully utilize the tag content. I think this is wort…"
7 hours ago
Ron replied to Ron's discussion Ning Apps: Photo Tagging Feature (WIP)
"Hi Luke, I will be posting the details here and on the feedback page within a couple of days.
Thank…"
9 hours ago
Arturo Padrón left a comment for Sonia
"Hola, amor mio, te extraño "
9 hours ago
Ron replied to Jan Homan's discussion How to create a video as a header?
"Hey Jan,
Ok I see that. BTW, Is your site header already stretched out to accommodate your proposed…"
9 hours ago
Ron replied to Ron's discussion Free Emoji for Ning Apps Early Access Subscribers
"Yes Luke, I have updated the details above about usage and it is site wide :-)
It should be availab…"
10 hours ago
Ron replied to Mandy's discussion Add Text Box- Photo Upload Page
"Hey that's good to know and keep it up! :D Sure thing and have a great weekend as well. :-)"
10 hours ago
Ron replied to Ron's discussion Free Emoji for Ning Apps Early Access Subscribers
"You're welcome Mary Jane. Yes, it will be for both 2.0 and 3.0 :-)"
10 hours ago
John Bizley replied to John Bizley's discussion First Look Of My New Classifieds Page now open for viewing.
"Thanks Kos, I just added a text listing in the Vehicles & Parts section to show how those would loo…"
10 hours ago
John Bizley replied to Luke Jones's discussion Move the "about me" answer's to the side
"Hi Luke yes I think that could be done, I will have a play around with it and see what I can come u…"
11 hours ago
Kos replied to John Bizley's discussion First Look Of My New Classifieds Page now open for viewing.
"Extremely interesting.  Thank you for sharing John"
11 hours ago
steve replied to Mary Jane Peterson's discussion Need Some Ideas For New Site
"You need to give your site direction Mary.. what i would do if it was me is think about what you li…"
13 hours ago
John Bizley replied to Mandy's discussion Add Text Box- Photo Upload Page
"What about if you renamed the 'tags' box to products used or keep the tags but maybe add the words…"
23 hours ago
John Bizley replied to John Bizley's discussion Check out these 3 photo page layouts using my comments to the side and more entries at the same time
"Not sure which of these to go for as I like the first one and the full screen one, what do you guys…"
23 hours ago
John Bizley replied to ismail shah's discussion Removal of Large Spaces between Posts
"No worries, glad you got it figured out :-)"
23 hours ago
John Bizley replied to John Bizley's discussion Here are a couple of little text tips that you may find useful
"Thanks JF :-)"
yesterday
Mary Jane Peterson replied to Ron's discussion Free Emoji for Ning Apps Early Access Subscribers
"Hi Ron 
Thank you , will this also be on ning 2.0 as well ?"
yesterday
More…