1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XenForo web browser header colour

Discussion in 'Papers' started by Stéphane Lenclud, Mar 19, 2017.

  1. Stéphane Lenclud

    Stéphane Lenclud Founder Staff Member

    Some web browsers, notably on smartphones, let web developers specify a colour that will be used to decline the tints of the web browser header and title bar as well as the smartphone status bar. The following StackOverflow comment provides code samples on how to achieve that.

    Here is the XenForo template you should edit:
    Admin Control Panel / Appearance / Templates / PAGE_CONTAINER

    Here is what I added to mine:
    HTML:
    1.  
    2. <!-- SL: Specify favicon and status bar colour for various browsers -->
    3. <link rel="icon" href="/favicon.ico?v=2" />
    4. <!-- Chrome, Firefox OS and Opera -->
    5. <meta name="theme-color" content="@contentBackground">
    6. <!-- Windows Phone -->
    7. <meta name="msapplication-navbutton-color" content="@contentBackground">
    8. <!-- iOS Safari -->
    9. <meta name="apple-mobile-web-app-status-bar-style" content="@contentBackground">
    10.  
    Notice the favicon reference which is slightly off topic here.
    Vivaldi desktop web browser also applies the specified colour.
     
    Last edited: Mar 19, 2017

Share This Page