mobile-mode-skinning [Jcink.com Wiki]

JFH > Mobile-Mode > Skinning

The mobile version of your forum is designed with a completely new HTML template built from the ground-up and optimized for use on mobile phones. However, it's also been designed to be backward-compatible as much as possible with desktop stylesheets. To accomplish this, the template contains new and old elements. This means that your current skin should automatically translate to a mobile style without much work.

However, you may find cases where a highly customized skin will require tweaking. The following material will help you to customize each part of the mobile mode template.

CSS / Stylesheet Guide

These images were taken on an iPhone with Safari.

Mobile Mode
Board index - top (header and forums) In-forum area (topics and posts) Mobile links (menu/navbar)
Messenger (inbox) Posting in forums/topics Viewing Profile
Topic view Pagination (in-forum, in-topic, etc) User CP (index)
UserCP (options example) Attachments

Stylesheet Elements

These are mobile-specific CSS elements:

#mobile

This id encompasses the entire mobile mode template, as seen in the screenshot. This means that almost any element is tweakable specific to mobile mode by simply doing #mobile (class) { (styling) }. If you wanted to make text size of .row4 change ONLY on the mobile template, a real example would be:

#mobile .row4 { font-size: 12px; }

Remember this identifier and use it for your adjustments when needed.

.touch-nav

This is the navigation class; each row in the [menu] has it. This is predefined in our print with some padding to make it easy to touch on the phone.

.touch-area

This is used throughout the entire mobile mode. Similar to touch-nav it's used on the board index, topic view, messenger, and many other areas where the main content can be clicked/touched. It coves the entire cell from end to end.

.touch-area-text

This controls the text in the touch-area cell.

.post-authorbar

In-topic, each post has a header with the author name and date in it. That's the authorbar, and this is its class.

.post-username

In-topic, each post has a header and post-username is a span that encompasses only the name/avatar.

.post-date

In-topic, each post has the date shown to the right of the top bar. This span encompasses that text.

.mobile-arrow

The little arrow at the right of each cell is wrapped in this class, it controls the “hitbox” of the arrow and positioning.

Stylesheet Optimization

While you may find your current skin works fine, here are a few things you can do to make the mobile experience better.

By default, mobile mode takes whatever pagination CSS you have defined in your stylesheet. If your skin does not have any, then it simply displays text links (Pages: 1,2,3, etc). This works, but you can make it look nicer by putting in CSS for your pages. This not only puffs up the padding, making it easier to touch on the phone, but will also make it look nicer.

In the example screenshot of pagination in the mobile mode styelsheet guide, the skin has this CSS in its desktop CSS. You can copy and paste it into your stylesheet and adjust the colors and design as you see fit:

/*******************************
 Pagination e.g. [1],2,3 ...
*******************************/

.pagination .pagination_current, .pagination a {
     padding: 2px 5px;
}

.pagination a:link, .pagination a:visited, .pagination a:active {
     border: 1px solid #800000;
     border-radius:3px;
     background-color:#740300;
     padding-left:6px;
     padding-right:6px;
     color:#ffffff;
     text-decoration:none;
     box-shadow: 0pt 2px 3px rgba(0, 0, 0, 0.4);
}

.pagination a:hover {
     background: #EFEEEE;
     text-decoration: none;
     color:#000000;
     box-shadow: 0pt 2px 3px rgba(0, 0, 0, 0.4);
     background-image:url("http://jcink.com/wrtheme/titlemedium.png"); 
}

.pagination .pagination_current {
     background: none repeat scroll 0% 0% #FFFFFF;
     border: 1px solid #545454;
     border-radius:3px;
     padding-left:6px;
     padding-right:6px;
     background-image:url("http://jcink.com/wrtheme/titlemedium.png"); 
}

.pagination_first, .pagination_last, .pagination_page {
     background: none repeat scroll 0% 0% #740300;
     border: 1px solid #800000;
}

.pagination_pagetxt {
    display:none;
}

If you only want this to show up on mobile mode, you can designate #mobile as well in front of each - but having styled pagination for your desktop is a nice addition to any skin!

Macros & Image Maps

Macros are automatically resized by mobile mode to fit the touch-areas. This includes the board index macros, as well as the topic index ones. Unfortunately if the skin you're using has designated an image map for its skin, your macros may over-run onto the text. The only way to fix this is to adjust your CSS for the image map and assign new macros specific to mobile mode, or get rid of it and replace it with individual images.

Large Text

Some text may simply be too large. An example case is a large .maintitle text. This can be fixed by simply applying CSS such as:

#mobile .maintitle { font-size:12px; }

. You can do the same with .touch-area-text or even .touch-area for a full text size adjustment.

Touch Icons

Some phones can display a custom touch logo/icon on the home screen when someone adds a website to it. For a preview, click here.

If you'd like to do the same, create a new macro called MOBILE_LOGO, and use the following HTML to insert an icon.

<link rel="apple-touch-icon" href="your icon URL" sizes="114x114">
<link rel="apple-touch-icon-precomposed" href="your icon URL">

The two link tags do different things; the first one, apple-touch-icon will tell all iOS mobile devices to add a shine/gloss to the logo automatically. Apple-touch-icon-precomposed will leave it alone, but if you use the first one before the second, apple-touch-icon takes precedence. You should ALWAYS apple-touch-icon-precomposed since Android phones and many others ignore the regular apple-touch-icon.

You can also use the MOBILE_LOGO macro to add in some image tags for a custom logo that appears on mobile-mode only.

 
mobile-mode-skinning.txt · Last modified: 2012/02/10 22:57 by jcink