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:
- The Dinosaur Jr. Flickr feed can be added via Active Theme > Extensions > FlickrRSS.
- The site RSS feed can be added either by including it in the existing custom WordPress menu or by adding it to the standard WPtouch Pro menu at Menu + Icons > General Settings > Additional Menu Items.
- An appropriate RSS icon can be assigned under Menu + Icons > Menu and Icon Setup > General Icons + Menu Setup > Pages/Custom Menu.
- The same goes for adding a link to the Dinosaur Jr. YouTube channel.
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.