Schriftgrösse beeinflußen

[Robert_Mini]

Bin grad bei der custom.css am Schrauben, da ich bisher am Browser immer Zoom 75% hatte und dies am Tablet nicht mehr geht.
Soweit konnte ich über font sizes und height des navbars alles schön gradziehen, nur sind im Moment die Buttons (Trigger, Switch) noch ein wenig zu hoch.
Leider komme ich dazu in der basic.css nicht weiter.

Kann mir jemand sagen, wo diese Höhe im css geändert werden kann (am einfachsten der Abstand vom text nach oben und unten?)?

Danke und lg
Robert

[peuter]

Kann mir jemand sagen, wo diese Höhe im css geändert werden kann (am einfachsten der Abstand vom text nach oben und unten?)?

Also im Metal-Design sollte das mit folgender Regel gehen (Standartwert für das padding ist 5px)

.switchUnpressed div, .switchPressed div {
padding: 0;
}

Wenn die Regel nicht beachtet werden sollte müsste folgendes helfen:

.switchUnpressed div, .switchPressed div {
padding: 0 !important;
}

[Robert_Mini]

Danke!

Funktioniert teilweise. Irgendwie scheint es, als ob nur padding 0 oder 5 funktionieren, padding 2 liefert das gleiche wie padding 5.

Noch besser als das padding des Buttons zw. Text und Buttonrahmen wäre der Abstand zw. Buttonrahmen und Widgetrahmen. Geht das auch?

Auch habe ich noch ein Problem mit den navbars.

.navbar .pagejump .label > img, .navbar .pagejump .label > canvas { 
    height: 36px !important;
        width: 36px !important;
    display: block;
    margin: 0 auto;
}

Mit diesem Code in der custom.css habe ich den linken Navbar in der Höhe an die kleinere Schriftgröße angepasst.
Nebeneffekt ist, dass unter dem TopNavbar dann ein schwarzer Freiraum entsteht. Wie bringe ich den noch weg?

[Robert_Mini]

Hab das Problem mit den Button-Höhen nun anders gelöst und die Schrift der Buttons auf 0.8em gesetzt (in der custom.css).
Was auffällt: Das "font-size" für "switchUnpressed div" (1. Block unten) beeinflusst auch die Schrift der Pagejumps im Navbar Links. Habe diese dann wieder auf 1em zurück-geforced.

Ist das Absicht, ein Bug oder ein Fehler meinerseits (Reihenfolge etc.?)?

.switchUnpressed div, .switchPressed div {
padding: 5 !important;
font-size: 0.8em !important;
}

.navbar .pagejump .label > img, .navbar .pagejump .label > canvas { 
    height: 36px !important;
        width: 36px !important;
    display: block;
    margin: 0 auto;
}

.pagejump  .switchUnpressed div, .group .pagejump  .switchPressed div {
       font-size: 1em !important;
}

In jeedem Fall bekomme ich langsam ein Gefühl, was man in den .css alles machen kann, wenngleich ich mich sehr hart tue, den richtigen Bereich zu finden (.actor, container, .widget, .group.....)

Die Höhe des Top-Navbars (schwarzer Streifen) ist mir aber noch ein Rätsel. Wo kann ich diese überschreiben?

Lg
Robert

[Tqm]

Ich möchte diese Themen wieder nach oben holen, da ich es als optimal ansehen würde die custom.css durch Einbindung in die Config zu ersetzten

Einer Config-Datei einen Abschnitt für ein paar übersteuernde CSS Regeln einzufügen ist eigentlich kein Problem.
=> Mal mal ein Feature-Request damit wir das später nicht vergessen.

Ist unterm Strich auch schneller, da nicht noch eine weitere Datei per HTTP abgeholt werden muss...

Und das Thema mit der Schriftgröße habe ich nun auch, da ich nun eine 2D Seite erstellen möchte und mir eben hier die Schriftgröße zu groß ist:
Was kann ich hier machen damit die Schriftgröße nur auf der "2D Seite" kleiner wird? Und bekomme ich das Feld auch irgendwie transparent (siehe Screenshot)

