CSS bearbeiten - Anleitung?

  • Betroffene Version
    WoltLab Suite 5.2

    Hallo,

    meine Problematik ist eigentlich ganz einfach: Ich möchte gerne bei einer über ACP selbst erstellten Box in der rechten Seitenleiste einen Rectangle Banner einbinden, aber er passt nicht ganz rein.

    Also wäre es gut, wenn ich der Box die Ränder wegnehmen könnte und dann würde es gehen. Aber ich weiß nicht wo ich das machen muss. Ich habe in der Administrationsoberfläche zwar die Stile gefunden und kann dort mit den Farben herumspielen, aber wie ich das bestehende CSS über die erweiterten Einstellungen überschreiben muss, geht schon über mein Verständnis.

    Kann mir entweder jemand bei meinem konkreten Problem mit der selbst erstellten Box mit dem Banner helfen oder einen Link zu einem Tutorial oder ähnliches posten, wie man CSS in Woltlab vernünftig bearbeitet?

    Viele Grüße

    Wulfman

  • Hallo Wulfman,

    das könnest du du machen indem du deiner Box eine CSS-Klasse gibst z.B. boxbanner. Und dann im Bereicht ACP -> Anpassung -> Stile ->Erweiterte Einstellungen folgendes einbindest.

    Code
    .box .boxbanner {
        border: none;
    }

    VG Shorty

  • Das klappt so leider nicht. Wenn ich der Div, in der der Banner selbst steckt, diese class mitgebe, dann verändert er es innerhalb der Box, aber die Ränder der Box (boxContent nehme ich mal an), fasst er nicht an (habs auch mit margin und padding versucht). Da muss ich wohl ein bestehendes CSS überschreiben? Allerdings kommt die class="boxContent" mehrmals vor, ich will sie nur in der einen Box ändern.

    So sieht es jetzt im Quellcode aus:

    Code
    <div class="box boxbanner" data-box-identifier="com.woltlab.wcf.genericBox31">
            
            
        <div class="boxContent">
            <div id="Banner"></div>    </div>
    </div>

    Hier noch zur Verdeutlichung ein Screenshot:

    Viele Grüße

    Wulfman

    2 Mal editiert, zuletzt von Wulfman (15. Oktober 2020 um 14:32) aus folgendem Grund: Screenshot beigefügt

  • Ok, dann müsstest du .box .boxbanner wie folgt anpassen.

    Code
    .box .boxbanner {
        padding: 0px;
    }

    Dann wird der Inhalt von div.boxContent komplett ohne "weißen Rahmen" dargestellt.

    VG Shorty

  • Glaub _shorty meint das du der Box eine eigene Klasse (in dem Fall boxbanner) zuweisen sollst, nicht im Quellcode sondern im ACP bei der Box selber!

    Danach kannst du die Box mit der Klasse im ACP-> Anpassung->Stillunabhängiges CSS direkt ansprechen.

    Code
    .box .boxbanner {
        border: none;
        padding:0px;
    }

    Code musst dir anpassen

    Im Quellcode lösch die unnötigen divs

    Gruß, Sascha

  • Mach die Box doch einfach mal sichtbar für Gäste, dann kann man direkt vor Ort schauen.


    Gruß norse

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

  • Bitte haltet mich nicht für bescheuert, aber ich bin der Ansicht es exakt so gemacht zu haben.

    Nein alles gut.

    Danke für den Link. Die korrekte Formulierung für das CSS muss dann wie folgt lauten:

    Code
    .boxContainer div.box.boxbanner {
        padding: 0px;
    }

    Dann geht es auch ;)

    Grund hierfür ist die Vererbungslogik von CSS. Daher hat das nicht gleich geklappt .

    VG Shorty

  • Gehst Du bitte noch einmal zurück auf den Stand von Beitrag #3 in diesem Thema? Aktuell wird der Inhalt ja gar nicht angezeigt, oben war das noch der Fall.


    Gruß norse

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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!