Color browser elements and mobile status bar change

Report · Aug 01, 2018

Hi Muse team and users.
I am trying to figure out how to implement colour browser elements as well as colour change on mobile Safari where the website dictates the colour of the bar.
Examples are here, which is a Google web developer portal.
I was hoping that I would have to just copy and paste some code into the Master Page Properties with the rest of added code I have added.

Current code looks like this:

<style>

::selection {

color: #FFFFFF;

background: #F8AA40;

}

::moz-selection {

color: #FFFFFF;

background: #F8AA40;

}

}

}

</style>

As I understand that <meta> elements is different to <style>, do I have to make a new section for <meta> part of the code?
Is there somewhere else I need add this data instead of page properties, maybe an iFrame?

Report · Aug 01, 2018

It is far less complicated. There´s no code necessary (sorry Nancy OShea ) for Muse.

In your site properties you can use as many link styles as desired (although you wouldn`t do that). In my case you see two of them:

Here you can add hexacode as well:

So in case I missed the real question, I have no idea what to do with your link, though, … :

… just let us know.

Best Regards,

Uwe

Report · Aug 01, 2018

If you talked about address bar color (and more), well then you may need some extra code of course. So sorry, if I got you wrong … .

Uwe

Report · Aug 01, 2018

Meta tags must go directly inside your custom <head> tag. Meta tags do not belong inside the CSS <style> tags.

A typical web page would look something like this.

<!doctype html>

<head>

<title>Page Title </title>

<meta name="theme-color" content="#e4ac24">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<style>

CUSTOM CSS GOES HERE

</style>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 02, 2018

So I need to go into the index file after exporting and then add the code like this below?
Implementing the code like this and reuploading the index file it does not seem to work on Chrome Mobile and Safari mobile.

Report · Aug 02, 2018

As stated in the Google docs, this won't work for all devices.

This code will only work on supporting Androids with these browsers. All others will ignore it.

 <meta name="theme-color" content="#4285f4">

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 01, 2018

your style code has no real reference and Muse will ignore it

the Meta (means self) tag will only work on devices that use | allow that tag so in this case, if the end users device | browser has a "apple-mobile-web-app-status-bar-style"

and its set to allow edits then this code will set it... otherwise the device | browser will just ignore it

Adobe Community

Color browser elements and mobile status bar change

1 Correct answer