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

Info

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

Image
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 ... (Option 1)

  • 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

Video

YOOtheme Pro – Theme Color Tutorial

How to ... (Option 2)

Since version 1.9.0 YOOtheme Pro checks for script tags in the Custom Code section. You can take advantage of this to include your theme-color without having to create a Child Theme.

Simply add the following at Extensions->Templates->Styles->yootheme->OPEN WEBSITE BUILDER->Settings->Custom Code->SCRIPT (Joomla) or Appearance->Customize->Settings->Custom Code->SCRIPT (WordPress)

    <script></script>  
    <!-- 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">

Then click save.

Image

  • Tutorial
  • YOOtheme Pro

Edited

1 Answer

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