I've got a problem with the size of the logo

Hi Gavick's team and everybody here !
I just installed the Template Pixellove, with the quickstart, and everything went well so far.
I've got a problem with the size of the logo : I'd like it to be much bigger. But when I change its size (by replacing it in the good directory (both dark and light), it doesn't do anything. I also try to change the CSS, but I'm not really good at it.
My steps were :
- make the logo height 80px (and put it in the directories)
- change the template.css
No effects. So I figured it was because of the top_bg.jpg. I changed its size too with 90px. Tried to change it in the CSS but ... still no effects. The logo is way too big for the top of the page. It goes till the search bar !
If somebody could help me, I'm kinda stuck here. Please give me all the necessaries steps ...
Many thanks,
Bastien

I am interested in the same. This should really be explained somewhere prominently as it is one of the first thing you would do with a new site. I'll keep looking and post back if I find a solution.

I think I found where to look. You need to change the 56px values in menu.css to something bigger. I did 80px:

Code: Select all

#gkNav { height: 80px; line-height: 80px; }
#gkNav-wrap { position: relative; z-index: 100000; }
#gkNav ul.level0 > li { height:80px; line-height: 80px; }
#gkNav ul.level0 > li > a { display:block; height:80px; line-height:80px; padding:0 20px; font-size:20px; }

Well, turns out it is not quite the solution. See http://188.65.115.129/~critica/ covering up the menu and module on homepage
I am giving up and hope a developer can have a look at this.
Forum support still seems to be very poor over here so let's hope my ticket gets the attention.

hello, I have same problem. any solution?

Looking for a solution as well! Anyone from the Gavick Team have any comments?
I have a 200 x 110 logo I need to drop in. Please help!

Support is shocking. I even posted a ticket with a link to this thread. No reply. Will try again soon.

Looking for a solution as well! Anyone from the Gavick Team have any comments?
I have a 200 x 110 logo I need to drop in. Please help!

Hi

Sorry. Post was created when forum was in beta version with some bugs so we were not informed about this ticket. Please use this code for this issue:

Code: Select all

#gkNav {
    margin-top: -90px;
}

#mainPage {
    margin-top: 100px;
}


Use below overrides in Template Settings > Advanced > Custom CSS code or enable CSS override from there and edit file \templates\gk_pixellove\css\override.css

Code: Select all

/* Push down content section relative to your menu and logo */
#gkMainbodyWrap { margin-top: 110px; }
/* Increase menu height */
#gkNav { height: 100px; line-height: 100px; }
/* Increase logo height */
h1#gkLogo a.cssLogo { height: 100px; }


Logo needs to be 100px compare my example above. Default size : 200 x 56
/templates/gk_pixellove/images/dark/logo.png
Nav/menu background image needs to be 100px compare to my example above.
/templates/gk_pixellove/images/dark/top_bg.jpg Default size 200 x 56.

Experiment with above figures depending on your logo height.

See you around...

Edit:
Complain of support and they get 2 mods replying

Try whichever solution suits you guys...

Thanks guys, I appreciate the replies. I first tried the second method and that works, but only in Firefox. I then undid those changes and put

Code: Select all

#gkNav {
    margin-top: -90px;
}

#mainPage {
    margin-top: 100px;
}

in the override.css file. That seems to work nicely in all browsers. Great!

Hi

No problem, glad I could help.

Use below overrides in Template Settings > Advanced > Custom CSS code or enable CSS override from there and edit file \templates\gk_pixellove\css\override.css

Code: Select all

/* Push down content section relative to your menu and logo */
#gkMainbodyWrap { margin-top: 110px; }
/* Increase menu height */
#gkNav { height: 100px; line-height: 100px; }
/* Increase logo height */
h1#gkLogo a.cssLogo { height: 100px; }


Logo needs to be 100px compare my example above. Default size : 200 x 56
/templates/gk_pixellove/images/dark/logo.png
Nav/menu background image needs to be 100px compare to my example above.
/templates/gk_pixellove/images/dark/top_bg.jpg Default size 200 x 56.

