Adding custom styling to your mobile theme

In WPtouch Pro, custom CSS can be added via the Customizer. Access the settings in Appearance > Customize > Custom CSS.

Unlike WPtouch Pro 3.x, you will not need opening and closing style tags here. However, you are free to use them, when needed. To identify targets for customization in WPtouch Pro, please follow the directions here -  Identifying CSS targets in WPtouch Pro.

---

Adding custom styling in WPtouch Pro 3.x

---

WPtouch allows you to add your own custom styling to your mobile themes in three ways:

• Adding CSS to the Custom Code Field
  
• Adding CSS to your Child Theme's Stylesheet
  
• Targeting Devices for Custom Styling

1. The Custom Code Field

The "Custom Code" field found under Core Settings > General > Custom Code allows you to quickly and easily add snippets of HTML, CSS, and JavaScript. Styling entered here will be added to the footer of your mobile theme's code structure.  Styling entered via a the Custom Code field will be loaded with the footer of the mobile theme. Styling entered here will be loaded after any stylesheets called in the header of your mobile theme (including any child theme stylesheets) but before any custom stylesheets or styles added directly in your post/page editor. Customizations will be applied to all themes. CSS code in the "Custom Code" field must be wrapped in <style> tags:






2. Loading a Custom Stylesheet

If you wish to load a complete CSS file, you can do so by adding a <link> tag to the Custom Code field:

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css">

 

3. Adding Custom CSS Directly to a WPtouch Pro Theme

Adding custom CSS elements to a WPtouch Pro theme may be done by altering its stylesheet (style.css). To preserve the default themes for later use, we recommend copying any of the themes bundled with WPtouch Pro that you want to customize and working on those copies instead. This method of adding custom styling to your mobile theme will only affect the theme to which the stylesheet belongs.

1. Create a copy of the WPtouch Pro theme you'd like to customize. Instructions can be found in the Themes documentation.
2. Locate your copied WPtouch Pro theme's style.css file. The path to this file is displayed in the copied theme information in the WPtouch Pro Themes admin area.
3. Open the style.css file in a plain text editor or HTML editor.

   

4. Add your custom CSS to the file. Save and upload it to your server.

Targeting Devices for Custom Styling

WPtouch Pro mobile themes that include tablet support have built-in screen size detection. You may take advantage of that feature when you want to include content specifically for devices with smartphone- or tablet-sized screens.

Smartphones

To add custom styling targeted specifically for smartphones, use the ".smartphone" selector in your CSS. For example, The following will only be applied to devices with smartphone-sized screens: .smartphone #header { height: 100px;}

Tablets

To add custom styling targeted specifically for tablets, use the ".tablet" selector in your CSS. For example, The following will only be applied to devices with tablet-sized screens: .tablet #header {height: 200px;} Further, using the above, if you wanted to display images of different sizes on different devices, you might:

1. Give your image an identifier such as <img class="bigbanner" src="http://...>
2. In your CSS, tell your mobile theme when to hide "img.bigbanner". For instance, if you don't want the image to show on small-screen devices, you could add the following: .smartphone img.bigbanner {display: none;}