Different Logo for Mobile Layout

Hey

Is it possible to include a diffrent (smaller) Logo for the mobile layout? When the page is visited on an iPhone the Logo is to big and the button for the menu skips to the next line.

Website: wnsl.biz/columba3

Thanks

Hi,
you can try set 'Logo type' option to image in 'Features section' of template settings. Then upload your image and try add to override.css

Code: Select all

#gkLogo {
width:22%;
}
#gkLogo img {
max-width:100%;
height:auto;
}


This should make your logo responsive. Remember to enable override.css option in template settings.

Hi,
you can try set 'Logo type' option to image in 'Features section' of template settings. Then upload your image and try add to override.css

Code: Select all

#gkLogo {
width:22%;
}
#gkLogo img {
max-width:100%;
height:auto;
}


This should make your logo responsive. Remember to enable override.css option in template settings.

I think this is not an option because i have 2 diffrent logo's (white for the header/blue for the menu). When i set the logo type to image i have only 1 logo right?.. Is there another way?

Thanks

Please try go to layouts/blocks/logo.php and find:

Code: Select all

<a href="<?php echo JURI::root(); ?> " id="gkLogo" class="cssLogo"><?php echo $this->API->get('logo_text', ''); ?></a>


and chamge it to:

Code: Select all

<a href="<?php echo JURI::root(); ?> " id="gkLogo" class="cssLogo <?php if($this->browser->get("tablet") == true || $this->browser->get("mobile") == true) echo ' mobileLogo'; ?>"><?php echo $this->API->get('logo_text', ''); ?></a>


Then please add to override.css

Code: Select all

#gkLogo.cssLogo.mobileLogo {
    background: url("../images/mobile_logo.png") top left no-repeat;
    height: 175px;
    width: 198px;
}


and set width and height as same as your logo dimensions. Remember to upload your image to images folder inside template folder and enable override.css option in template settings.

Please try go to layouts/blocks/logo.php and find:

Code: Select all

<a href="<?php echo JURI::root(); ?> " id="gkLogo" class="cssLogo"><?php echo $this->API->get('logo_text', ''); ?></a>


and chamge it to:

Code: Select all

<a href="<?php echo JURI::root(); ?> " id="gkLogo" class="cssLogo <?php if($this->browser->get("tablet") == true || $this->browser->get("mobile") == true) echo ' mobileLogo'; ?>"><?php echo $this->API->get('logo_text', ''); ?></a>


Then please add to override.css

Code: Select all

#gkLogo.cssLogo.mobileLogo {
    background: url("../images/mobile_logo.png") top left no-repeat;
    height: 175px;
    width: 198px;
}


and set width and height as same as your logo dimensions. Remember to upload your image to images folder inside template folder and enable override.css option in template settings.

Thanks! I will try this at the weekend.

Please try go to layouts/blocks/logo.php and find:

Code: Select all

<a href="<?php echo JURI::root(); ?> " id="gkLogo" class="cssLogo"><?php echo $this->API->get('logo_text', ''); ?></a>


and chamge it to:

Code: Select all

<a href="<?php echo JURI::root(); ?> " id="gkLogo" class="cssLogo <?php if($this->browser->get("tablet") == true || $this->browser->get("mobile") == true) echo ' mobileLogo'; ?>"><?php echo $this->API->get('logo_text', ''); ?></a>


Then please add to override.css

Code: Select all

#gkLogo.cssLogo.mobileLogo {
    background: url("../images/mobile_logo.png") top left no-repeat;
    height: 175px;
    width: 198px;
}


and set width and height as same as your logo dimensions. Remember to upload your image to images folder inside template folder and enable override.css option in template settings.

Hey i just had the time to try it and it doesn't work.. When i replace the code in the logo.php file the page doesn't load up anymore.

Any ideas?

Thanks

addition: there is no error or message showing.. the webbrowser simply stays white.

Please try set 'display_errors' option to on in your php.ini file and let me know if you have some errors.

I had the same issue where I needed a second logo for the menu, in the end it was easier to add in a altlogo which I printed out in place of the small logo.

