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

Strumelia replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"You do yourself a disservice posting such creepy ramblings.  I can't imagine anyone wanting to help…"
6 hours ago
Curtis replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"Hello Jen-Long time no see! Good to see you following this!
This will be my last post in this parti…"
6 hours ago
Jen replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"=)"
9 hours ago
Strumelia replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"True dat!"
9 hours ago
Jen replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"One thing for sure, this platform has brought out the best passion in many - - positive and negativ…"
9 hours ago
Strumelia replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"Hey buddy, you asked a question, asked for responses.  I responded, trying to be helpful. That's no…"
9 hours ago
Curtis replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"Strummer I don't have the time to read more than the 1st sentences of your post- I didn't say I was…"
10 hours ago
Kos replied to Merri Dennis's discussion Code to duplicate Forum Page with Categories
"Sadly Ning has not released a way to customize this.  I'm sure it can be done but you may have to g…"
12 hours ago
JFarrow replied to JFarrow's discussion Tip: Best Tool For Creating Animated Gif Walkthroughs
"My pleasure buddy...glad it is helpful to you"
13 hours ago
Radhika Bista replied to JFarrow's discussion Tip: Best Tool For Creating Animated Gif Walkthroughs
"Thanks a lot Justin. Really appreciated for your whole explanatory post."
13 hours ago
Merri Dennis replied to Merri Dennis's discussion Code to duplicate Forum Page with Categories
"Thanks for the specific description to create a category index section.
Two other questions when yo…"
13 hours ago
Kos replied to Merri Dennis's discussion Code to duplicate Forum Page with Categories
"Sadly we have to do it this way b/c Ning has not come out with a setting for them to automatically…"
13 hours ago
Kos replied to Merri Dennis's discussion Code to duplicate Forum Page with Categories
"Just go to your categories and copy each one's URL.  Place in Notepad or Word
Then go to Sites & Pa…"
13 hours ago
JFarrow replied to JFarrow's discussion TIP: How to Quickly Change Network Background and Track Pageloads
13 hours ago
Strumelia replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"Curtis,  I'm speaking frankly about my own actual experiences, in response to your bizarre ravings…"
13 hours ago
Curtis replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"I'd buy your autobiography but i feel like I have already read it! Lmao...now if this post has anyo…"
14 hours ago
Curtis replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"Man you just can't stop with the endorsements....how funny"
14 hours ago
Strumelia replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"The Jamroom forums are administrated capably and efficiently by the platform developers.  I do lear…"
14 hours ago
Az'ya replied to Az'ya's discussion Custom header CSS for small displays?
"Hi Scarlett, thanks for your reply!I wonder if posting a screen shot works? Just starting to develo…"
14 hours ago
Scarlett replied to Az'ya's discussion Custom header CSS for small displays?
"Yes this can be done to remove the header on small displays or maybe even have your image resized t…"
14 hours ago
More…