Music State Template Logo and JomSocial Image Issues

Hi Team,

I'm having a couple of quirky little problems that I'm sure you can help me solve.

1. The first is the image logo for my site which is currently hidden behind the header. Also I need to increase the height of the header to accommodate the height of the logo. See attached image:

Header-Logo-image.jpg

2. The second issue is the size of the background image on the JomSocial home page. The image does not stretch all the way across the page and there are white margin either side. See attached image:

JomSocial-Background-image.jpg

Any help to solve these problems would be greatly appreciated. Thanks.

Todd E.

Hi

Please show me Your site.

Hi

Sorry. My mistake. An url was visible on the image. Below are css classes which will help for Your issues:

1.

Code: Select all

#gkHeaderNav #gkLogo {
    z-index: 1;
}

#gkHeaderNav {
    min-height: 100px;
}


2. This image is not page background, but just a backgrounf in content and content is restricted to 1200px. If You want to use a page background please specifie the image in a class which will looks like this:

Code: Select all

#gkBg {
    background: url(path_to_your_image) repeat scroll 0 0 #FFFFFF;
}


above code will add it to all pages where a page class suffix gkBg is specified, so You may need to add a new suffix in template settings for this page only.

Hi

Sorry. My mistake. An url was visible on the image. Below are css classes which will help for Your issues:

1.

Code: Select all

#gkHeaderNav #gkLogo {
    z-index: 1;
}

#gkHeaderNav {
    min-height: 100px;
}


Thank you, that worked great! However can you explain to me how now to add some margin at the top of the logo as there is no space above the logo?

1a. Also how can I center the menu text (Home, Artist Area etc.) so that it is horizontally centered with the logo.

2. This image is not page background, but just a backgrounf in content and content is restricted to 1200px. If You want to use a page background please specifie the image in a class which will looks like this:

Code: Select all

#gkBg {
    background: url(path_to_your_image) repeat scroll 0 0 #FFFFFF;
}


above code will add it to all pages where a page class suffix gkBg is specified, so You may need to add a new suffix in template settings for this page only.

I was not talking about the "page background image". What I meant was the JomSocial image of the people with their hands in the air! I want that image to stretch across the whole width of the page like it does on your demo site.

Here is how it looks on my site. You can see white background areas to the left and right of the imge:

http://www.signature-tunes.com/signatur ... -fans-area

How do I achieve that? Thanks.

Any help with this last problem? Thanks.

Hi

I can see the missing part. Joomsocial is set to as frontpage there, but You can just add this small code to have the same effect:

Code: Select all

#community-wrap.on-gk_musicstate { position: static; }


Hi

I can see the missing part. Joomsocial is set to as frontpage there, but You can just add this small code to have the same effect:

Code: Select all

#community-wrap.on-gk_musicstate { position: static; }


Brilliant! That worked. Thanks again!

Todd

Hi

I can see the missing part. Joomsocial is set to as frontpage there, but You can just add this small code to have the same effect:

Code: Select all

#community-wrap.on-gk_musicstate { position: static; }


Brilliant! That worked. Thanks again!

However you missed a couple of questions from my original post:

1. Could you explain to me how to add some margin above the top of the logo as there is no space above the logo and the top edge of the header?

2. Also how could I center the menu text (Home, Artist Area etc.) so that it is horizontally centered with the logo and the header as well perhaps (obviously I could adjust this with the css code if that is how it could be done). Right now there is more space below the menu links than there is above it.

HeaderLogoMenu-issues.jpg

My apologies but I’m just not that great when it comes to figuring out css modifications! Thanks.


Todd

Any help with this? Thanks.

Hi

Please do not bump Your threads. Your question is visible with the date of the last published post so every bump is pushing Your question to the end of the line and it takes more time to get to it.

Here is a code to add some margin on top of the logo:

Code: Select all

#gkLogo img {
    margin: 16px 0 0;
}


I see menu is centered horizontaly, so I can help with a vertical center. Unfortunately this needs to be made manualy by putting a margin on top same way as for logo:

Code: Select all

.gkMenu > ul {
    margin: 10px 0 0;
}


My apologies for the bump. For some reason I thought this thread was closed which I must have read somewhere.

I have mentioned a couple of other issues that I need to get fixed as well.

1. There is also a problem with the css of the "Top Users" module located nearer the bottom of the home page.

http://www.signature-tunes.com/

This is the recommended css code that I'm using for the Module Class Suffix:

