jquery tabs - save more space

[vaqz]

Preview of Final Results. Checkout Live demo here!
Last updated 4/22/12 to fix issues address here, here 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.

[Armani Rouse]

This goes into the advanced css box in your design studio: this should work for you Damien, let me know! ;)

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;
}

[Damien Hannah]

How do I re arrange the order of the tabs, and declare what the tabs should be?

So, I have it set up and working on my site, but it's "as is" and un altered. I'd like latest activity to be first, then forums, then blogs, then groups.

It works, just need to re tell it what to show and where to go. :)

http://addictapic.com to view so far

[Rev. O.M. Bastet]

Go to the Tabs section of your Management section and drag and drop the tabs to the order you want them, in the vertical  list displayed, and that will translate to the horizontal order..

[Damien Hannah]

I tried this...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script src="http://nhacks.net/demo/js/jquery.tools.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
$(function() {
$('.module_latest_activity, .module_blogs, .module_forum, .module_groups, ').addClass('indented_content');
$("ul.tabs").tabs(".indented_content");
});
// ]]></script>
</p>
<ul class="tabs">
<li><a class="current" href="#">Latest Activity</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="#">Groups</a></li>
</ul>

it didn't work.

I really want Activity/Forum/Blogs/Groups.

Trying to figure it out on my own, but it's not working.

Have reset back to the default order.

Need help with this, can anyone look at this code above(in this post), and let me know where I've gone wrong?

[Damien Hannah]

This code is MAGNIFICENT now that I understand much more about the programming world!
This little app you've given us has taught me SOOO much! Thank you!

Here is what I have running right now, and I must admit, it's incredible!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script src="http://nhacks.net/demo/js/jquery.tools.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
$(function() {
$('.module_latest_activity, .module_blogs, .module_forum, .module_groups, .module_video, ').addClass('indented_content');
$("ul.tabs").tabs(".indented_content");
});
// ]]></script>
<p></p>
<ul class="tabs">
<li><a class="current" href="#">Latest Activity</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Videos</a></li>
</ul>

come have a look if you like! :) http://addictapic.com

[Armani Rouse]

you should make those icons on the home page much smaller, reminds of the "my dashboard" I added to my network about 2 months ago lol but the images are huge, I see what you're getting at but theyd be just as useful smaller...the Jquery tabs look good but would look better if there were only 4 of them..you have portfolios hanging off by itself and it throws the look off completely. Lastly, you can see any of the scrolling text at the top of the page...you might want to change that to a white font. Otherwise the site looks good! Where do you get most of your ideas other than here?

[Damien Hannah]

Hello Armani. Thank you for the compliments and suggestions!

That's a good idea about the icon sizes. I'm actually going to create new buttons using my "camera" logo. (Can be seen as my favicon.) So I will definitely be sizing them down.

I'm actually going to be hiding the left column on all pages, and the right column will be stretched across the whole content area. The "portfolios" tab will line up with the rest, and I will have room for one or two more should I choose to use the space, but as of now I have all that I need in those tabs.

As for the ideas for my site, I don't go anywhere else but here. Nowhere else is as helpful and giving as creators network. I am never "not" thinking about Addictapic, I am always having crazy ideas. A lot of my ideas are crazy or impossible, and get shelved, but certain ones have worked out amazing.

I now offer a "build a store" option, 13 of my members have already built stores and are selling products. It will bring in enough revenue, that I can get rid of all ads on my network. (I'd rather a clean look, and the ads are only running at $0.80 per click. Not worth my time, or the clutter.)

I find that yes, we can build a social network, but if you read through these forums, it's obvious that computer knowledge isn't completely necessary. We can all have great networks, that are unique... it's just a matter of thinking outside of the box!

Thanks again Armani, I will get to work on my new icons, and let you know when they are finished. :)

[Damien Hannah]

Changed the icons Armani!

[Armani Rouse]

Hey Damien! I actually have a lot of photographers on my site, we have a photographer "profile type" ;) Im gonna have some of people check out your site to join! And I extend this invite for you to come and join the admin team on Well Kunnected! You have great ingenuity and although my response time may be terrible now lol after reading your response its because we share something very similar...WE LIVE ON OUR SITES! lol I appreciate your friendship Damien, keep on brother!

[Damien Hannah]

Much Appreciated!! Not sure I'd be much help as Admin though, I barely eat as it is. lol. :) Totally appreciate your offer though Armani! I'm flattered!

[Armani Rouse]

Just checked it out....breath taking...I wanted to "take a picture" lol!!! Great job Damien, really nice, unique, neat and totally awesome! I commend those skills bro lol I like the lens look as if its about to take a shot or just has depending on the eye ;) We need to get you "Kunnected" you've done great work, I'd be honored to work with you!

[Damien Hannah]

Thank you so much!! :)