Tablet Mobile Seite

stefan-dd · 12 Dezember 2016, 19:28:48

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.

Code Auswählen


<!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>

setstate · 12 Dezember 2016, 20:05:45

da muss sowas in deine User CSS

<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

Code Auswählen


nav,
:not([data-type="circlemenu"]) > .menu {
  background: #5bc995;
    color: #ffffff;
}

stefan-dd · 12 Dezember 2016, 21:09:20

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?

gloob · 13 Dezember 2016, 10:25:38

Cache im Browser nicht gelöscht?

stefan-dd · 13 Dezember 2016, 18:04:33

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?

FHEM Forum

Tablet Mobile Seite

stefan-dd

setstate

stefan-dd

gloob

stefan-dd