×
Support Offline :
Mon - Fri / 08:00am - 05:00pm (GMT +7)
Your Time:
Our Time:
Forum
JUX Member Forum - Restricted to Members Only
JUX Templates
JUX Galiana
Logo for small screens
Logo for small screens
Less
More
Posts: 11
Thank you received: 0
8 years 11 months ago #10204
by Bruno Ortolani
Hi,
enabling the Small Logo Option within the Theme Tab in Template manager has no effect.
Image logo does not change on low-res screens.
Please refer to the attachments where you see:
default logo (large screens - one line)
small screens logo /divided in two lines)
rendering on small screens (should be the second logo, but is not!)
Any suggestion?
Thanks,
Bruno
Please Log in or Create an account to join the conversation.
Less
More
Posts: 11
Thank you received: 0
8 years 11 months ago #10206
by Bruno Ortolani
OK, solved.
It was not too difficult:
For those who might be interested:
1) open header.php and make sure you load the additional small image at the beginning.
$logoimage_sm = $logotype == 'image' ? $this->params->get('logoimage_sm', 'templates/' . T3_TEMPLATE . '/images/logo.png') : '';
2) Search for the section where the logo img is displayed and add two lines for the second alternative logo. Assign anothe class to its style, for instance logo-img-sm:
<!-- LOGO -->
<div class="col-xs-12 <?php echo $logosize ?> logo">
<div class="logo-<?php echo $logotype ?>">
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image'): ?>
<img class="logo-img" src="<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image'): ?>
<img class="logo-img-sm" src="<?php echo JURI::base(true) . '/' . $logoimage_sm ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan"><?php echo $slogan ?></small>
</div>
</div>
<!-- //LOGO -->
3) Add two lines to custom.css to change the display property according to screen size:
@media (min-width: 480px) {
.logo-img-sm {
display: none;
}
}
@media (max-width: 479px) {
.logo-img {
display: none;
}
}
Done!
Please Log in or Create an account to join the conversation.
Less
More
Posts: 330
Karma: 9
Thank you received: 31
Forum
JUX Member Forum - Restricted to Members Only
JUX Templates
JUX Galiana
Logo for small screens
Time to create page: 0.046 seconds