NEWS
Tvspielfilm LCARS (StarTrek GUI) CSS-Designeinstellungen
-
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.
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:
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:
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