WPtouch Pro Tips Central: dinosaurjr.com

Our “Tips Central” blog series spotlights WPtouch Pro-powered sites built and maintained by designers, developers and site owners like you. Read about other designers, developers, and site owners’ experiences with WPtouch Pro and get ideas for your own projects. Our experts also provide their recommendations for additional site enhancements using WPtouch Pro.

Site URL: www.dinosaurjr.com

Web Designer: Anthony Santarosa of Guhru Studio



License Type: 5-Pack

Guhru Studio on Twitter: @GuhruStudio

How long have you been using WPtouch Pro?

I have been using WPtouch Pro since July of 2011.

Why did you choose WPtouch Pro to power your mobile site?

I chose WPtouch Pro for its well-executed visual experience on the iPhone.

What do you like most about using WPtouch Pro?

I like WPtouch Pro for its ease of use and its well-documented support.

What improvements would you like to see included in future WPtouch Pro updates?

Nothing that I can think of. WPtouch Pro has so many features I have not used yet.

OUR TIPS CENTRAL SUGGESTIONS FOR dinosaurjr.com

Note: Links to support documentation are available exclusively to current WPtouch Pro customers who are logged into bravenewcode.com.

1. Customize menu to match desktop theme.

The mobile theme menu very nearly offers access to all the content available through the desktop theme. To complete it:

FlickrRSS Plugin Support

2. Customize the home screen icon.

The mobile theme has iOS Web-App Mode enabled but does not yet have a custom home screen icon assigned. Custom icons sit on the home screen as a branded badge. A custom home screen icon may be set at Menu + Icons > Menu and Icon Setup > General Icons + Menu Setup > Site, Theme & Bookmark.

Support Documentation: iOS Web-App Mode

Customize home screen icon

3. Add startup screens.

For similar reasons that adding a custom home screen icon is beneficial, custom startup screens can be added to the iOS Web-App experience. Startup screens may be added for a variety of screen sizes at Active Theme > iOS Web-App Mode > Startup Screens.

Support Documentation: iOS Web-App Mode

Enable Web-App startup screens

4. Center the Spotify playlists with CSS.

The page located at http://www.dinosaurjr.com/discography/ uses a custom page template that contains third-party content within iframes. The template is generally well-constructed so we have only a small adjustment to make it perfect: the Spotify playlists contained in the iframes can be centered by wrapping their iframes each in a named div (we’re calling it .spotifyiframe for this example) then applying the given CSS in the WPtouch Pro child theme located at /wp-content/wptouch-data/classic-child-1/iphone/.

.spotifyiframe {margin-left: -10px;}

or try

.spotifyiframe {margin: 0 auto !important;}

Support Documentation: Applying Custom CSS

Apply custom CSS


Are you interested in having your WPtouch Pro-powered site featured in our “Tips Central” series? Please drop us a note through our contact form to inquire.

Powered by WPtouch Mobile Suite for WordPress