Vantage Mobile Custom Theme
Hello everybody,
yesterday I created some sort of customized mobile theme for Vantage but it works with any AppTheme theme. Actually it's very simple and nothing new, the longest part is to create your own mobile.css based on your need. You can see what I've done viewing my site on a mobile:
www.ITfind.it.
This is just a temporary solution, at least it is for me, until AppThemes releases the new responsive themes. I've tested it on my Galaxy SIII and an iPhone 5, I didn't have time to test it on other devices.
These instructions may not be new to some of you but they were to me as I'm not that expert, so feel free to give any suggestions to me and the rest of the thread followers.
Here we go:
0. First thing, make sure you have a childtheme, if not it's time to make one.
1. Copy over the wrapper.php file to your childtheme's root folder and under this line:
Code:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Paste this:
Code:
<link rel="stylesheet" media="screen and (max-device-width: 960px)" href="http://www.yousite.com/wp-content/themes/yourchildtheme/mobile.css" />
Make sure you insert your site's correct path to the new mobile.css file. What we're doing here is to "tell" the browser to load mobile.css on devices with a maximum of 960px width (you can set the width to what you want).
2. Create your new mobile.css file. Make sure you give an !important to the css properties you want to overwrite. To give an example, if you want a one-clumn layout you've got to put down the sidebar after the listings, so in your new mobile.css you'll have to add this:
Code:
#main {
float: none !important;
}
#sidebar {
float: none !important;
width: 100% !important;
}
And if you don't want hide some widgets or other parts of the site you just give it a "display: none;". Let me give you another example, I want to hide the Tag Cloud widget and the Popular Listing Categories widget:
Code:
.widget_tag_cloud {
display:none;
}
.widget_popular_listing_categories {
display:none;
}
3. Copy over the mobile.css file to your childtheme's root folder.
We're done. All the rest is up to you and your css skills!
Last edited by danyz; January 21st, 2013 at 06:12 AM.
Reason: mobile
Reply With Quote
You must be an AppThemes customer and logged in to view this response.