Hallo Ich habe mir eine mobile Seite erstellt.
Möchte gern aber die Farben der Aufklappmenüs ändern. (siehe Bild) Wo kann man dies ändern?
Das Schwarz gefällt mir nicht.
<!DOCTYPE html>
<html>
<head>
<!--
* Version: 2.2.0
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="74">
<meta name="widget_base_height" content="71">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta http-equiv="Cache-Control" content="no-store" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<script src="/fhem/pgm2/jquery.min.js"></script>
<script src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI-mobil</title>
</head>
<body class="bg-lightgray">
<nav id="menu">
<div data-type="link" class="default large top-space-2x left-space-2x"
data-width="150"
data-icon-left="fa-dashboard"
data-color="white"
data-text-align="right"
data-load="#content1"
data-url="#home.html"
data-active-color="green"
data-active-pattern="(.*mobil-index.html|.*#home.html)">Home</div>
<div data-type="link" class="prefetch large top-space-2x left-space-2x"
data-width="150"
data-icon-left="fa-lightbulb-o"
data-color="white"
data-text-align="right"
data-load="#content2"
data-url="#licht.html"
data-active-color="green"
data-active-pattern=".*#licht.html">Licht</div>
<div data-type="link" class="prefetch large top-space-2x left-space-2x"
data-width="150"
data-icon-left="ftui-window"
data-color="white"
data-text-align="right"
data-load="#content3"
data-url="#rollo.html"
data-active-color="green"
data-active-pattern=".*#rollo.html">Rollo</div>
<div data-type="link" class="nocache large top-space-2x left-space-2x"
data-width="150"
data-icon-left="fa-music"
data-color="white"
data-text-align="right"
data-load="#content4"
data-url="#mp.html"
data-active-color="green"
data-active-pattern=".*#mp.html">Mediaportal</div>
<div data-type="link" class="nocache large top-space-2x left-space-2x"
data-width="150"
data-icon-left="fa-window-maximize"
data-color="white"
data-text-align="right"
data-load="#content5"
data-url="../display/index.html"
data-active-color="green"
data-active-pattern="../display/index.html">Tablet</div>
<div data-type="link" class="nocache large top-space-2x left-space-2x"
data-width="150"
data-icon-left="fa-gear"
data-color="white"
data-text-align="right"
data-load="#content5"
data-url="../index.html"
data-active-color="green"
data-active-pattern="../index.html">Verwaltung</div>
</nav>
<main id="panel" class="left-space">
<header id="header-nav" class="bg-lightgray row"><br>
<div data-type="slideout" class="top-narrow big left notouch"></div>
<div id="linkname" class="big bold left"></div>
<div class="right-align right-space-2x medium bold">
<div data-type="clock" data-format="d.n.Y "></div>
<div data-type="clock" data-format="H:i:s " style="bottom:25px"></div>
<div>
</header>
<div class="page" id="content1"></div>
<div class="page" id="content2"></div>
<div class="page" id="content3"></div>
<div class="page" id="content4"></div>
<div class="page" id="content5"></div>
<div class="page" id="content6"></div>
</main>
</body>
</html>
da muss sowas in deine User CSS
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
nav,
:not([data-type="circlemenu"]) > .menu {
background: #5bc995;
color: #ffffff;
}
Schritt 1 ist klar, user.css habe ich hinzugefügt.
Schritt 2 Code in User.css geschrieben.
Leider passiert nichts? Was mache ich noch falsch?
Cache im Browser nicht gelöscht?
Daran liegt es leider auch nicht.
Ich habe mir in der fhem-tablet-ui.css die Einstellungen gesucht und verändert, ohne Erfolg.
Danach habe ich in der Index.html <nav id="menu"> umbenannt. Die Menüformatierung war weg, der schwarze Hintergrund ist geblieben.
Es muss also noch irgendwo anders eine Einstellung zur Farbe geben? Aber wo?