Das CSS Layout einer Box Xfach übernehmen

Hast Du mal in Betracht gezogen, mit CSS-Klassen für die Boxen zu arbeiten? Wenn Du allen Boxen, die gleich dargestellt werden sollen, dieselbe Klasse gibst, musst Du nur einmal diese Klasse im CSS definieren.

Gruß norse

Du kannst direkt im ACP beim Erstellen der Box eine Klasse vergeben:

Gruß norse

Kann es sein, dass Du den Sinn der Verwendung derselben Klasse für mehrere Boxen nicht verstanden hast? Wenn ich möchte, dass mehrere Boxen ein identisches Erscheinungsbild haben, gebe ich ihnen dieselbe Klasse und kann dann durch Ansprache der Klasse plus eventuell erforderlicher Spezifizierungen des Selektors bestimmte Elemente in allen Boxen mit dieser Klasse gleich darstellen lassen. Mir erschließt sich in diesem Zusammenhang nicht, wozu Du überhaupt den Box-Identifier verwenden willst. Davon ganz abgesehen kann ich mir nicht vorstellen, dass sich die gezeigten Selektoren überhaupt auf irgendetwas auswirken.

Funktionierendes Beispiel:

Ich gebe mehreren Boxen die Klasse "custom".

Mit .boxesSidebarRight .box.custom {background: red;} erziele ich nun den Effekt, dass alle Boxen mit dieser Klasse in der rechten Seitenleiste mit rotem Hintergrund angezeigt werden.

Gruß norse

Ich kann Dir leider nicht folgen. Diese Engelsgeduld wie sie Alex hier über mehr als ein Jahr an den Tag gelegt hat, ist nun einmal nicht meine Stärke. Ich werde Dir wie fast jedem anderen hier auch künftig gern konkrete Fragen beantworten, aber ich kann mich des Eindrucks nicht erwehren, dass es kaum möglich ist, Dir auf eine konkrete Frage eine konkrete Antwort zu geben und dann ist es auch mal gut. Mich persönlich stresst es nun einmal, wenn meine gut gemeinten sachlich richtigen Hinweise nicht zur Lösung führen, sondern nur weitere Fragen auslösen.

Vielleicht mag ReeN sich der Sache annehmen, der ist diesbezüglich mental stärker als ich.

Gruß norse

Quote from hgx

2. ich habe für die Ur-box ja 2 CSS Einträge:

Die Angabe des data-box-identifier ist logischerweise Blödsinn, wenn du mehrere Boxen ansprechen willst, weil du darüber die einzigartige ID der Box ansprichst. Du müsstest das beispielsweise wie folgt ersetzen:

.box.default01 {
  background-color: rgb(255,255,249);
  padding:20px 15%;
}

Quote from hgx

3. was steht für .boxesSidebarRight bzw. wo holst Du das her? bzw. was muss da bei mir rein?

Wie der Name schon sagt, steht das für die rechte Seitenleiste. Wenn deine Boxen im Inhaltsbereich Oben sind, wird .boxesContentTop die richtige Klasse für dich sein. Wobei du das auch einfach weglassen kannst, wenn du sowieso mit einer eigenen Klasse arbeitest.

Quote from hgx

4. .boxesSidebarRight .box.custom {background: red;}, ich will keine alten CSS Einträge von oben wiederholen und auch keine neuen wie {background: red;} oder dergleichen drinhaben.

Das war ja auch nur ein Beispiel von norse.

Quote from norse

Vielleicht mag ReeN sich der Sache annehmen, der ist diesbezüglich mental stärker als ich.

Na dann versuche ich mal mein Glück.

Quote from hgx

2. ich habe für die Ur-box ja 2 CSS Einträge:

//Innen

Code

.box[data-box-identifier="com.woltlab.wcf.genericBox29"] {
background-color: rgb(255,255,249);
padding:20px 15%;
}

//Aussen

Code

.box[data-box-identifier="com.woltlab.wcf.genericBox29"] .boxContent {
background-color:rgb(229,240,241);
padding-left:5px;
usw...}

Display More

Das .box[data-box-identifier="com.woltlab.wcf.genericBox29"] spricht genau diese eine Box an. Willst du alle Boxen mit deiner CSS Klasse ansprechen, dann nutzt du STATTDESSSEN .box.nameDerKlasse. Damit sprichst du dann sowohl deine "Ur-Box" an als auch alle anderen Boxen, welche diese CSS Klasse haben.

