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

Reply to This

Replies to This Discussion

Dear,
Agreed. As far as I can see Vaqz is advocating either putting the script in custom code OR the text box, not both. Whether it's working by putting it in the text box I couldn't comment as I've not tried it, but Vaqz's instructions are clear.
Thanks
SP

I set mine up for the text box and it works fine. I'm using Latest Activity, Forums, Blogs & Events. I did have to change a little bit of the code for it to play nice. Here's the piece I changed for mine if you need an example. The rest of his example is spot on.

Original

$('.xj_leaderboard_module').addClass('indented_content');

My change

$('.module_activity,.module_forum,.module_blog,.module_events,').addClass('indented_content');

Hey, thanks! That worked perfect!!

Hi Stygo,

Sorry it is my mistake. Try this if it works. On your textbox remove #xg_layout_column_2

so that what is left is this:

$('.xj_leaderboard_module').addClass('indented_content');

let me know how it works for you.

And by the way don't forget to transfer Latest Activity, Leaderboard, Blogs, and Discussion on the left column below the textbox and should be in that order. I look at your site and I don't see the Discussion and Leaderboard on the left column. Try that and let me know how it works for you.

hello vaqz thanks for the update..but cannot get it to work the way you have updated it..thanks again

LOL...I DONT KNOW IF ITS THE WEATHER.ITS SO HOT..MAYBE SOMEONE SPIKED MY COOLAID..BUT THE NEW UPDATE WORKS ..SORRY FOR THE HASSLE....ONCE AGAIN THE NEW UPDATE DOES WORK 

solo, i check the code by viewing it.. it is useing dual google ajax library, any way .. waiting for filtered Code

i was using the 2 column layout..if your using 2 column layout..the code is updated..vaqz has updated its highlighted in yellow..place that in text box..i think its a better code now than before

Hey vaqz, I was about to install this on a network I admin, but I'm having second thoughts.

The site owner wants:

Top Content
Latest Activity
Featured Blogs
Featured Videos

In that order. I'm pretty certain it can be done, but I feel like I'm missing something. Aside from the obvious, what changes would I need to make to this code?

 

It's definitely not working for me. Have a look here and please tell me what I have doing wrong.

Thanks.

Thank you kindly Stygo! I'm actually working on something else now, so I've removed the tabs for now. 

I will reinstall at a later time, I just needed to test it out first.

Cheers.

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

Enrrico Torres replied to Enrrico Torres's discussion 'Please help to create a slider'
"Sorry George to trouble you again. please see below how it looks on my phone. The slider width is…"
50 minutes ago
ComunidadFCB.com replied to ComunidadFCB.com's discussion 'No me deja dar de baja mi comunidad (Cancelarla)' in the group Ning Networks en español
"gracias Lorenzo, la verdad es que nos dolio mucho poder echar 14.500 miembros para poder seguir en…"
1 hour ago
Dunamis commented on David Famuyide's group 'Christian Network Creators'
"I am inviting you to join the only Christian Community exclusively for Singles and Married Couples.…"
1 hour ago
Profile IconDunamis and Captain Major RockettBobebuzz joined David Famuyide's group
1 hour ago
Captain Major RockettBobebuzz joined JFarrow's group
Thumbnail

How Did You Do That?

This group is for Ning Creators who have found something on another Ning site and would like to…See More
1 hour ago
Captain Major RockettBobebuzz joined Ken's group
Thumbnail

Professional Networks

A group for network creators who are creating networks aimed at a specific industry, profession or…See More
1 hour ago
Captain Major RockettBobebuzz joined md's group
Thumbnail

Templates, Codes, Scripts and Tweeks

This group is for the Ning guru's who help us regular folks out with all the TCS & T we need to…See More
1 hour ago
Captain Major RockettBobebuzz joined Garfield Creator's group
Thumbnail

Creators Dashboard

A Group for Creative Network Solutions both free & for…See More
1 hour ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service