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/JHw5Rw1dl6EzQodA1ybSCIJaDOcuGnda991bRWvHRKexSEXhz3lfokr7olFZ316enFRjdaqGCsZ0XYuJXa0gdOXUkZKGWsZ7/jquery.tools.min.js" 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.

Tags: toptip

Views: 12517

Reply to This

Replies to This Discussion

@ solo : i am using the 3 column layout. and i have tried following the steps one after another carefully.

can you help? maybe i send my log in for you

have you tried putting the code that goes in custom code box on top? of everything in the custom code box?..

also if like pm me your info ill take alook

i have just tried it and its not still going..... i just sent you an invitation, please do accept so i can pm you my username and pw

Finally it worked, but still one more thing????? Can I make the latest activities be the first thing on list?

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

it is still showing Monthly Top 10 as the default. i think it have to do with this $('.xj_leaderboard_module').addClass('indented_content'); 

and not this

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

thank you

@Bello

<ul class="tabs">
<li><a class="current" href="#">Latest Activity</a></li>
<li><a class="current" href="#">Monthly Top 10</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="#">Blogs</a></li>
</ul>

i don't think you can have current" href twice on a script, anyway, i tried it and it came up with i two arrow pointers 


<li><a class="current" href="#">Latest Activity</a></li>
<li><a class="current" href="#">Monthly Top 10</a></li>

@bello your right ...try this...

<ul class="tabs">
<li><a class="current" href="#">Latest Activity</a></li>
<li><a href="#">Monthly Top 10</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="#">Blogs</a></li>
</ul>

i have tried that several times and its not working

i apologize then,,that is the code that im using..

RSS

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

Suzie Nielsen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"Skye, Exactly! I have a widget- called feedget- and I watch them click in in real time... I am just…"
2 hours ago
Suzie Nielsen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"Tahita, The same!"
2 hours ago
Suzie Nielsen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"Se I trust you, You can  get my Google Analytics if you like- I think I have your email or I…"
2 hours ago
Kisha Freed replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"This is good insight Kos and Anam.  This will help us build community by keeping the members…"
3 hours ago
Kisha Freed replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"I agree! "
3 hours ago
Kisha Freed replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"I'm excited about the author/bio box! I'll have to check out the articles/pages features…"
3 hours ago
Just Asking replied to David Hogan's discussion 'Lots of Attention but not a lot of engagement'
"I'm not an expert by any means... just another person trudging through the web.  The…"
3 hours ago
Suzie Nielsen replied to Alexander's discussion 'Goodbye for now.'
"I mean your new site... ahhh..."
4 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service