How to set the jomsocial like in the demo

Hello,

Thank you for providing us this good template. I've already purchased the jomsocial component, then trying to find proper template for this component, then I landed on your template http://demo.gavick.com/joomla16/nov2011/ I'm falling in love to this template, that's why I subscribe to your club.

I downloaded and installed your template, but my jomsocial component still has a default style, then I downloaded and installed your quickstart and install the jomsocial, but it still the same like the previous one. I don't know how to set the jomsocial like in your demo http://demo.gavick.com/joomla16/nov2011/

Please Help.
Sam

Please download "gk_music_rest_files_J!17.zip" from Music Download page.

1. Extract the file and you end up with following folder structure.

Code: Select all

jomsocial_2.6.1_theme
jomsocial_2.6_theme
jomsocial_theme
modules
plugins
source


Each Jomsocial theme above contains a folder called "gk_style".
2. Depending on your jomsocial version copy "gk_style" to below folder in your website.

Code: Select all

components/com_community/templates/


3. Now you will see following templates in your Jomsocial Templates folder. See step 2.

Code: Select all

blackout
blueface
bubble
default
gk_style


4. Now go to Joomla admin > Components > Jomsocial > Templates.
You will see "gk_style" in the list. Tick on checkbox in front of "gk_style" and on top right click on default.

Now your template is set, we need to add font selectors so it can get the demo look like font.
5. Go to Joomla Admin > Extensions > Template Manager and select "gk_music_default". This will bring template settings page for our Music template.

6. From Settings look for "Fonts" tab.

7. In Header Selectors make sure following is in there , if its missing add them to the list.

Code: Select all

#gkButtons div a,
.button, button,
button.button,
.pagenav-next a,
.pagenav-prev a,
.k2ReadMore,
#gkHeader ul.gkTabs li,
.gkIsWrapper-gk_music .gkIsSlide h3 a,
h1#gkLogo.text,
#gkBottomWrap .box > div > h3.header, #gkBottomWrap .box_menu > div > h3.header, #gkBottomWrap .box_text > div > h3.header,
.nspArt h4.nspHeader,

#community-wrap .profile-details .label,
#community-wrap .cProfile-About h4,
#community-wrap .cFeed-item .newsfeed-content-actor,
.cFeed-item .newsfeed-content-actor,
#community-wrap .group-info .cparam,
#community-wrap .event-info .cparam,
#community-wrap .ctitle,
#community-wrap .jsDetail .small a,
.custom_plupload_buttons a,
.plupload_buttons a,
#cWindow #cWindowAction .button


8. Now same fonts tab add below to other selectors section so it looks like below.

Code: Select all

h1,
h2,
#gkMainMenu > div > ul > li > a,
.box h3.header,
.box_menu h3.header,
.box_text h3.header,
.itemHeader .itemTitle, .genericItemTitle, .catItemHeader .catItemTitle,
.ribbonEl,
.gkIsWrapper-gk_music .gkIsTitleBlock,
#gkMainMenu > div > ul div.childcontent .group-title .menu-title,
dl#tabs dt h3,
div#sliders div.panel h3.title,
div#article-index h3,
.gkPopupWrap h3,
p.numblocks span,


#community-wrap h1,
#community-wrap h2,
#community-wrap h3,
#community-wrap h4,
body #community-wrap div.greybox a#joinButton


Save and Close. All should fine now.

See you around...

Hello Norman,

Thank you very much for your fast response, and not everything has been okay. But, I'm so curious what is the different between jomsocial_2.6.1_theme, jomsocial_2.6_theme, jomsocial_theme ? is it different version, or kind of changelog?

Thanks

They are Jomsocial component versions. So style has been made compatible for those versions as Jomsocial component changes we have to keep up with changes as well.

If you are having problem setting up your style I can do that for you if you can send me admin access and ftp access to my email normanuk [at] live.co.uk

Please include this topic link in your email.

See you around...