Results 1 to 2 of 2

Thread: Vantage Mobile Custom Theme

  1. #1
    Thread Starter
    danyz's Avatar
    Join Date
    Sep 2012
    Location
    Italy
    Posts
    187
    Thanks
    39
    Thanked 19 Times in 13 Posts

    Post 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 05:12 AM. Reason: mobile

  2. The Following User Says Thank You to danyz For This Useful Post:

    akemx (February 5th, 2013)

  3. #2
    Thread Starter
    danyz's Avatar
    Join Date
    Sep 2012
    Location
    Italy
    Posts
    187
    Thanks
    39
    Thanked 19 Times in 13 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  4. The Following User Says Thank You to danyz For This Useful Post:

    akemx (February 5th, 2013)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Vantage Mobile View
    By kjgsboyes in forum Report Vantage Bugs (Legacy)
    Replies: 7
    Last Post: March 11th, 2017, 09:16 AM
  2. Dimitris How to add a custom form - it's not working? Vantage theme
    By daniel82 in forum Report Vantage Bugs (Legacy)
    Replies: 7
    Last Post: January 17th, 2013, 08:53 AM
  3. Vantage Mobile version
    By tylery in forum Vantage General Discussion (Legacy)
    Replies: 32
    Last Post: October 26th, 2012, 04:52 AM