Per CSS mehrere Boxen ansprechen

  • Guten Tag, ich möchte im CSS-Editor mehrere Boxen gleichzeitig einbinden. Leider verstehe ich nicht, wie das gemacht werden soll. Aktuell habe ich eine Box definiert und fertiggestellt. Die anderen zwölf Boxen sollen gleich aussehen. Kann ich einfach die Box-ID hinzufügen oder muss ich für jede Box den Code mit einer neuen ID erstellen?

    Vielen Dank für die Weiterhilfe.

    Der Code: (in der Hoffnung, dass dies alles richtig ist)

  • Hallo,

    du kannst alle benötigten Selektoren, auf die derselbe Code angewendet werden soll, in Form einer Aufzählung angeben.

    Beispiel anhand des ersten Teils deines genannten Codes:

    CSS
    .box[data-box-identifier="com.woltlab.wcf.genericBox62"],
    .box[data-box-identifier="com.woltlab.wcf.genericBox63"],
    .box[data-box-identifier="com.woltlab.wcf.genericBox64"] {
    	background-color: #e5f4ffff;
    	border-radius: 20px;
    	padding:3px;
    }
  • Du kannst den Boxen beim Erstellen eine Klasse zuweisen, dann nutzt du eben diese eine Klasse für alle Boxen die gleich aussehen sollen.

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

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

    ersetzt du dann durch die Klasse.

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

    Edited once, last by Hundiiiiiiiiii (May 12, 2024 at 12:02 PM).

  • Du kannst den Boxen beim Erstellen eine Klasse zuweisen, dann nutzt du eben diese eine Klasse für alle Boxen die gleich aussehen sollen.

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

    ersetzt du dann durch die Klasse.

    Vielen Dank für den Vorschlag.

    Ich habe versucht, eine Klasse zu erstellen und die Klasse im Feld 'CSS-Klasse' der Box eingegeben. Während .boxContent einwandfrei funktioniert, scheinen .box und .boxTitel nicht zu reagieren. Bei der ersten Methode (siehe erstes Thema oben) funktioniert der Code.

    Da ich noch nie eine Klasse erstellt habe, weiß ich nicht, wo der Fehler liegt. Vielleicht könnt ihr mir weiterhelfen.

    Vielen Dank für euere Unterstützung


  • This is the Way:

    Du hast .box in .columnLayout3 gepackt was nicht funktioniert da beide Klassen auf der selbe Ebene liegen, daher ist in dem Fall:

    .columnLayout3.box

    richtig.

    In in der Boxenverwaltung muss die Klasse ohne Punkt angegeben werden, also nur columnLayout3:

    Deine Box sieht bei mir so aus:


    Edit:

    Die Anweisung im letzten Beitrag von mir war leider nur so semi richtig 👀

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • Vielen Dank, das hat jetzt auch bei mir funktioniert. Ich habe dabei etwas dazugelernt.

    Ein weiteres Problem stellt das Einsetzen von Textumbrüchen und die Anzeige über die gesamte Breite dar. Ich habe den Code hier etwas überarbeitet; jedoch werden die Umbrüche der Testüberschrift und das Bild nicht über die gesamte Breite angezeigt.



    Hier ist noch einmal der erweiterte Code:


    Vielen dank für die Hilfe

  • text-indent: 1lh;

    einfach auf p auslagern.

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • text-indent: 1lh;

    einfach auf p auslagern.

    Guten Abend, ich habe es gerade versucht, aber es scheint nicht zu funktionieren. Das Bild aus der Mediendatenbank bleibt unverändert. Es sollte sich jedoch unter dem Haupttitel und zwischen dem Text über die gesamte Breite erstrecken.

  • Hast du den Code aus meinem Beitrag komplett übernommen? Das sieht dann so aus:

    mit deinem Code:

    Ich hatte das schon für dich angepasst:

    und dann noch mal erklärt was ich geändert habe.

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • Guten morgen,

    Ja, das ist verständlich. Es hat bei mir auch geklappt. Was mich allerdings stört, ist das Headerbild. (siehe Screenshot 1 ) Es wird zwar ordentlich in der ersten Kolumne dargestellt, sollte aber eigentlich zwischen der Hauptüberschrift und dem Content-Text über die volle Breite hinweg (siehe Screenshot 2 ) angezeigt werden.

    Screenshot 1


    Screenshot 2

    Edited 2 times, last by rmordico (May 13, 2024 at 7:12 AM).

  • rmordico
    Eine weitere Möglichkeit eines gleichen zu verwirklichen wäre:

    Gruss,
    Andreas

    _________ Belarusinfo.ru _________

    Informationen, Nachrichten und Diskussionsforum zu Belarus (Weißrussland)

    _________ WCS-Playground.ru _________

    Deine Community für deine WCS oder dem WBB

  • Sehr sinnvoll jetzt mit HTML ankommen wenn er Text verwendet und sich schon eine eigene Lösung erarbeitet hat 🤦‍♂️


    Teste das mal:

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • Hundiiiiiiiiii
    Ich schrieb, dass es eine weitere Möglichkeit wäre eines gleichen zu verwirklichen. Ob man diesen nachgehen möchte, bleibt jedem selbst überlassen. Abgesehen davon ist es auch nicht schwer ein HTML-Quellcode in einer Box oder Seite auszutauschen.

    Gruss,
    Andreas

    _________ Belarusinfo.ru _________

    Informationen, Nachrichten und Diskussionsforum zu Belarus (Weißrussland)

    _________ WCS-Playground.ru _________

    Deine Community für deine WCS oder dem WBB

  • Sehr sinnvoll jetzt mit HTML ankommen wenn er Text verwendet und sich schon eine eigene Lösung erarbeitet hat 🤦‍♂️


    Teste das mal:

    Vielen Dank, dass es bis hierhin funktioniert hat. Leider haben wir vergessen, die Bildunterschrift einzuberechnen. Wie kann ich diese hinzufügen, damit sie direkt unter dem Bild erscheint?

    Danke

  • Teste das mal:

    Habe ein:

    Code
    			.mediaBBCodeCaption {
    				display: block;		
    			}

    hinzu gefügt.

    Beim Durchsehen des Codes ist mit aufgefallen das du die Klassen .h1 und .img verwendest, die gibt es jedoch gar nicht, es sei denn du hast sie angelegt?

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • Beim Durchsehen des Codes ist mit aufgefallen das du die Klassen .h1 und .img verwendest, die gibt es jedoch gar nicht, es sei denn du hast sie angelegt?

    nein die habe nicht extra angelegt. "Deiser Fehler wurde ja durch Ihren Code verbessert" ich kann das also léschen ?

  • Ja, die haben ja sowieso keine Auswirkungen. Teste das mal:

    Habe auch die doppelten Farben und Radien entfernt.

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • Ja, die haben ja sowieso keine Auswirkungen. Teste das mal:

    Habe auch die doppelten Farben und Radien entfernt.

    scheint zu funktionieren. Forum - Comicline asbl

    Ich denke, das sieht ziemlich gut aus und ähnelt sehr einem Zeitungsartikel. Vielen Dank für Ihre Hilfe.

Participate now!

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