Logo manipulation issue!

Thanks Teit.

I added this code in template.ccs can effectively manipulate the height of the logo


/* logo styling */
#gk-mainnav {margin-left: 65px}
h1.logo {position:absolute;top:8px;}
div.logo-text { float:left; padding:0 10px 0 0; background:#f4f2ef; }
h1.logo { width:220px; height:80px; background:#f4f2ef url('../images/logo.png') no-repeat 0 0; padding:0 10px 0 0; }
h1.logo>a { text-indent:-999em; display:block; }

#gk-nav {
position:relative;
}

h1.logo {
position:absolute;
width:300px;
height:115px;
top:-64px;
left:0px;
}

#gk-mainnav {
margin-left:305px;
}

This works great for me, except in IE7. Any ideas?

http://lambrick.com/place/aesoph

Try adding this code on ie.css

Code: Select all

#gk-mainnav {width:770px}
h1.logo {margin-top: 32px}
div.head {margin-top: 57px}


Cheers

Dear Seichinha (Paulo?),

Perfect. Great solution, very quick support!

Simon

Su-weet!!! I was about to post, but searched and found your entry. I also needed to increase the size of the logo, but it was too low on the page. I added the following code to the end of my "template.css" file and made some negative adjustments and it worked!!! I left off the "#gk-mainnav {width:770px}" it threw my menu off. For MY particular logo 280 x 80, the code below worked.


FIRST: Change the code on line 75 or so in the "template.css" file to reflect the new logo dimensions:
{h1.logo { width:280px; height:80px; background:#f4f2ef url('../images/logo.png') no-repeat 0 0; padding:0; }

SECOND: Add this to the bottom of the "template.css" file
h1.logo {margin-top: -50px}
div.head {margin-top: -50px}

Depending on the width and dimension, you'll have to play with the padding to fit your layout.

Thanks for the post!

ALSO - Don't forget to EDIT the "h1.logo" width & height settings for the "Handheld" & "iPhone" .css files so that the logo displays properly on phones.

Thanks zanebaxter, your code is a winner!

I downloaded the latest version at this moment and I have difficulty really in customizing the logo.

teitbite I email you an access to my test site, please help me. Thanks a lot.

Regards,
Joel

help please....

Hi

How do You want to have it ? This logo is too big for this design, but please add this code to override.css (remember to enable using this file in template's configuration).

Code: Select all

h1.logo {
    height: 179px;
    position: absolute;
    top: -27px;
    width: 130px;
    z-index: 100;
}


Thank you very much for the great support teitbite.
I will just resize my logo to fit it in this area, at least you've given the code now and I've tested it and working well.
again, thanks.

Hi

No problem. Glad I could help.

Hello,
I have installed Corporate 2 on Joomla 1.6. The override code for logo posted here did not work for me.
I have a 164*88 logo that I need to bottom align and then have the nav bottom aligned as well, so the top of the logo aligns with the "Search" position ....

Your quick help is much appreciated.

= Madhu

Hi msaraf
Did you turn on override.css option in template settings ?

Yes,the option is on.
The code in override.css is as follows:

h1.logo {
height: 190px;
position: absolute;
top: -127px;
width: 170px;
z-index: 100;
}

and a screen shot is attached.
Caching is disabled so I dont think this is a caching issue in the override not being picked up.
Am I overriding the correct class?
Your quick help and support is much appreciated.

please show me your www and i fix it... as far as i know, h1.logo was only used in j1.5

The site is currently being developed on my "localhost" and is not accessible over www yet.
I have not made any other customizations to the template or the css yet, so it is a pretty standard install of corporate2 over joomla 1.6 (not 1.5).

Thanks
Madhu

Hi

Please try to play with the value of top param in the code You have placed inside override.css

If it's not making any difference, try clear cache or place it in other css file. For example template.css

forumScreenshot.png

I made modifications to the template.css file directly, that fixed the issue to a certain extent - the caveat being that the id to use is "gklogo" and not "logo".

I am attaching another screen shot, the issue remaining is that the navigation is not bottom aligned like the logo. I want the navigation to sit right on top of the image show, like the logoo and not be floating mid-air.

Your help is much appreciated.

= Madhu

Hi

You don't need to add that code.
This line should be enough (adjust top position as your needs):

Code: Select all

h1#gkLogo {position: absolute!important; top:50px}


Cheers

Hi

This code work ok for the logo. But now I am trying to publish on the banner1 area and the image is showing behind the logo.

Can anybody tell me where should I correct this? I am using the template version for Joomla 1.7.

If possible I would like that both banner areas appear centered on the layout, is it possible?

Thanks in advance for any help

Regards
Hermano Correia

I also have a problem whit this template in joomla 1.7 ...the menu is not ok....here is the demo site: pandadesign.ro/test2 can somebody help me pls

Hi

Can You please tell me what problem exacly You have with a menu ?

The menu position si not good...it is to up...i want to put it in the same position where is "The light of The World" from the logo.

Hi

You can manipulate with the height with this class:

Code: Select all

#gkMenuNav {
    margin-top: 30px;
}


Hi

You can manipulate with the height with this class:

Code: Select all

#gkMenuNav {
    margin-top: 30px;
}


It works...10q so much:)

Hi

No problem. Glad I could help.

Hi,

I have the same issue, but my template is Joomla 2.5. I try to modifies the code but is not working. What lines do I need to modify to make it to work?? I'm attaching the picture of the issue. an the lines that I modified.

IME.jpg

#gkMenu { float: left; width: auto; margin: 40px 0 0 0; height: 40px; background-color: #6C6459 }
.
.
.

h1#gkLogo a img { display: block; height: 80px; margin: 0; width:350px; top: 0; left:0; }
h1#gkLogo a.cssLogo { background: url('../images/logo.png') no-repeat 0 0; display: block; height: 80px; margin: 0; text-indent: -999em; width:350px; top: 0; left:0; z-index: 1001; }
#gkLogo { height: 80px; margin: 0; line-height: 100%; }
.
.
.
#gkLogo a { display: block; height: 80px; margin: 0; width: 350px; }

Thanks in advance for your help.

Hi

Please show me Your site.

Hi Teitbite,

The site is www.colegioimedesonora.com, right now I deactivate the modules, because the client is going to give me a feedback of the site. Let me know if you like to see the site with the modules enables.

Thanks


Regards

Hi

Yes I need this modules published to tell You what code to change.

Hi,

The modules are active now.
Thanks

Hi

Please add this code to css:

Code: Select all

#gkPageTop {
    overflow: visible;
    position: relative;
 }

#gkSearch {
    position: absolute;
    right: 0;
}


When You put that let me know, so I'll be able to see what "tools" needs.

Thx for the code and your help, it works for me. You can check the site and let me know what do you think. One more time thanks for your time.

Hi

Looks great. Glad I could help