Ränder um erstelle Boxen wie bei Blogübersicht

  • Affected Version
    WoltLab Suite 5.3

    Ich habe auf einer Seite Boxen erstellt. Diese sind derzeit aber nicht mit Rand (wie z.B. bei der Blogübersicht).


    Wie kann ich dies bewerkstelligen? Danke vorab.

    • Official Post

    Auf welchen Rand beziehst Du Dich genau? Wurde dieser evtl. per eigenem CSS-Code hinzugefügt?


    Poste am besten entweder Screenshots oder Links zu den relevanten Seiten.

  • Jetzt weiß ich noch immer nicht, welche Umrandung du meinst ;).


    Aber im Prinzip würde ich das (für eine einzelne Box, ohne Anzeige des Titels) so lösen:



    Bei .box[data-box-identifier="com.woltlab.wcf.genericBox42"] setzt du natürlich statt 42 die ID deiner Box ein.


    Alternativ bietet sich an, der Box (den Boxen) eine CSS Klasse mitzugeben, besonders, wenn das Layout für mehrere Boxen gelten soll.

    Dann ersetzt du im CSS-Code .box[data-box-identifier="com.woltlab.wcf.genericBox42"] mit .nameDeinerKlasse


    lg,

    Chris

  • Jetzt weiß ich noch immer nicht, welche Umrandung du meinst ;) .

    Danke für die Tipps.


    Vielleicht habe ich mich schlecht ausgedrückt.


    Eigentlich meinte ich das Design wie bei den Blog-Boxen. Diese sind ja nur im unteren Teil eingerahmt, mit Rand.

  • Eigentlich meinte ich das Design wie bei den Blog-Boxen. Diese sind ja nur im unteren Teil eingerahmt, mit Rand.

    Das täuscht!


    Die Umrandung im Woltlab-"Blog" ( besser gesagt, die Umrandung der Items in der Artikel-Liste) ist mit box-shadow gemacht



    und umschließt auch das Bild,



    was man aber nur bei hellen Bildern sieht.


    Haben deine Boxen ein Box-Bild? Position im Inhaltsbereich oder in der Seitenleiste? Willst du überhaupt Boxen einrahmen oder divs innerhalb einer Box? Häng doch bitte einen Screenshot an, wie du dir das etwa vorstellst bzw. was du dzt. schon hast!


    lg,

    Chris

  • Hm, die Screenshots bringen jetzt nicht wirklich viel neue Erkenntnisse. Ist es möglich, einen Link zur Verfügung zu stellen? Auch gerne per PN. Dann wäre das schnell gelöst.


    lg,

    Chris

  • Die Seite ist noch nicht online, da für einen Verein. Würde so nichts bringen.


    So, wie ich es bisher verstanden habe, geht es bei den Blogumrandungen um Schatteneffekte.

  • Moin

    Versuch es mal so:


  • So, wie ich es bisher verstanden habe, geht es bei den Blogumrandungen um Schatteneffekte.

    Ob Rand oder Schattierung ist letztlich aber nicht die Frage. Sondern dass man per CSS die richtigen Elemente bzw. Klassen anspricht.


    Probier mal das, falls es klappt, müsste man .boxContent dann noch entsprechend einschränken:

    Code
    .boxContent{
    box-shadow: 0 0 3px rgb(0 0 0 /12%), 0 1px 2px rgb(0 0 0  /24%);
    background-color: #fafafa;
    padding: 5px;
    border-radius: 3px;
    }


    lg,

    Chris

  • Ok, das hat schon etwas besser geklappt. Allerdings hat er noch nicht das gewünschte Design wie bei der Blogauflistung UND beim Headermenü setzt er dann auch einen Rand.

  • Super, das ist mal ein Anfang!

    UND beim Headermenü setzt er dann auch einen Rand.

    klar, ich habe ja geschrieben, dass man .boxContent noch einschränken muss, sonst gilt das für alle Boxen.


    Wie man eine bestimmte Box ansprechen kann, habe ich in #7 schon geschrieben. Ist aber mühsam, wenn es mehrere Boxen betreffen soll. Ich rate dir, folgendes zu machen:


    Du bearbeitest deine Box bzw. deine Boxen und gibst ihr / ihnen unter "Allgemeine Daten" eine CSS-KLasse, z. Bsp. "myBox":

    über diese Klasse kannst du die Boxen dann per CSS ansprechen.


    In Zeile 1 des CSS-Codes ersetzt du .boxContent { durch.myBox .boxContent {. Dann sollte das Problem mit dem Headermenü behoben sein.


    Allerdings hat er noch nicht das gewünschte Design wie bei der Blogauflistung

    Darum können wir uns anschließend kümmern. Und bitte schreib, was noch fehlt + wieder einen Screenshot...


    lg,

    Chris

Participate now!

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