YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar thomas.p Support asked

[Tutorial] Styling the navigation bar / toolbar / status bar of mobile browsers with YOOtheme Pro


Multiple mobile browsers support the styling of their toolbar / navigation bar.

Image by Pete LePage (CC BY 3.0)

Chrome for Android supports the theme-color meta tag.

iOS Safari allows to set the style of the status bar for a web application.

Windows Phone has a color setting for the Navigation Bar.

How to ...

  • create a Child Theme by adding the folder yootheme_child to your templates directory
  • copy the file /templates/yootheme/index.php to /templates/yootheme_child/index.php
  • edit the file and enter the following right before the closing </head> tag (line 25)

    <!-- Chrome, Firefox OS and Opera -->  
    <meta name="theme-color" content="#800080" />  
    <!-- Windows Phone -->  
    <meta name="msapplication-navbutton-color" content="#800080" />  
    <!-- iOS Safari -->  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  • you can adjust the colors to any valid HTML color code (except iOS)

  • go to Extensions->Templates->Styles->yootheme->Website Builder->Settings->Advanced->Child Theme
  • select your child theme from the dropdown
  • save


YOOtheme Pro – Theme Color Tutorial

  • Tutorial
  • YOOtheme Pro


1 Answer

Know someone who can answer? Share a link to this question via email or twitter.