How to customize WPTouch Pro for XO

Customizing your WPTouch Pro skin is similar to customizing your XO all together, In fact, from an editing and design point of view, be prepared to some work! To display your Mobile XO on multiple platforms of the mobile web, you need to take into account the different screen resolutions and of course screen sizes, which means that you may have to load different versions of your graphics and images.

XO Mobile Default Skin

For the purpose of the XO Blog Mobile version, I have thought about sticking to my preferred design colors and fonts: red and gray scale as well as Helvetica for easy reading.

As you can see, from the above blog home, I have taken out backgrounds, round corners, paddings and margins to just separate posts by a dotted line. Header size, icons and post thumbnails have been increased in size for a better surf experience.

The menu page underwent the same cure:

As you know, I like it bold and minimalist and I guess it’s pretty much what you get here.

The same style you find on pages, such as the author page which includes the contact form:

For your inspiration, here are the custom styles used:

/*WPTouch Pro Style for Semiomantics XO Mobile
Author: Yorgo Nestoridis
Style URL: http://semiomantics.com/xo/xo/xo-mobile-them…th-wptouch-pro
Designed for Semiomantics XO Blog at http://semiomantics.com/xo
tags:mobile theme for wordpress, wordpress mobile, xo, mobile, semiomantics xo.
Date: June 29, 2011
*/
.post .thumbnail-wrap {position: relative;float: left;display: block; height: 90px;width: 120px;margin-right: 8px;}
.post img.attachment-post-thumbnail {width: 120px;height: 90px;border:2px #FFF;}
body.wptouch-pro {background:#fff;}
.clean-white a#logo-title {color:#000000 !important; text-shaddow:none !important;text-shadow:none !important;font-variant:small-caps;font-size:24px;font-style:bold;}
.clean-white #header {background:#FFFFFF;color:#000;height:70px;border-bottom:3px double #000;}
.clean-white a#header-menu-toggle {background: #D40000;width:40px;height:40px;}
.clean-white #tab-bar {background:#ffffff;border-top:3px double #000;}
img#logo-icon {width:57px;height:57px;}
#main-menu{margin-top:18px;}
.post {padding:0px !important;margin:1px 3px 0 3px;border-bottom: 1px dotted #222222;border-top:0 !important;!important;border-left:0 !important;}
.post h2, .post h2 a {font-weight:bold;}
#content{margin-top:9px;}
a#logo-title {padding-top:22px;}
a.read-entry {background:#d40000;color:#FFFFFF;margin-bottom:5px;}
.post.page-title-area img{width:114px;height:114px;}
#main-menu ul li img {width:48px;height:48px;}
.clean-white #main-menu ul li a {background:none;color:#111111;}
.rounded-corners-8px {border-radius:0;}
a.read-entry {margin-left:10px;}