Highlighted

Color browser elements and mobile status bar change

New Here ,
Aug 01, 2018

Copy link to clipboard

Copied

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;

}

<!-- Chrome, Firefox OS and Opera -->

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

}

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

}

</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?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

<!-- Chrome, Firefox and Opera -->
<meta name="theme-color" content="#4285f4">

Views

646

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Color browser elements and mobile status bar change

New Here ,
Aug 01, 2018

Copy link to clipboard

Copied

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;

}

<!-- Chrome, Firefox OS and Opera -->

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

}

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

}

</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?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

<!-- Chrome, Firefox and Opera -->
<meta name="theme-color" content="#4285f4">

Views

647

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 01, 2018 0
Adobe Community Professional ,
Aug 01, 2018

Copy link to clipboard

Copied

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:

Bildschirmfoto 2018-08-01 um 13.41.01.png

Here you can add hexacode as well:

Bildschirmfoto 2018-08-01 um 13.41.14.png

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

Bildschirmfoto 2018-08-01 um 13.40.14.png

… just let us know.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 01, 2018 0
Adobe Community Professional ,
Aug 01, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 01, 2018 0
Adobe Community Professional ,
Aug 01, 2018

Copy link to clipboard

Copied

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>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Page Title </title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Chrome, Firefox OS and Opera -->

<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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 01, 2018 1
New Here ,
Aug 02, 2018

Copy link to clipboard

Copied

So I need to go into the index file after exporting and then add the code like this below?2018-08-02 18_42_30-_D__Documents_Work Projects_Golden_Final Website_index.html - Notepad++.png
Implementing the code like this and reuploading the index file it does not seem to work on Chrome Mobile and Safari mobile.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 02, 2018 0
Adobe Community Professional ,
Aug 02, 2018

Copy link to clipboard

Copied

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.

<!-- Chrome, Firefox and Opera -->
<meta name="theme-color" content="#4285f4">

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 02, 2018 0
Most Valuable Participant ,
Aug 01, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 01, 2018 1