Add Tablet and Mobile Logo's

[nylyon]

4.0 has a lot of very nice features, and a drawback.  I like the seamless transition between the full, tablet and phone theme's, however I optimize my Logo for computers, and when viewing on a phone causes unnecessary blank space on the right side.  Having an option for a mobile logo, and tablet logo would allow me to customize the look for non-full site access!

[Klink75]

I agree. The same option for group images / icons would be nice as well.

[不中用]

4.0 has a lot of very nice features, and a drawback.  I like the seamless transition between the full, tablet and phone theme's, however I optimize my Logo for computers, and when viewing on a phone causes unnecessary blank space on the right side.  Having an option for a mobile logo, and tablet logo would allow me to customize the look for non-full site access!

​.

You could do it with some CSS-tricks ..

Removing the logo with CSS set by IPS for tablet & phone

and use background-image in CSS  with your adjusted logos ..

You will need to move your images to the server yourself ..

All can be done in custom.css ..

 

.

[ossipetz]

you can also do this with some manual work in the logo template, go edit the theme core/front/global/logo

what I have there is:

<!-- Desktop Version -->
<div id="container" class="container ipsResponsive_hidePhone ipsResponsive_hideTablet">
    <a href='{setting="base_url"}'><img src='{resource="banner/tolkienforum-small.png" app="core" location="front"}' alt='{setting="board_name"}'></a>
	</ul>
</div>

<!-- Tablet Version -->
<div class="mobileContainerTablet ipsResponsive_hideDesktop ipsResponsive_hidePhone">
	<a href='{setting="base_url"}'><img src='{resource="banner/hobbithaus-tablet.jpg" app="core" location="front"}' alt='Tablet Logo'></a>
</div>

<!-- Phone Version -->
<div class="mobileContainerPhone ipsResponsive_hideTablet ipsResponsive_hideDesktop">
	<a href='{setting="base_url"}'><img src='{resource="banner/hobbithaus-phone.jpg" app="core" location="front"}' alt='Phone Logo'></a>
</div>

Some hints can be found in this topic too: http://community.invisionpower.com/topic/409153-different-html-code-depending-on-window-size/

You need to place the images (once you have enabled the designers mode) into <forum>/themes/<theme-id>/resources/core/front/banner
(to match the path given in {resource})