Experiment with above figures depending on your logo height.

See you around...

Edit:
Complain of support and they get 2 mods replying

Try whichever solution suits you guys...

I tried this in Joomla 2.5 template and nothing happens.

Hi

Sorry. Post was created when forum was in beta version with some bugs so we were not informed about this ticket. Please use this code for this issue:

Code: Select all

#gkNav {
    margin-top: -90px;
}

#mainPage {
    margin-top: 100px;
}


I'm having the most difficult time with this. My image is roughly 200 pixels in height and I can't get it to look right using this method. I can get the nav area to move around but I cannot get the logo to stay towards the top of the page.

Hi

Please show me Your site. I'll tell You the exact code.

Thanks, I'm in the process of moving it from development side to the actual domain that will be in use. As soon as I have it up, I'll repost here. Thank you.

Hi

Ok. I'll be waiting

I ended up just scraping the idea of using the logo location. It wasn't going to look right in such a small area so I figured I'll just use the banner location and make one there.

Hi

It doesn't look nice because I was waiting to see it so I could give You a code to fix it. But I'm glad You've made it on Your own

Hi Teitbite, I'm ready to move forward with actually trying to utilize the normal logo area. For now I'm going to stick with just text or maybe a simple graphic that will fit, but can you help me to atleast get the text aligned properly so its centered over the left menu width ?

http://mosthatedmusic.com/index.php

Thanks,
Dave

Hi

Please try use this code:

Code: Select all

#gkMenuNav {
    float: none;
}


and than You need to replaced an order of logo and menu in /layouts/blocks/nav.php and show it to me than.

Here is the result

http://mosthatedmusic.com/index.php/

Hi

But please replace the order of menu and logo. Simply edit /layouts/blocks/nav.php (or logo.php) and instead of:

Code: Select all

<div id="gkMenuNav"></div>
<h1 id="gkLogo" class="text"></h1>


make

Code: Select all

<h1 id="gkLogo" class="text"></h1>
<div id="gkMenuNav"></div>


Hi

But please replace the order of menu and logo. Simply edit /layouts/blocks/nav.php (or logo.php) and instead of:

Code: Select all

<div id="gkMenuNav"></div>
<h1 id="gkLogo" class="text"></h1>


[/code]

This exact line is not in nav.php and there is no logo.php

Hi

Please tell me what template version are You using exacly.

Gavern v.2.10

Hi

Gavern is a framework which was used to build the template. Please tell me which Pixellove version do You have ?

I just updated to the new version 2.11

Hi

Ok. I'm looking at the code right now. Take a look at the whole code, the one I've used was an example with layers names. Acctualy code looks like that:

Code: Select all

<?php if($this->getParam('menu_show', 1)) : ?>
    <div id="gkMenuNav">
        <div id="gkMenu">
        <?php
           $this->menu->loadMenu($this->getParam('menu_name','mainmenu'));
          $this->menu->genMenu($this->getParam('startlevel', 0), $this->getParam('endlevel',-1));
        ?>
        </div>
    </div>
<?php endif; ?>

<?php if ($this->getParam('logo_type', 'image')!=='none'): ?>
     <?php if($this->getParam('logo_type', 'image') == 'css') : ?>
     <h1 id="gkLogo">
          <a href="./" class="cssLogo"></a>
     </h1>
     <?php elseif($this->getParam('logo_type', 'image')=='text') : ?>
     <h1 id="gkLogo" class="text">
         <a href="./">
          <?php if($this->getParam('logo_text', '') != '') : ?><span class="gkLogoText"><?php echo $this->getParam('logo_text', ''); ?></span><?php endif; ?>
          <?php if($this->getParam('logo_slogan', '') != '') : ?><span class="gkLogoSlogan"><?php echo $this->getParam('logo_slogan', ''); ?></span><?php endif; ?>
         </a>
     </h1>
    <?php elseif($this->getParam('logo_type', 'image')=='image') : ?>
    <h1 id="gkLogo">
          <a href="./">
          <img src="<?php echo $logo_image; ?>" alt="<?php echo $this->getPageName(); ?>" />
          </a>
     </h1>
     <?php endif; ?>
