Use several logo's (Metropolis)
-
-
- AlanSmeets
- Jr. Rocketeer
- Posts: 38
- Thanks: 0
-
Hello,
I want to use several logo's in my Metropolis theme. Because there is tekst in my logo, I want to use an English version and a Dutch version of the logo. Beside that, I want to use a logo that is less width for mobile users. The last one is no problem.
Instead of using the template manager I tried to display the logo in a custom HTML module. But there it goes wrong. The logo has the same module position as the menu. When I use the template manager to display the logo I can use the original width of 407px. But when I use a module the size of the logo is decreased.
I changed the module positions, but then the menu decreases.
I can use a template override for the English logo, but then it is't possible to use the mobile logo.
Can someone advise me how to make a custom html module for the logo? I used the html I found when the template manager logo was used. Then there's no problem with the menu, but the logo displays lower and more to the right. I can't see the right css.
Thanks,
Alan
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
Did you try to implement tutorial for multilingual web sites I wrote in this forum? That way you could publish different logos on different language pages
www.rockettheme.com/forum/index.php?f=66...76550&rb_v=viewtopic - Check my services at: Mihha-Vision
-
-
-
- RobRuiz
- Newbie
- Posts: 5
- Thanks: 0
- freelance Web Designer/Graphic Designer
- I'm also trying to do this as well. I have a wide version of the logo I want to use for the larger screens, then a taller more narrow version of the logo I want to use on mobile. I can't figure out how to do this. I also can't figure out how to get the size of the background image to scale. I just changes the width of the div and cuts off part of the image instead of scaling the image.
-
-
-
- AlanSmeets
- Jr. Rocketeer
- Posts: 38
- Thanks: 0
-
Hello Rob,
It's easy to make different logo's for different devices. Just add class="visible-phone" or the other classes to the images.
For example a html module with
<img class="visible-phone" src="../images/logo_mobile.jpg">
<img class="visible-tablet" src="../images/logo_tablet.jpg">
and so on.
It will only display the image for the particular device.
You can find more info on the classes at: demo.rockettheme.com/joomla/metropolis/features
Hope this will help.
-
Time to create page: 0.068 seconds