Das CSS Layout einer Box Xfach übernehmen

  • Affected Version
    WoltLab Suite 5.2

    Hallo,

    ich möchte eigentlich nur das CSS Layout der Box übernehmen wenn ich "Ausgewählte Boxen auf dieser Seite anzeigen" ankreuze, dann habe ich ja den Inhalt der Box mit dabei (was ja praktisch sein könnte).

    Wenn ich aber z.B: 50 (fünfzig und mehr) Seiten habe, kann ich ja unmöglich jedesmal, mit einer neuen ID, die CSS, mit einem neuen Eintrag regelrecht zumüllen. Anders gesagt, ich möchte eine leere Box + CSS Layout auf X Seiten einfügen. ohne jedesmal neue Einträge in der CSS.

    Übersehe ich eine Möglichkeit?

    hgx

  • 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

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Hallo norse,

    danke für den Tipp, hab aber Probleme den umzusetzen. Ich kann im ACP ja nur eine Klasse bei den Seiten vergeben.

    Ich gebe der neuen Seite Ihre ID

    body[data-page-id="was auch immer"] .die Klasse

    also die Klasse der Seite wo die box schon drauf ist, dann hab ich aber nicht die box angesprochen.

    Oder kann ich unabhängig vom ACP eine Klasse für die Box vergeben und die dann vor die neue Seite Stellen?

    Hmmm, wie sähe dies aus?

    (kann mich heute nicht richtig konzentrieren, muss schon wieder raus, bin ca. 19/19:30 wieder da)

    mfG. hgx

  • Hallo norse,

    sorry, frag mich nicht warum, hab da nix dergleichen gesehen gehabt. Ich glaub ich pack für Heute ein, muss auch noch was Essen.

    mfG.hgx

  • Hallo norse,

    ich wollte erst noch mal (ohne neue CSS Einträge) folgendes ausprobieren:

    unter neue Funktionen steht:

    "Kopieren von Boxen und Seiten

    Um das Erstellen ähnlicher Boxen und Seiten zu erleichtern, können diese kopiert werden, wodurch das Formular zur Erstellung neuer Boxen/Seiten geöffnet wird, das mit den Daten der kopierten Box/Seite vorausgefüllt ist."

    "Es werden nur die in diesem Formular sichtbaren Einstellungen übernommen."

    Wenn man alte Inhalte der Ur-box noch braucht, ok. Kann die CSS von der Ur-box ja so nicht übernehmen.

    Die (ich nenne sie mal so) Ur-box hat die Klasse: txtbox01-bew

    Die neuen Box hat die gleiche Klasse(angelegt im Formular unter CSS Klassen, alte und neue box gleich).


    Code
    // neue box
    .txtbox01-bew .boxContent .box[data-box-identifier="com.woltlab.wcf.genericBox30"]

    so

    Code
    // neue box
    .txtbox01-bew .box[data-box-identifier="com.woltlab.wcf.genericBox30"]

    natürlich auch nicht. Cache natürlich geleert. Gehe da wohl zu naiv mit CSS um, wie sähe das richtig aus?

    mfG. hgx

  • 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

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Hallo norse,

    noch mal von vorne:

    1. ich habe nachträglich für die Ur-box und neu für die neue Box, im Formular, die Klasse gesetzt, default01.

    1.a die neue Box wird ohne CSS Layout angezeigt.

    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...}

    Meine Box ist im Im Inhaltsbereich oben und hat den Namen antik.

    .? .box .default01

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

    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.

    mfG. hgx

    PS. sicher hast Du recht das ich was nicht verstanden habe.

  • 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

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • 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:

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

    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.

    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.

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

    Na dann versuche ich mal mein Glück.

    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...}

    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".

    .? .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.

    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 ^^

    Edited 2 times, last by ReeN (January 22, 2020 at 8:36 PM).

  • Hallo zusammen,

    @ norse,

    lieben Dank für Deine bisherige Geduld, tut mir Leid, dass ich Dich nunmehr genervt habe, kann Dich durchaus verstehen.

    @ Tobias 777

    jetztverstehe ich das erst, ich wußte ja zuerst nicht, dass ich die Absicht haben werde das Layout der "Ur-box" Xmal zu verwenden, also hatte ich die Box mit dem data-box-identifier angesprochen.

    Besten Dank für die Aufklärung!

    @ ReeN

    Quote

    .box.default01 wäre ein Element, welches die Klassen box und default01 hat. <-- Das wäre hier beim WSC der Fall.

    sorry, die Leerstellen waren ein Tippfehler.

    Quote

    Rechtsklick auf ein Element -> Untersuchen und dann kann man im HTML Quelltext herumklicken,

    ja da hätte ich nachsehen sollen, insbesondere da ich dort schon so einiges gefunden hatte, mein Fehler. Muss mich da jedoch noch mehr mit befassen.

    Auch an Dich besten Dank! Ich hab da wohl was von Anfang an nicht richtig mitbekommen, dass man die Box nicht direkt ansprechen darf, wenn man sie Xmal verwenden will. Ich sag später natürlich noch Bescheid wenns geklappt hat.

    mfG. hgx

  • Hallo zusammen,

    Vorweg: es funktioniert die Übernahme mit der CSS Klasse, wie oben beschrieben (nochmals danke für die Mühe). Die Aufteilung der Flächen funktioniert auch, ebenso alle Abstände zueinander.

    Leider werden meine Farbangaben nur zum Teil und oder verkehrt herum übernommen, auch bei Austausch der Farbwerte, Grau ist immer hinter der Schrift.

    Hier mal ein Screenshot:

    Seit Tagen versuche ich das wieder hinzubiegen leider vergeblich, einmal ist die graue Fläche sogar schwarz geworden und die Schrift dahinter hell.

    Den Cache im ACP und den Browsercache hab ich öfter gelöscht. Hier mal ein Screenshot. Hell Gelb ist jetzt weiß. Keine Ahnung warum.

    Ich sehe den Fehler einfach nicht, kann mir nochmals jemand helfen?

    (dass wäre sehr nett)

    mfG.hgx

  • 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.

  • Hallo Aze,

    [data-box-identifier="X"] das hatte ich ursprünglich und funktionierte natürlich , z.B. so:

    Code
    .box[data-box-identifier="com.woltlab.wcf.genericBox31"] {
      background:lightgreen;   padding:20px 15%;
    
    }
    
    .box[data-box-identifier="com.woltlab.wcf.genericBox31"] .boxContent {
      background:yellow;
      padding:5px;
    
    }


    jedoch über die Klasse nicht.

    Code
    .default01

    spare ich ja bei zukünftigen, sich ständig wiederholenden, Boxen neue CSS Einträge. Es ist nur eine Box, wie auf dem Screenshot, hat schon mal funkioniert mit 2 Farben. Bin nur Offline auf meinem Home Server. Was Du oben schriebst leuchtet ein, muss irgendwas an Code gekillt haben. Also die eine Box grau soll gelb werden und was jetzt weiß aussieht grau.

    Ich versuche nochmal was.

    mfg. hgx

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

    Vorher:

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

    Jetzt:

    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.

  • Hallo Reen,

    die ID hatte sich geändert.

    so habe ich, trotz cache leeren, überhaupt keine Farbe mehr drin.

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

    Ich habe also entweder nur die Schrift grau hinterlegt oder gar keine Farbe. Es funktioniert nicht.

    mfG. hgx

    Edited once, last by hgx (January 26, 2020 at 7:17 PM).

  • 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.

    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?

  • Hallo Reen,

    zumindest funktioniert die "Vererbung" der Box.

    mfG.hgx

    PS. die graue Farbe hinter der Schrift soll gelb sein, alles ausserhalb des Textfeldes soll grau sein. Also umgekehrt.

    Edited once, last by hgx (January 26, 2020 at 8:12 PM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!