Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. ioBroker Allgemein
  4. Tvspielfilm LCARS (StarTrek GUI) CSS-Designeinstellungen

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    16
    1
    348

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.8k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.3k

Tvspielfilm LCARS (StarTrek GUI) CSS-Designeinstellungen

Geplant Angeheftet Gesperrt Verschoben ioBroker Allgemein
1 Beiträge 1 Kommentatoren 1.5k Aufrufe
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • P Offline
    P Offline
    pix
    schrieb am zuletzt editiert von
    #1

    Hallo,

    gerad auf dem Rückweg vom Usertreffen in Kassel fiel mir wieder ein, dass die Ausgabe der Daten aus dem tvspielfilm-Adapter auf Vis-Views im LCARS-Design nicht sehr ansprechend aussieht, wenn sie nicht entsprechend formatiert werden. Ein User hatte mir seine VIS Views im LCARS-Design gezeigt und ich habe ihm schnelle Hilfe versprochen :lol:

    Ich habe daher mal ein paar CSS-Einstellungen vorgenommen, die die Ausgabe leicht anpassen. Die Vorgaben für LCARS (Farben und Schrift) befinden sich hier:

    http://www.lcarscom.net/faq.htm

    Für die Schriftart ist das Laden eines Webfonts nötig, daher funktioniert das ganze nur mit Internetverbindung.

    Zuerst also bitte den folgenden CSS-Code im VIS-Editor in den Reiter CSS, Unterpunkt Projekt kopieren. Ich nutze einen blau verlaufenden Hintergrund, der mit diesem Code und dieser Formatierung nichts zu tun hat.
    261_bildschirmfoto_2017-05-07_um_17.48.51.jpg
    Hier der CSS-Code:

    ! ````
    /* LCARS FONT /
    @import url('https://www.fontify.me/wf/5f2bd24419f3431361ab14c11c11aa08');
    ! /
    tvspielfilm /
    .tclass-th { /
    Headerzeilen */
    background-color: darkgrey;
    background-color: rgba(100,100,100,0.8);
    color: white;

    /*font-weight: bold;*/
    font-family: Arial;
    
    /* lcars */
    color: black;
    font-family: font112588;
    background-color: rgb(204,102,102); /*rot*/
    

    }

    .tclass-th1 { /* linker Header /
    width: 20px;
    text-align: center;
    color: transparent; /

    Text ausblenden /
    /
    display: none; / / ganze Spalte ausblenden */
    }

    ! .tclass-th .tclass-th1 {
    display: none; /* Spaltenüberschrift überm Bild ausblenden*/
    }
    ! .tclass-tr {
    color: red;
    }
    ! .tclass-tr:nth-child(odd) {
    background-color: darkgreen;
    background-color: rgba(50,120,80,0.6);

    /* lcars */
    background-color: rgb(153,153,255); /* blau */
    

    }

    ! .tclass-tr:nth-child(even) {
    color: yellow;
    background-color: darkred;
    background-color: rgba(150,150,150,0.2);

    /* lcars */
    background-color: rgb(255,153,0); /*orange*/
    

    }

    ! /* tv spielfilm */
    .tv_tipps,
    .tv_jetzt {
    font-family: Arial;
    font-size: 75%;

    /*lcars*/
    font-family: font112588;
    font-size: 100%;
    

    }

    ! .tv_tipps tr,
    .tv_jetzt tr {
    background-color: transparent;
    color: white;

    /*lcars */
    color: black;
    

    }

    ! .tv_tipps tr td a,
    .tv_jetzt tr td a {
    background-color: transparent;
    color: white;
    text-decoration: none;

    /*lcars */
    color: rgb(255,204,153); /* blau */
    

    }

    ! .tv_jetzt tr td a {
    font-size: 130%;
    }
    ! ````
    Es sieht dann so aus:
    261_bildschirmfoto_2017-05-07_um_17.50.36.jpg
    Ich gebe zu, die Lesbarkeit leidet etwas. Nur habe ich hier auf dem Autobahnparkplatz nicht soviel Zeit zum Rumprobieren. Passt die Farben gemäß LCARS Richtlinien bitte selbst an (sie Link oben).

    Zum Vergleich hier das Bild ohne die LCARS-Formatierungen, so wie ich es verwende:
    261_bildschirmfoto_2017-05-07_um_18.03.03.jpg
    CSS ohne LCARS (für die normale Ansicht können die mit /* lcars */ kommentierten Absätze gelöscht oder auskommentiert werden):

    ! ````
    .tclass-th { /* Headerzeilen */
    background-color: darkgrey;
    background-color: rgba(100,100,100,0.8);
    color: white;

    /*font-weight: bold;*/
    font-family: Arial;
    
    /* lcars 
    color: black;
    font-family: font112588;
    background-color: rgb(204,102,102);*/ /*rot*/
    

    }

    .tclass-th1 { /* linker Header /
    width: 20px;
    text-align: center;
    color: transparent; /

    Text ausblenden /
    /
    display: none; / / ganze Spalte ausblenden */
    }

    ! .tclass-th .tclass-th1 {
    display: none; /* Spaltenüberschrift überm Bild ausblenden*/
    }
    ! .tclass-tr {
    color: red;
    }
    ! .tclass-tr:nth-child(odd) {
    background-color: darkgreen;
    background-color: rgba(50,120,80,0.6);

    /* lcars 
    background-color: rgb(153,153,255);*/ /* blau */
    

    }

    ! .tclass-tr:nth-child(even) {
    color: yellow;
    background-color: darkred;
    background-color: rgba(150,150,150,0.2);

    /* lcars 
    background-color: rgb(255,153,0);*/ /*orange*/
    

    }

    ! /* tv spielfilm */
    .tv_tipps,
    .tv_jetzt {
    font-family: Arial;
    font-size: 75%;

    /*lcars
    font-family: font112588;
    font-size: 100%;*/
    

    }

    ! .tv_tipps tr,
    .tv_jetzt tr {
    background-color: transparent;
    color: white;

    /*lcars 
    color: black;*/
    

    }

    ! .tv_tipps tr td a,
    .tv_jetzt tr td a {
    background-color: transparent;
    color: white;
    text-decoration: none;

    /*lcars 
    color: rgb(255,204,153); *//* blau */
    

    }

    ! .tv_jetzt tr td a {
    font-size: 130%;
    }

    
    Ich hoffe, der LCARS-Vis-Nutzer kann dieser Anleitung folgen. Über Feedback freue ich mich.
    
    Gruß von der A7
    
    Pix

    ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

    1 Antwort Letzte Antwort
    0
    Antworten
    • In einem neuen Thema antworten
    Anmelden zum Antworten
    • Älteste zuerst
    • Neuste zuerst
    • Meiste Stimmen


    Support us

    ioBroker
    Community Adapters
    Donate
    FAQ Cloud / IOT
    HowTo: Node.js-Update
    HowTo: Backup/Restore
    Downloads
    BLOG

    364

    Online

    32.7k

    Benutzer

    82.5k

    Themen

    1.3m

    Beiträge
    Community
    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
    ioBroker Community 2014-2025
    logo
    • Anmelden

    • Du hast noch kein Konto? Registrieren

    • Anmelden oder registrieren, um zu suchen
    • Erster Beitrag
      Letzter Beitrag
    0
    • Home
    • Aktuell
    • Tags
    • Ungelesen 0
    • Kategorien
    • Unreplied
    • Beliebt
    • GitHub
    • Docu
    • Hilfe