How to add a different logo for tablet and mobile devices?
-
Topic
-
-
Replies
-
Hello,
I apologize, but there is no feature in the theme to do this. This is a customization you’d need to make.
The theme uses an inline image for the logo, opposed to showing one with CSS, and so doing anything with your own @media query will not be simple because we’re not talking about changing background image applied with CSS. In other words, you’d need another inline image there with the logo that you could show/hide along with the main one.
One option might be to have two logos wrapped with the responsive utility classes available. — http://dev.themeblvd.com/tutorial/responsive-utility-classes/ — This would involve creating your own logo function.
You can find the current one here in the theme: /framework/frontend/functions/display.php
http://dev.themeblvd.com/tutorial/editing-framework-functions/
This function is called
themeblvd_header_logo_defaultand is currently hooked to “themeblvd_header_logo” if you wanted to hook in your own function opposed to editing with the method above.http://dev.themeblvd.com/tutorial/actions/
http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/
Hi,
Not sure what you mean about how to wrap 2 logos with the responsive utility classes? Would I need to create a function that replaces the main logo function: themeblvd_header_logo_default
when the site hits a media query for example?
ThanksNot sure what you mean about how to wrap 2 logos with the responsive utility classes?
They’re just classes that you could use in your markup that are already setup with @media queries to display in different viewport scenarios. This would be a general example of how you might use these responsive utility classes.
<div class="hide_on_tablet_and_mobile"> show something on desktop only... </div> <div class="hide_on_standard"> Show something mobile/tablets only ... </div>Or maybe…
<a href="" class="hide_on_tablet_and_mobile"><img src="logo-1.png" /></a> <a href="" class="hide_on_standard"><img src="logo-2.png" /></a>
Would I need to create a function that replaces the main logo function: themeblvd_header_logo_default
when the site hits a media query for example?If you took this approach you’d simply be replacing the entire function (however you choose to do that). In this instance, we’re talking about replacing a PHP function, so this part of the process doesn’t have anything to do with CSS media queries. That would come into play with your content that you’re displaying with your function, but if you’re using responsive utility classes, that’s already done for you.
If you want to show a different icon on an iPad, consider adding mobile favicons to your functions.php in your child theme:
/*-------------------------------------------------------*/ /* add a favicon to your site /*-------------------------------------------------------*/ function apple_touch_icon() { if(strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) { echo '' . "n"; } if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { echo '' . "n"; } } add_action('wp_head', 'apple_touch_icon');@iphoenix He’s asking about the main site logo, not the favicon. But it terms of the favicon/touch icons, it might not make sense to do it in that way because Apple allows you to add certain meta to the
<head>that will only be used for certain devices. So going through the process of cehcking the user-agent isn’t really necessary.I actually have a plugin that does all this for you if you’re interested to use it or check it out.
http://wordpress.org/extend/plugins/theme-blvd-favicon/screenshots/
- You must be logged in to reply to this topic.