Take a copy of the /gk_simplicity/layouts/blocks/logo.php file, call the file altlogo.php, edit the /gk_simplicity/layouts/blocks/altlogo.php file you just created and add alt before logo, you'll end up with this;

Code: Select all

<?php

// No direct access.
defined('_JEXEC') or die;
$altlogo_image = $this->API->get('altlogo_image', '');

if(($altlogo_image == '') || ($this->API->get('logo_type', '') == 'css')) {
     $altlogo_image = $this->API->URLtemplate() . '/images/altlogo.png';
} else {
     $altlogo_image = $this->API->URLbase() . $altlogo_image;
}

$altlogo_text = $this->API->get('altlogo_text', '');
$altlogo_slogan = $this->API->get('altlogo_slogan', '');

?>

<?php if ($this->API->get('altlogo_type', 'image')!=='none'): ?>
     <?php if($this->API->get('altlogo_type', 'image') == 'css') : ?>
     <a href="<?php echo JURI::root(); ?>" id="gkLogo" class="cssLogo"><?php echo $this->API->get('altlogo_text', ''); ?></a>
     <?php elseif($this->API->get('altlogo_type', 'image')=='text') : ?>
     <a href="<?php echo JURI::root(); ?>" id="gkLogo" class="text">
      <span><?php echo $this->API->get('altlogo_text', ''); ?></span>
        <small class="gkLogoSlogan"><?php echo $this->API->get('altlogo_slogan', ''); ?></small>
     </a>
     <?php elseif($this->API->get('altlogo_type', 'image')=='image') : ?>
     <a href="<?php echo JURI::root(); ?>" id="gkLogo">
        <img src="<?php echo $altlogo_image; ?>" alt="<?php echo $this->API->getPageName(); ?>" />
     </a>
     <?php endif; ?>
<?php endif; ?>

Then edit the /gk_simplicity/templateDetails.xml file and find the line containing;

Code: Select all

<field name="logo_slogan" type="text" default="" label="TPL_GK_LANG_LOGO_SLOGAN" description="TPL_GK_LANG_LOGO_SLOGAN_DESC" />

Add this after it so that you can add;

Code: Select all

            <field name="altlogo_type" type="list" default="image" label="TPL_GK_LANG_LOGO_TYPE" description="TPL_GK_LANG_LOGO_TYPE_DESC">
                                        <option value="image">TPL_GK_LANG_LOGO_TYPE_IMAGE</option>
                                        <option value="text">TPL_GK_LANG_LOGO_TYPE_TEXT</option>
                                        <option value="css">TPL_GK_LANG_LOGO_TYPE_CSS</option>
                                        <option value="none">TPL_GK_LANG_LOGO_TYPE_NONE</option>
                                </field>
                                <field name="altlogo_image" type="media" default="" label="TPL_GK_LANG_LOGO_IMAGE" description="TPL_GK_LANG_LOGO_IMAGE_DESC" />
                                <field name="altlogo_text" type="text" default="" label="TPL_GK_LANG_LOGO_TEXT" description="TPL_GK_LANG_LOGO_TEXT_DESC" />
                                <field name="altlogo_slogan" type="text" default="" label="TPL_GK_LANG_LOGO_SLOGAN" description="TPL_GK_LANG_LOGO_SLOGAN_DESC" />

That will allow you to specify an alternate logo in the administration section, just below the logo details, to make it neater you can add in different labels.

Then adjust your /gk_simplicity/layouts/default.php and replace;

Code: Select all

<?php $this->layout->loadBlock('logo'); ?>

With

Code: Select all

<?php $this->layout->loadBlock('altlogo'); ?>

Anywhere in the template where you want to print out your alternate logo in place of your primary logo.

I had to do this as my header image was black whereas my menu was white, inverted logo colours (black with transparency rather than white with transparency) was needed in the altlogo area so that the logo appeared in the menu.

I just made the css change:

#gkLogo {
width:22%;
}
#gkLogo img {
max-width:100%;
height:auto;
}

and it worked perfect... thxs much