[CUSTOM] Get tab version of jomsocial template

GK User
Fri Apr 02, 2010 6:41 am
Hello,
is it possible to get a tab version of the jomsocial style?!
Would be realy great.
Maybe someone made it already?!

THX for any help
User avatar
Senior Boarder

GK User
Sat Apr 03, 2010 1:08 pm
I would also be interested in this tab-template version
User avatar
Senior Boarder

GK User
Sat Apr 03, 2010 2:54 pm
Anybody can do this? Because is much more userfriendly, if you have many apps activated in userprofiles! Thx alot for help.

If someone have a little info how to implant it, I could do it by myself, maybe...
User avatar
Senior Boarder

GK User
Mon Apr 05, 2010 3:51 pm
Hi

Yes it's possible.
I will provide a module class suffix to have similar style from JomSocial tabs.
Wait for my feedback.

Cheers ;)
User avatar
Platinum Boarder

GK User
Mon Apr 05, 2010 8:28 pm
ok, i will do my very best and try to wait. :)
but it will become a hard time for me :D *jumparound*
User avatar
Senior Boarder

GK User
Tue Apr 06, 2010 1:06 am
Hi

As promise, follow this instructions:

[b]STEP 1)[/b]
Open gk_stuff.css file and add this code:

Code: Select all
/*
* Tabs mod with JomSocial Style
*/
div.gk_tab-jomstab {position: relative;}
div.gk_tab_wrap-jomstab {margin: 0 auto;}
ul.gk_tab_ul-jomstab {list-style-type: none;margin: 0;padding: 0;overflow:hidden;}
ul.gk_tab_ul-jomstab li {float: left;cursor: pointer;margin: 0 5px -1px 0;position: relative;padding: 0px;}
ul.gk_tab_ul-jomstab li span {display: block;height: 28px;line-height: 27px;padding: 0 10px;font-size: 11px;font-weight: bold;text-transform:uppercase;}
div.gk_tab_container0-jomstab {clear: both;background: transparent;}
div.gk_tab_container1-jomstab {overflow: hidden;}
div.gk_tab_item-jomstab {float: left;overflow: hidden;padding: 0 10px;}
div.gk_tab_button_next-jomstab,
div.gk_tab_button_prev-jomstab {}
div.gk_tab_button_prev-jomstab{}
div.gk_tab_button_next-jomstab:hover {}
div.gk_tab_button_prev-jomstab:hover {}
.gk_tab_container0-jomstab,.gk_tab_container1-jomstab,.gk_tab_container2-jomstab{position:relative;}


STEP 2)

Open style1.css file and add this code:

