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.

[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!! :)

[Armani Rouse]

lol @ "dont eat" likewise pal! lol I make time though but its no biggie but the offer yet stands and will! Im having issues with these darn Jquery tabs again :/ I want to set up a 2 tab setup and just increase the width the of the tabs but am having trouble implementing this with my new 2 column setup...I dont want the latest activity as one of the tabs only the 2 text boxes I have on my home page, that's it! I have the module name for the text box but it could be wrong im not sure but nothing is working and Im racking my brain trying to remember lol

.html_module is what I replaced the indented_content with. 

Basically I want 2 jquery tabs to hold the content of the 2 text boxes on my home page

[dave]

Love your Icons Damo, now what would be really cool ...is if the shutter closed when you hover over them :) or a quick Flash..either would look pretty cool. 

[Damien Hannah]

Thanks Dave! I wish I knew how to make that happen! Do you? Lol.

Yup, that would be amazing if the shutters closed on mouseover...

Now I want that. :)

[dave]

Just make up a animated Gif :) I no there's got to be people here that love doing this type of stuff.... Christmas is almost here Damo so i wish you all the best and have a fantastic one, your site looks good.

[Robert]

How can I get this to work in  my 2 column layout ?

[Robert]

I figured it out ... I added Videos to the tabs but it still shows up on the home page under this feature along within the feature ?? Strange