Color browser elements and mobile status bar change

New Here ,
Aug 01, 2018 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?

Views

747

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
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Aug 02, 2018 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.<!-- Chrome, Firefox and Opera --> <meta name="theme-color" content="#4285f4">

Likes

Translate

Translate
Adobe Community Professional ,
Aug 01, 2018 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
community guidelines
Adobe Community Professional ,
Aug 01, 2018 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
community guidelines
Adobe Community Professional ,
Aug 01, 2018 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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
New Here ,
Aug 02, 2018 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
community guidelines
Adobe Community Professional ,
Aug 02, 2018 Aug 02, 2018

Copy link to clipboard

Copied

LATEST

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
LEGEND ,
Aug 01, 2018 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
community guidelines