Code: Select all
/*
* Tabs mod with JomSocial Style
*/
ul.gk_tab_ul-jomstab {border-bottom: 2px solid #FFAE00;}
ul.gk_tab_ul-jomstab li span {background: #0D0D0D;bold;color: #696969;}
ul.gk_tab_ul-jomstab li span:hover {color: #fff}
ul.gk_tab_ul-jomstab li.active span {background: #FFAE00;color: #000;}


STEP 3)

Open style2.css file and add this code:

Code: Select all
/*
* Tabs mod with JomSocial Style
*/
ul.gk_tab_ul-jomstab {border-bottom: 2px solid #008aca;}
ul.gk_tab_ul-jomstab li span {background: #0D0D0D;bold;color: #696969;}
ul.gk_tab_ul-jomstab li span:hover {color: #fff}
ul.gk_tab_ul-jomstab li.active span {background: #008aca;color: #000;}


STEP 4)

Open style3.css file and add this code:

Code: Select all
/*
* Tabs mod with JomSocial Style
*/
ul.gk_tab_ul-jomstab {border-bottom: 2px solid #ca002e;}
ul.gk_tab_ul-jomstab li span {background: #0D0D0D;bold;color: #696969;}
ul.gk_tab_ul-jomstab li span:hover {color: #fff}
ul.gk_tab_ul-jomstab li.active span {background: #ca002e;color: #000;}


STEP 5) - VERY IMPORTANT

To use this style on tabs, open tabs module and set the following parameters:

- Select "Your own value" on "Style CSS" parameter
- Set "jomstab" as "Style CSS suffix" parameter
- On advanced parameters, make sure that "Use module CSS" is disable.



FINAL RESULT:




Enjoy ;)
User avatar
Platinum Boarder

GK User
Tue Apr 06, 2010 3:18 am
Hey thx. Great!
But that not realy what I meen.

I meen to have tabs for the jomsocial userprofil page. See the example I have made with graphicprogramm. Its only a montage/fake!
But that is what I meen.

Image

This is a template wich use a tab system, made by a user of jomsocial only as an example.
http://www.jomsocial.com/webforum/viewtopic.php?f=34&t=14151

Maybe I would pay a little amount for it. Tell me how much!
User avatar
Senior Boarder

GK User
Tue Apr 06, 2010 4:04 am
Looks a like the superbad template for jomsocial with tabs. You can probably just download the superbad template and use the code from it to make your tabs. Thos templates are free for download at http://www.suburbans.org/.

Then there is the pay for plugin for jomsocial "apps in tabs" by codingmall, it puts apps into separate tabs. It seems a bit nicer but I am still having issues with spacing on it with this template. I might as well shave my head on these, because I'm tired of pulling my hair out. :lol:

http://www.jomsocial.com/download/addon ... -tabs.html
User avatar
Fresh Boarder

GK User
Tue Apr 06, 2010 4:47 pm
Yes I knew that template already. Thats why I want it for the gavick template.
I already tried to install the code into the gk style, but I failed. :(
My css knewledge isnt very good.
User avatar
Senior Boarder

GK User
Wed Apr 07, 2010 1:27 am
Hello,
I am just working at the tabed template for jomsocial, but I am not a programmer. So maybe someone could give me a helping hand with this. :laugh:

I have made the tabs and integrated them. In Firefox 3.6 everything looks ok and no errors. But in IE 7 and 8 the page generates an error in the jquery-1.3.2.pack.js of jomsocial located in the assets folder.

Here is a screenshot I have made in FF 3.6
Image

And the IE8 with error
Image

and I attached the edited files I have edited in a packed!
PLS NOTICE! THIS PACKED STILL NOT WORKING! DONT USE IT! ITS JUST FOR BRAINSTORMING AND HELP.
User avatar
Senior Boarder

GK User
Wed Apr 07, 2010 8:48 pm
Ok. Here is a working version!
Just replace gk_style with this one.

NOTE! Its for the blue style (style2). For other styles simply edit colour in tabs.css located in the css folder of the style.
ATTANTION: USE AT OWN RISK! ALWAYS MAKE BACKUP FROM YOUR DATA, BEVOR USE!

Normal

Superhero Tabs edited (fixed some errors with plugins)


(You can use both, but if you got errors with first pls use fixed version.)
User avatar
Senior Boarder

GK User
Thu Apr 08, 2010 4:44 am
Looks Awesome!! Thanks for sharing!!
User avatar
Fresh Boarder

GK User
Sun Apr 11, 2010 7:53 pm
Nice work !!
User avatar
Expert Boarder

GK User
Tue Apr 13, 2010 3:15 pm
I added a new version wich fixed some problems with plugins (as an example the superpoke plugin).
User avatar
Senior Boarder

GK User
Tue Jun 08, 2010 6:48 pm
Do you have the latest version of this?
User avatar
Senior Boarder

GK User
Sat Oct 23, 2010 3:57 pm
Thanks, I lost a few years off my lifespan because I couldn't get the superbad tabs to work. The tabs work but I'll have to adapt it a bit more to match my site. Thanks for working on this.
User avatar
Junior Boarder

GK User
Sat Oct 23, 2010 3:58 pm
Thanks, I lost a few years off my lifespan because I couldn't get the superbad tabs to work. The tabs work but I'll have to adapt it a bit more to match my site. Thanks for working on this.
User avatar
Junior Boarder

GK User
Mon Dec 26, 2011 4:55 pm
It´s possible to create this tabs without JomSocial too?
I do not have a license to install JomSocial on my website.

mfg
Nick
User avatar
Fresh Boarder


cron