Verschiedenfarbige Infoboxen ... richtiger Lösungsansatz?

[forum]

Sers Moziloianer,

nachdem ich hier gelesen habe, wie man die Infoboxen basteln kann, wollte ich noch einen Schritt weiter und mir unterschiedliche Farbvarianten dafür bereitstellen.

Ich habe dafür jetzt erst mal folgende Lösung gefunden, die Frage ist, ist das eine gute Lösung oder muss ich später ggf. mit Problemen rechen?

in der style.css folgendes hinzugefügt:

Code Auswählen Erweitern

div.kastenR {
width:200px;
float:right;
... ... ...
background-repeat:no-repeat;
background-position: top left;
}
#gruen { border-color:#ccffcc; background-color:#eeffee; }
#blau { border-color:#ccccff; background-color:#eeeeff; }
unter Konfiguration - CMS - Syntax-Einstellungen folgende Einträge:

Code Auswählen Erweitern

kastenR-gruen = <div class="kastenR" id="gruen">{VALUE}</div>
kastenR-blau = <div class="kastenR" id="blau">{VALUE}</div>

Und auf der Inhaltsseite hab ich bisher dann scheinbar das was ich wollte. Kann man das so lassen oder ist das eine ungünstige Verwendung des id's?

Danke
Helge

[caga]

Hallo,

meiner Meinung nach stellt das eine recht elegante Lösung deines Problems dar.
Wenn mich nicht alles täuscht, dann ist das doch genau die Art, wie Ids und Klassen genutzt werden sollten?!
Zur Zukunftssicherheit deiner Lösung sei gesagt, dass sich natürlich immer etwas im CMS ändern kann (durch Updates usw.). Allerdings ist deine Lösung recht flexibel, da sie auf den benutzerdefinierten Syntaxelementen beruht.

Gruß,
Carsten

[azett]

Ich bin auch der Meinung, daß das eine recht elegante Lösung ist. Einziges Problem: IDs müssen eindeutig sein, du darfst also in einer Inhaltsseite nur eine grüne Box verwenden (sonst meckert der HTML-Validator).

Ein anderer Ansatz (unter Verwendung des {DESCRIPTION}-Platzhalters):

Code Auswählen Erweitern

bunteboxrechts = <div class="kastenR" style="background-color:{DESCRIPTION};">{VALUE}</div>
...und dann in der Inhaltsseite:

Code Auswählen Erweitern

[bunteboxrechts=aaccff|Das ist der Inhalt.]

[wasp]

...und dann in der Inhaltsseite:

Code Auswählen Erweitern

[bunteboxrechts=aaccff|Das ist der Inhalt.]

Aber natürlich mit Nummernzeichen vor dem hexadezimalen Farbwert,also:

Code Auswählen Erweitern

[bunteboxrechts=#aaccff|Das ist der Inhalt.]
mfg
stefan
p.s.: ReHi azett!

[azett]

...womit Stefan natürlich absolut richtig liegt

rerehi ("bock-hi"?    )

[forum]

Vielen Dank für die Rückmeldungen,

die Tatsache, dass ich die Box durch das id dann nur ein Mal verwenden darf stört mich ein wenig, deswegen finde ich den anderen Lösungsansatz sehr interessant.

Ich steige im Moment aber noch nicht dahinter ob ich dann auch separat die Rahmenfarbe setzten kann. Geht das dann auch noch? (Also hellgrüner Hintergrund mit dunkelgrünem Rahmen und hellblauer Hintergrund mit dunkelblauem Rahmen und so weiter)

Gruß
Helge

[caga]

Von der Theorie her, sollte das klappen. Als Klasse formulierst du die allgemeine Box und in der ID änderst du dann die spezifischen Daten, also Hintergrundfarbe, Rahmenfarbe, Textfarbe, -größe, -art, und so weiter.

[wasp]

Hi!
Der Lösungsvorschlag von azett kommt ohne IDs aus. Einfach 2 Parameter übergeben
und das Problem sollte Geschichte sein. Weitere Parameter könn(t)en so optional
geschachtelt werden. edit: Offtopic entfernt