Wenn ich noch als User noch was anmerken darf:

Schön wäre es, wenn es 2 Eingaben im xml bzw. Editor geben würde:
- Globaler Schriftgrößenfaktor
- Je Widget ein Attribut: "fontsize" idealerweise als zusätzlicher Faktor zum globalen.

[Chris M.]

Ich möchte diese Themen wieder nach oben holen, da ich es als optimal ansehen würde die custom.css durch Einbindung in die Config zu ersetzten

Das ist nicht umgesetzt. Darf aber jeder machen
der will

Und das Thema mit der Schriftgröße habe ich nun auch, da ich nun eine 2D Seite erstellen möchte und mir eben hier die Schriftgröße zu groß ist:
Was kann ich hier machen damit die Schriftgröße nur auf der "2D Seite" kleiner wird? Und bekomme ich das Feld auch irgendwie transparent (siehe Screenshot)

CSS Regeln die nur auf 2D Seiten wirken sollten durchaus möglich sein. Wenn es um CSS geht, am besten einfach mal im Browser-Debugger den DOM-Tree ansehen - und da sieht man, dass die Seiten ein class Attribut gesetzt haben bei denen u.a. "page" als Class, aber auch "type_2d" bei 2D Seiten gesetzt ist.
Damit sollte doch eine passende Regel möglich sein

Transparent geht auch mit CSS.

Wie schon oben geschrieben: öffne die Seite im Browser-Debugger. Da kannst Du interaktiv CSS Regeln ändern - und so leicht verschiedene Möglichkeiten ausprobieren.

[NetFritz]

Hallo
Ich habe in meiner custom.css für die 2D Page die css so geändert.

 .page.type_2d .widget {
    background-image: linear-gradient(#444444, #2D2D2D);
    border-color: #666666;
    border-style: solid;
    border-width: 0;
    margin: -1px 0 0 -1px;
    min-height: 2.1em;
    padding: 0.3em;
    text-shadow: 0 1px 1px #111111;
}

Gruß NetFritz

[Tqm]

Hey,

besten Dank das hat mich jetzt schon einen großen Schritt weitergebracht!

Nur das mit der Transparenz leuchtet mir noch nicht ein:
- Einfärben transparent funktioniert wohl nicht
- background-image einfach weglassen auch nicht

Bin für jeden Hinweis dankbar!

Gruß,
Thomas

[Tqm]

Bonusfrage:

Ih kann ja die Seite skaliert einstellen d.h. passt sich der Auflösung des Endgerätes an - funktioniert perfekt
Nur müsste ja auch die Schrift skaliert werden - funktioniert das irgendwie?

Gruß,
Thomas

[stBorchert]

Nur müsste ja auch die Schrift skaliert werden - funktioniert das irgendwie?

Wenn Du als Einheit bei der Schriftgröße "em" oder "rem" verwendest, wird die Schriftgröße basierend auf der Basis-Schriftgröße gesetzt.
In der mobile.css (oder da, wo Du auf einzelne Endgeräte reagierst) kannst Du dann die Basis-Schriftgröße entsprechend ändern und schon ändert sich die Schriftgröße auch für alle anderen Elemente.

Mehr dazu zum Beispiel hier: CSS-Tipp: rem als Einheit für Schriftgröße nutzen | Elmastudio

[Tqm]

Also das mit dem Browser-Debugger ist schon cool - da kann man schon ganz nett spielen ...
auf einzelne Endgeräte reagieren: wie kann man PC und iPad unterscheiden?
zum Thema Transparenz hat hier jemand eine Idee?

Schöne Grüße,
Thomas

[peuter]

Transparenz hat hier jemand eine Idee?

Versuch mal:

background-image: none;

[Tqm]

manchmal sieht man den Wald vor lauter Bäumen nicht ...

Versuch mal:

background-image: none;

DANKE, der Titel sagt alles ...