Identifying targets for custom CSS

Previewing your WPtouch Pro theme in a desktop browser to identify targets for custom CSS in WPtouch Pro 4.x is easier than ever. After WPtouch Pro has been activated, use yoursite.com/?wptouch_preview_theme=enabled where "yoursite.com" is the domain of your website.

Load your website using the preview theme URL in a desktop browser like Safari (enable the Develop menu in Preferences > Advanced in Safari). Right-click on the element you want to edit.

You can now narrow down the element you’re looking for that you would like to customize. In this example, we’ll be removing the search icon in the top left header area of the Bauhaus theme. Right click on the search icon in the browser window and select “Inspect Element”.

In the source (left pane) and in the Styles (right pane) we can see that the search icon’s ID is “search-toggle”. You can then edit the CSS live to preview its changes before you make the changes on your website. In the Styles pane, put your cursor after one of the semi-colons in the declaration for #search-toggle and press enter. Type display:none; and you should see the icon in the Preview Theme disappear.

You now know you have the correct property and value to make the customizations desired. The code you can use to remove the search icon can be formatted as follows:

#search-toggle { display: none; }

 The custom styling code can be added in the Custom Code field in the WPtouch Pro admin panel or in your WPtouch Pro child theme's stylesheet or the Custom CSS field in the Customizer. Once added, the customization should be live on your website.

You can learn more about CSS properties at  https://developer.mozilla.org/en-US/docs/Web/CSS.

---

Identifying CSS targets in WPtouch Pro 3.x

Identifying which CSS styles particular parts of your mobile theme is easy with the Preview Theme feature found in WPtouch and your browser's built-in developer tools.

Click on the “Preview Theme” button in the WPtouch admin panel.

A new browser window will open with a preview of your website in WPtouch.

You can arrange the windows side-by-side to make it easier while you inspect your website’s CSS. In the right panel in the inspector, make sure you are in the “Styles” tab. You can now narrow down the element you’re looking for that you would like to customize. In this example, we’ll be removing the search icon in the top left header area of the Bauhaus theme. Right click on the search icon in the Preview Theme window and select “Inspect Element”.

In the source (left pane) and in the Styles (right pane) we can see that the search icon’s ID is “search-toggle”. You can then edit the CSS live to preview its changes before you make the changes on your website. In the Styles pane, put your cursor after one of the semi-colons in the declaration for #search-toggle and press enter. Type display:none; and you should see the icon in the Preview Theme disappear.

 You now know you have the correct property and value to make the customizations desired. The code you can use to remove the search icon can be formatted as follows: #search-toggle { display: none; } The custom styling code can be added in the Custom Code field in the WPtouch Pro admin panel or in your WPtouch Pro child theme's stylesheet. Once added, the customization should be live on your website.

You can learn more about CSS properties at https://developer.mozilla.org/en-US/docs/Web/CSS.