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

Reply to This

Replies to This Discussion

ok, i dont know why it is not working for me. can you show me your site

Excellent, will experiment with this.
Many thanks for bringing this up. 

has anybody been having trouble moving modules around on their or i should say on your profile page?,and also or you having prob with your photo viewer on your profile page loading up ..when i have the custom code to the box.this happens,when i take out code from the custom code box,,everything works..can a creator confirm this for me..thanks

Pingdom.com Is showing MORE LOAD of my site now. dont know why.. due to this or not. bcz before this that was fine..

NC,s also confirm it to me

yes this is true..this script,,,will not let you customize your profile page,,as in moving the modules around..also music player and photo viewer will not load up...hmmm

Is this definitely the case Solo? I've almost got this looking pretty good but hadn't checked the profile pages. Damn.

Hello NC's, solo reported that the code we are using here is conflicting some of the UI on the My profile page one e.g is moving modules around. If this is enabled on your network you will probably relate to this. This is due to the js file that has been loaded on the custom code box. To those that is still interested to use this stuff follow the work around below to fix this:

Important: Remove 1st the code that we add on the custom code box and instead copy the code below and add it to the textbox where the HTML Code sits:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nhacks.net/demo/js/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.xj_leaderboard_module').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_2 .indented_content");
});
</script>

So that this should all be the codes inside the textbox:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nhacks.net/demo/js/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.xj_leaderboard_module').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_2 .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>

 

Vaqz your the man..i had been working on this work around all night,,i know what i was doing wrong..thanks

Vaqaz u are calling <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 2 TIMES

one in text box and other in custom code.. why ? it take load.

i think in custom code isn,t enough ?

As Vaqz says, remove from custom code. You only need it once in the text box to avoid the script conflicting with draggable items on profile pages

Doesn't work on my site anymore.

@SP , Dear i suggest that reduce JS scripts it take load whileing loading sites

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

Anam replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"No. I don't think I made a ''pretty big misrepresentation'' of what i was…"
2 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Great!!! Plenty of ideas to play with, thanks again.....now all I have to do is find one…"
4 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
"Your welcome. This would look good with your cover. I added a padding so that the text does not…"
4 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Background color makes a huuuuuge differenc.....might make it a lighter color though."
5 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Once again many thanks....made it bold white 22px times new roman....looks fine now :)"
5 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
"I just noticed you are using the Courier New Font. If you want a background color you can try…"
5 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
".groupHeader-groupName {font-family: 'book antique';font-size: 20px;color: black;}Look at…"
5 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Basically I want to enlarge the text on the group cover photos as in the example below in order to…"
5 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service