FutureLED Posted December 19, 2012 Share Posted December 19, 2012 (edited) Does anyone know how to have a seperate logo for mobile theme? The logo on the site in question runs full width of the page but in mobile its squashed up to the left hand side, you can see what I mean here if you view through a mobile device www.mgplant.com/yard Any assistance would be appreciated. Edited December 19, 2012 by Wesellbulbs (see edit history) Link to comment Share on other sites More sharing options...
acaiberrykorea Posted January 4, 2013 Share Posted January 4, 2013 I found an inelegant solution to the problem, but it works. You need to change 2 files. 1- If "default" is still the theme you are using, it will be located at /themes/default/mobile/header.tpl, on line 68, you will have part of the html being generated that looks something like this: ... <img src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" ... you need to change the {$logo_url} for a url of an image you want to use on your mobile site. for example: ... <img src="/img/logo_mobile.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" ... 2- Changing the image like this may cause issue with the mobile version of the css. The file where the sizes of the image are define located at /themes/default/mobile/css/jqm-docs.css. On lines 22 and 23 you have #jqm-homeheader img { width: 235px; } img { max-width: 100%; } that's what you need to adjust if the image still looks a little weird after you replace it. I know that the logo_url variable seems to be adding something to the querystring of the image based on the time (to prevent clientside caching issues I imagine?) so if someone has a better way of solving this, please tell us. Link to comment Share on other sites More sharing options...
idsdi Posted September 12, 2013 Share Posted September 12, 2013 I have adapted the solution slightly to be a little more elegant. I simply edited the themes/default/mobile/css/jqm-docs.css file and changed the img{} definition to the following #jqm-homeheader img { width: 235px; }/*img { max-width: 100%; } */img {max-width: 100%;max-height: 100%;width: auto;height: auto;} Note: I didn't need to change the #jqm-homeheader img CSS definition. This change means that the CSS respects the aspect ratio of the image when resizing... Works nicely and resizes well when rotating phone etc. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now