Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

Show a different logo for mobile devices

+4 votes
72 views
asked Jan 30 in Q2A Core by craigg
Im using the snowflat theme.  Is there a way to show a different logo if users are viewing on a cell phone? Thanks.

1 Answer

+2 votes
answered Jan 30 by pupi1985
selected Feb 10 by craigg
 
Best answer

The procedure is simple. The thing is that the HTML that contains the image link is output by the core (ouch!). This means that you have to override and even rewrite that HTML in the theme. These are the steps:

1. Edit the qa-theme/SnowFlat/qa-theme.php file

2. Add/Merge the following function:

public function initialize() {
    if (qa_opt('logo_show') && qa_is_mobile_probably()) {
        $logourl = 'http://yoursite.com/mobile-image.png';
        $logowidth = 20;
        $logoheight = 20;

        $this->content['logo'] = '<a href="' . qa_path_html('') . '" class="qa-logo-link" title="' . qa_html(qa_opt('site_title')) . '">' .
            '<img src="' . qa_html(is_numeric(strpos($logourl, '://')) ? $logourl : qa_path_to_root() . $logourl) . '"' .
            ($logowidth ? (' width="' . $logowidth . '"') : '') . ($logoheight ? (' height="' . $logoheight . '"') : '') .
            ' border="0" alt="' . qa_html(qa_opt('site_title')) . '"/></a>';
    }
}

3. Edit the $logourl, $logowidth and $logoheight variables according to your needs.

commented Feb 10 by craigg
I ended up getting the logo to fit ok without having to edit the code so i never tried your code. Thank you for providing it though, im sure it will benefit others
...