<?php endif; ?>


what You need to have is:

Code: Select all


<?php if ($this->getParam('logo_type', 'image')!=='none'): ?>
     <?php if($this->getParam('logo_type', 'image') == 'css') : ?>
     <h1 id="gkLogo">
          <a href="./" class="cssLogo"></a>
     </h1>
     <?php elseif($this->getParam('logo_type', 'image')=='text') : ?>
     <h1 id="gkLogo" class="text">
         <a href="./">
          <?php if($this->getParam('logo_text', '') != '') : ?><span class="gkLogoText"><?php echo $this->getParam('logo_text', ''); ?></span><?php endif; ?>
          <?php if($this->getParam('logo_slogan', '') != '') : ?><span class="gkLogoSlogan"><?php echo $this->getParam('logo_slogan', ''); ?></span><?php endif; ?>
         </a>
     </h1>
    <?php elseif($this->getParam('logo_type', 'image')=='image') : ?>
    <h1 id="gkLogo">
          <a href="./">
          <img src="<?php echo $logo_image; ?>" alt="<?php echo $this->getPageName(); ?>" />
          </a>
     </h1>
     <?php endif; ?>
<?php endif; ?>

<?php if($this->getParam('menu_show', 1)) : ?>
    <div id="gkMenuNav">
        <div id="gkMenu">
        <?php
           $this->menu->loadMenu($this->getParam('menu_name','mainmenu'));
          $this->menu->genMenu($this->getParam('startlevel', 0), $this->getParam('endlevel',-1));
        ?>
        </div>
    </div>
<?php endif; ?>


I replaced it all and it moved everything else (rest of the site) to the far right.

http://mosthatedmusic.com/index.php

Hi

Ok. Please send me FTP access to Your site. I'll do this for You.

Thanks so much, I PM'd you. Once you see what I did, can you try to tell me what I was doing wrong (not sure I'll understand )

Just wanted to see if you got the PM ?

Hi

Ok. Please check. I think the problem is cache, because I cannot make any html changes. So I had to make it using only css. Acctualy this code:

Code: Select all

div.gk-menu,
div.gk-menu > ul.level0 {
    height: 56px;
}

#gkMenuNav {
    margin: 0;
}

#gkLogo.text {
    float: none;
    height: 47px;
    margin: 0 auto;
    width: 202px;
}

div.gk-menu, div.gk-menu > ul.level0 {
    float: left;
}

#mainPage {
    clear: both;
}


I'm not sure what you want me to check. The text logo is at the top now, is that where it should be? I thought it was supposed to be on the left ?

Could you please revert back to the original CSS? There's a lot that is messed up now.

Thanks,
Dave

Hi

Can You please tell me how this should looks like ? I thought You wanted me to set it on top ;/

I can work with where it's at now because I'd like to eventually make it an image and that would probably look good. However, all types of css is messed up now, the spacing for paragraphs, etc are way off. Just about all spacing is way different now.

Hi

All changes reverted, but as You can see a css code I've entered it's all about menu, so no connection with paragraphs. Please show me an example and I'll check if it's not some interfference from a 3rd party extension.

The top part seems to be back to normal now but all the spacing is still messed up. Check this page:

http://mosthatedmusic.com/index.php/aritcles-by-mhm

Notice how much space there is between each line of text in paragraphs? Same with the twitter feed on the main page .... Almost all pages have that issue.

Hi

Ok. Found it. It was an unclosed </div> tag in a part of menu. Must comming from when we were trying to change the order of logo and menu. If it was me than I'm deeply sorry