Code: Select all

cMods cMods-TopMembers bigtitle normal-width

2. The drop-down menu in now higher than it should be, probably because I have made the header taller. The drop down should align with the bottom edge of the header like it does in the demo. See the attached image:

Header-Logo-Menu-Issues.jpg

Thank you.

Hi

I'm not sure if You are reading my posts now. I've answered to a margin on top of the logo and menu so it will be pushed down. I also can see a code causing dropdown to show in a wrong position and I'm not sure where is it comming from. I mean this code:

Code: Select all

.gkMenu > ul > li > a {
    height: 98px;
}


You clearly was adviced to put this code in override, but it's a wrong code and I'm asking You to remove it.


I cannot tell what is wrong with bottom module but if You want to have it configured as our demo than the easies way is to take a look into module configuration: https://www.gavick.com/documentation/jo ... iguration/ in this case I'm refering also to the module cluss suffix which is used incorrectly.

Hi

I'm not sure if You are reading my posts now. I've answered to a margin on top of the logo and menu so it will be pushed down. I also can see a code causing dropdown to show in a wrong position and I'm not sure where is it comming from. I mean this code:

Code: Select all

.gkMenu > ul > li > a {
    height: 98px;
}


You clearly was adviced to put this code in override, but it's a wrong code and I'm asking You to remove it.

I put this code in the "Custom CSS code" box which is found under the Advanced settings tab in the Template settings. Doing so has solved my problem so why should I remove it? I do not know what you mean by putting the code in "override", what is "override"? Please explain. Thanks.


I cannot tell what is wrong with bottom module but if You want to have it configured as our demo than the easies way is to take a look into module configuration: https://www.gavick.com/documentation/jo ... iguration/ in this case I'm referring also to the module class suffix which is used incorrectly.

I've looked in the documentation and I cannot see anything there that will help me to configure this module so that it looks like your demo. For a start the user points are not showing and the module is positioned too far to the left. I used the module class suffix which was recommended so if it is wrong what is the correct code to use there?

Hi

Please send me an access to Your joomla panel. I need to check why the content of the module is displayed outside the module.

Hi

Please send me an access to Your joomla panel. I need to check why the content of the module is displayed outside the module.

How do I send it, via email?

Hi

I was right about the wrong module class suffix All required looks like this: " bigtitle normal-width" also in module settings You have selected style as "none" which basically removed any module class suffix from the site.

You also do not need 2 modules to present that right now since "none" style was also removing a title of the module.

Okay but how were you able to change the wrong module class suffix on my site? It is correct now and I did not change it??!!

1. Also there are a couple of other problems concerning this module issue. For a start the "Karma Point" text is not showing under the member's name.

2. In fact the Karma Points "image" (little tear drops) are also missing from the JomSocial members pages as well. See this one for example:

http://www.signature-tunes.com/member-a ... dy/profile

At the top there is a row of links, "ABOUT ME", PHOTOS.... and then at the end there should be the "Karma Point(s)" images. They are missing.

I have definitely configured JomSocial to show points the Default Karma Point(s) as 2 so there should be something showing.

Thanks.

Hi

I just changed the suffix in module settings. The old one was almost good problem was when module was using this suffix not only for a main module layer, but also inside the module.

1&2 . Unfortunately I'm not Jomsocial expert but I believe the karma needs some additional configuration only, we only make style for jomsocial which do not interfere with functionality. So I would ask You to search for help in Jomsocial forum as they would be best in this case, but please also bring back my joomla panel access so I'll check it anyway. Maybe I'll see why it's not showing.

Hi

I just changed the suffix in module settings. The old one was almost good problem was when module was using this suffix not only for a main module layer, but also inside the module.

1&2 . Unfortunately I'm not Jomsocial expert but I believe the karma needs some additional configuration only, we only make style for jomsocial which do not interfere with functionality. So I would ask You to search for help in Jomsocial forum as they would be best in this case, but please also bring back my joomla panel access so I'll check it anyway. Maybe I'll see why it's not showing.

You still have access so you should be able to login. Let me know if there is a problem.

Thanks.

I have managed to find the solution to the Karma Points problem. It was only that the points images were .png files and they should have been .gif files. I changed them to .gif using Photoshop and all was right with the world again!

So I'm very pleased to say that I believe all of my template issues have been solved. Now I can get on with the fun part!

Thanks for all of your help.

Hi

Great to hear that