Also ersetze in deinem bisherigen CSS Code einfach das .box[data-box-identifier="com.woltlab.wcf.genericBox29"] durch .box.nameDerKlasse. Dann greift der Code bei allen Boxen mit der Klasse, anstatt nur für deine "Ur-Box".

Quote from hgx

.? .box .default01

Das würde gar nichts bewirken. Wenn überhaupt, dann .box.default01, falls default01 deine Klasse sein sollte.

Das Leerzeichen, welches du dazwischen schummelst, würde voraussetzen, dass der HTML Quelltext anders aufgebaut ist:

• .box.default01 wäre ein Element, welches die Klassen box und default01 hat. <-- Das wäre hier beim WSC der Fall.
• .box. default01 wäre dagegen ein Element, welches die Klasse default01 hat und welches innerhalb eines Elements liegt, welches die Klasse box hat. Das wäre hier im WSC nicht der Fall, also würde der CSS Code nicht greifen und nichts bewirken.

Das gehört zu den Grundlagen von CSS.

Quote from hgx

3. was steht für .boxesSidebarRight bzw. wo holst Du das her? bzw. was muss da bei mir rein?

Rechtsklick auf ein Element -> Untersuchen und dann kann man im HTML Quelltext herumklicken, sieht die CSS Klassen / IDs und sieht zusätzlich auch den aktuell genutzten CSS Code für jedes Element. Falls man mehr mit CSS vorhaben sollte, wäre es auf jeden Fall sehr hilfreich, wenn man sich da einarbeiten würde.

.boxesSidebarRight steht, wie der Name schon vermuten lässt, für Boxen in der rechten Seitenleiste. Für Boxen im Inhaltsbereich brauchst du in der Regel keine zusätzliche Angabe. Das ist bei Boxen in der Seitenleiste nur nötig, weil diese standardmäßig über .boxesSidebarRight .box:not(.boxBorderless) ihre Hintergrundfarbe erhalten und um das zu überschreiben, muss man in diesem Fall auch mit .boxesSidebarRight arbeiten. Sofern du dich etwas in die Grundlagen von CSS einarbeitest, wirst du das schnell verstehen.

Edit:
Da hab ich mir wohl zu viel Zeit gelassen. Jetzt war schon jemand schneller

Die Frage ist, was du hier versuchst. Du gibst im CSS die Klasse .box.default01 an, gibst dieser eine background-color:rgb(229,240,241); //grau und wählst dann wiederum selbigen Selektor und gibst dann dort background-color:rgb (255,255,249); //gelb an. Das sich das überschreibt, ist logisch. Wenn du den Hintergrund einer jeweiligen Box ändern willst, musst du schon mit [data-box-identifier="X"] arbeiten, z. B. .box[data-box-identifier="com.woltlab.wbb.HotThreads"].default01 {...}.

Evtl. wäre ein Link zur Liveansicht echt ratsamer, damit man deinen Beschreibungen zumindest ansatzweise folgen und dir auch dementsprechende Hilfe anbieten kann.

Einfach mal deinen ursprünglichen Code mit dem jetzigen Code vergleichen. Speziell die Selektoren. Da könnte was auffallen.

Vorher:

Quote from hgx

Code

.box[data-box-identifier="com.woltlab.wcf.genericBox31"] {

.box[data-box-identifier="com.woltlab.wcf.genericBox31"] .boxContent {

Jetzt:

Quote from hgx

Code

.box.default01 {

.box.default01 {

Du hast beim jetzigen Code das  .boxContent beim unteren Selektor entfernt. Du sprichst jetzt zweimal genau den selben Selektor an und das überschreibt sich nunmal gegenseitig. Also das untere das obere. Du sagst quasi X ist Farbe 1 und danach sagst du X ist Farbe 2. Dann ist X am Ende halt Farbe 2.

Quote from hgx

die ID hatte sich geändert.

Was ja völlig egal ist, weil du eh nicht mehr mit der ID der Box arbeitest, sondern mit einer CSS Klasse.

Quote from hgx

Setze ich .boxContent oben rein, habe ich das Grau hinter der Schrift und den rest weiß.

Und das ist nicht das was du willst? Oder was genau ist das Problem? Wie sieht denn dein jetziger Code aus, nachdem du das .boxContent wieder hinzugefügt hast?

Bleibt noch folgende Frage offen:

Quote from ReeN

Und das ist nicht das was du willst? Oder was genau ist das Problem?