Neues YouTube-Video: Visualisierung im Devices-Adapter

[AndyUM61]

Hallo,

also ich habe das gerade mal ein wenig probiert.

Wie es aussieht, kannst du wohl jedes Attribut eines Widgets , zusätzlich zu den vorhandenen Einstellmöglichkeiten auch selbst durch CSS verändern.

Vorratssetzung du verstehst es mit CSS umzugehen!

Ich habe mir mal ein button-state - Widget angelegt, welches automatisch den Namen "w00236" bekommen hat.

Da ein Widget offensichtlich aus mehreren-Elementen aufgebaut ist, habe ich das Ganze mal,

mangels Dokumentation;), mit Hilfe eines CSS-Inspektors, in meinem Fall mit dem in Firefox integrierten "Entwicklerwerkzeuge -> Inspektor" untersucht.

Dabei habe ich festgestellt, dass der Button den Namen und die CSS-ID "w00236_button" bekommen hat.

Jetzt ist das eigentlich ganz einfach:

Unter CSS für dein Projekt einige Attribute für den Button anlegen:

` > #w00236_button{ /* der Button selbst */

border-style:solid;

border-color:green;

border-width:5px;

border-radius:20px;

color:blue;

background-color:white;

background-image: none;

}

#w00236_button:hover{ /* der Button bei MouseOver */

border-color:red;

} `

…und das sollte funktionieren.

Einen Nachteil hat das jedoch: Die Resultate der Layoutänderung werden im VIS-Editor offensichtlich nicht sofort dargestellt, sondern erst, wenn man den Editor verlässt.

Ob das so optimal ist, weiß ich nicht, so würde ICH mir behelfen.
518_hover.gif

[pix]

Hallo Andy,

wenn du nicht jeden einzelnen Widget Namen in der CSS-Deklaration zufügen möchtest, kannst du das Feld "CSS Klasse" rechts oben unter Eigenschaften/Widget verwenden. Dort einfach einen Namen eintragen (ohne Punkt oder Raute) zum Beispiel "andy_button_state" und dann im CSS Reiter die Formatierungen auf diese Klasse beziehen. So lassen sich leicht mehrere Knöpfe einbinden.

.andy_button_state { /* alle Buttons dieser Klasse */
border-style:solid;
border-color:green;
border-width:5px;
border-radius:20px;
color:blue;
background-color:white;
background-image: none;
}
.andy_button_state:hover{ /* der Button bei MouseOver */
border-color:red;
}

Es funktionieren auch mehrere Klassen (getrennt durch Leerzeichen).

Bilder:

!

Gruß

Pix

[AndyUM61]

@pix:

wenn du nicht jeden einzelnen Widget Namen in der CSS-Deklaration zufügen möchtest, kannst du das Feld "CSS Klasse" rechts oben unter Eigenschaften/Widget verwenden. `

DANKE!! Klasse!

So ist das ja einfach - das kann ja jeder;)).

Tja, wenn jeder ein Wenig hilft, wurschteln wir uns da schon durch;).

[blauholsten]

@AndyUM61:

Hallo,

also ich habe das gerade mal ein wenig probiert.

Wie es aussieht, kannst du wohl jedes Attribut eines Widgets , zusätzlich zu den vorhandenen Einstellmöglichkeiten auch selbst durch CSS verändern.

Vorratssetzung du verstehst es mit CSS umzugehen!

Ich habe mir mal ein button-state - Widget angelegt, welches automatisch den Namen "w00236" bekommen hat.

Da ein Widget offensichtlich aus mehreren-Elementen aufgebaut ist, habe ich das Ganze mal,

mangels Dokumentation;), mit Hilfe eines CSS-Inspektors, in meinem Fall mit dem in Firefox integrierten "Entwicklerwerkzeuge -> Inspektor" untersucht.

Dabei habe ich festgestellt, dass der Button den Namen und die CSS-ID "w00236_button" bekommen hat.

Jetzt ist das eigentlich ganz einfach:

Unter CSS für dein Projekt einige Attribute für den Button anlegen:

` > #w00236_button{ /* der Button selbst */

border-style:solid;

border-color:green;

border-width:5px;

border-radius:20px;

color:blue;

background-color:white;

background-image: none;

}

#w00236_button:hover{ /* der Button bei MouseOver */

border-color:red;

} `

…und das sollte funktionieren.

Einen Nachteil hat das jedoch: Die Resultate der Layoutänderung werden im VIS-Editor offensichtlich nicht sofort dargestellt, sondern erst, wenn man den Editor verlässt.

Ob das so optimal ist, weiß ich nicht, so würde ICH mir behelfen. `

Hi,

danke erstmal! Hat soweit auch geklappt, aber das eigentliche Problem mit dem "hellblauen" Hintergrund & der "blauen Schrift ist geblieben.

[Bluefox]

@blauholsten:

@AndyUM61:

Hallo,

also ich habe das gerade mal ein wenig probiert.

Wie es aussieht, kannst du wohl jedes Attribut eines Widgets , zusätzlich zu den vorhandenen Einstellmöglichkeiten auch selbst durch CSS verändern.

Vorratssetzung du verstehst es mit CSS umzugehen!

Ich habe mir mal ein button-state - Widget angelegt, welches automatisch den Namen "w00236" bekommen hat.

Da ein Widget offensichtlich aus mehreren-Elementen aufgebaut ist, habe ich das Ganze mal,

mangels Dokumentation;), mit Hilfe eines CSS-Inspektors, in meinem Fall mit dem in Firefox integrierten "Entwicklerwerkzeuge -> Inspektor" untersucht.

Dabei habe ich festgestellt, dass der Button den Namen und die CSS-ID "w00236_button" bekommen hat.

Jetzt ist das eigentlich ganz einfach:

Unter CSS für dein Projekt einige Attribute für den Button anlegen:

` > #w00236_button{ /* der Button selbst */

border-style:solid;

border-color:green;

border-width:5px;

border-radius:20px;

color:blue;

background-color:white;

background-image: none;

}

#w00236_button:hover{ /* der Button bei MouseOver */

border-color:red;

} `

…und das sollte funktionieren.

Einen Nachteil hat das jedoch: Die Resultate der Layoutänderung werden im VIS-Editor offensichtlich nicht sofort dargestellt, sondern erst, wenn man den Editor verlässt.

Ob das so optimal ist, weiß ich nicht, so würde ICH mir behelfen. `

Hi,

danke erstmal! Hat soweit auch geklappt, aber das eigentliche Problem mit dem "hellblauen" Hintergrund & der "blauen Schrift ist geblieben. `
Bei mir sieht es dann so aus:

Also Blau auf weiss, so wie gewünscht.

[blauholsten]

Bei mir geht das nicht!

Auch die Schriftart sieht bei euch anders aus…

[AndyUM61]

Versuche doch mal ein !Important zu setzen: color: black !Important;

Gesendet von meinem GT-N8000 mit Tapatalk

[blauholsten]

Danke, werde ich morgen probieren, der Rechner ist jetzt aus.

[blauholsten]

Sorry, ach das klappt nicht!….

[Bluefox]

Probiere so:

.Thermostat > div > input{
    color:red !important;
}

[blauholsten]

@Bluefox:

Probiere so:

.Thermostat > div > input{
    color:red !important;
}

```` `  

Perfekt das geht