Support Online: Mon - Fri / 08:00am - 05:00pm (GMT +7)
Your Time: Our Time:

file Logo for small screens

More
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:
  1. default logo (large screens - one line)
  2. small screens logo /divided in two lines)
  3. rendering on small screens (should be the second logo, but is not!)

Any suggestion?
Thanks,
Bruno
Attachments:

Please Log in or Create an account to join the conversation.

More
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.

More
8 years 11 months ago #10213 by Sang Manh
Replied by Sang Manh on topic Logo for small screens
Hi,
Many thanks for your share.

Sang Manh

Please Log in or Create an account to join the conversation.

Moderators: Jackie
Time to create page: 0.079 seconds
Powered by Kunena Forum