Button-Größe beeinflussen

[wuestenfuchs]

Hallo zusammen,

kann man irgendwie die Größe von Schaltflächen beeinflussen?

Ich versuche, eine 2D-Ansicht umzusetzen ("Floorplan"). Die Standard-Button/Trigger/Switch-Größe ist jedoch zu groß, so dass das Ergebnis sehr überfüllt ist - siehe Anhang.

Evtl. würde sogar das reine Symbol eines Buttons ausreichen bzw. wäre sogar eleganter, so wie z.B. beim Floorplan von myHomeControl (Beispiel: http://www.myhomecontrol.ch/Einleitu...inleitung.html).

Grüße,

Robert

[LexionTT]

IE oder Chrome Developer Tools bzw. Firebug zum Identifizieren der css Klassen verwenden, ein wenig mit den Werten spielen und diese entsprechend in das aktive Design css übertragen.

[wuestenfuchs]

Okay, also direkter Edit in den CSS-Dateien.

Wenn ich aber keine reine Floorplan-Visu habe, sondern eine Mischung aus "normaler" Visu (mit normaler Button-Größe) und Floorplan (mit verringerter Button-Größe), dann wird das Ganze wohl aufwändiger, weil ich dann mit Zusatz-Klassen (für die Floorplan-Buttons) arbeiten muss, oder?

[NetFritz]

Hallo

Okay, also direkter Edit in den CSS-Dateien

Nein in der custom.css unter designs/metall/.
Mit was für ein Browser zeigt Du die 2d Seite an ?
Welche CV Version ist das ?
Sind deine Butons so groß das nur 4 Buttons auf eine Seite gehen ?
Dann stimmt da was nicht.
Gruß NetFritz

[peuter]

Wenn ich aber keine reine Floorplan-Visu habe, sondern eine Mischung aus "normaler" Visu (mit normaler Button-Größe) und Floorplan (mit verringerter Button-Größe), dann wird das Ganze wohl aufwändiger, weil ich dann mit Zusatz-Klassen (für die Floorplan-Buttons) arbeiten muss, oder?

Nö, einfach jede CSS Regel mit

.page.type_2d

anfangen, damit stellst Du sicher dass die nur auf 2d-Seiten gilt.

[wuestenfuchs]

Sind deine Butons so groß das nur 4 Buttons auf eine Seite gehen ?

Nein, das ist nur ein Ausschnitt aus der Visu, es funktioniert sonst alles prima!

Btw, ich verwende den Firefox 40 unter Ubuntu 14.04 auf einem Laptop mit 1600 x 1050 Pixel Auflösung. CometVisu ist die 0.8.x stable.

@peuter: Prima, das ist der entscheidende Tipp. Danke!

[wuestenfuchs]

Folgender Code in der custom.css macht so ziemlich genau das, was ich suche:

.page.type_2d .switchUnpressed div,
.page.type_2d .switchPressed div {
        min-width: 0;
        padding: 0;
}

.page.type_2d .switchPressed,
.page.type_2d .switchUnpressed {
        border-style: none;
        background-color: transparent;
}

.page.type_2d .widget {
        border-style: none;
        background-image: none;
}

.page.type_2d .info {
        font-size: 4mm;
}

Danke nochmals für eure Hilfe!

[Edit: CSS verbessert]