This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

How to add a different logo for tablet and mobile devices?

  • Creator
    Topic
  • #3193
    k_b
    Participant

    Hi,

    I would like to display a different logo when my site is view either on a tablet or mobile device. I presume I need to add a media query to achieve this, just not sure what I need to add. Can you help please?

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #3205
    Jason Bobich
    Keymaster

    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_default and 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/

    #3353
    k_b
    Participant

    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?
    Thanks

    #3367
    Jason Bobich
    Keymaster

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

    #3693
    iphoenix
    Participant

    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');
    #3702
    Jason Bobich
    Keymaster

    @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/

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.