CSS-Anpassung: wbbBoardList Abgerundete Ecken oben?

  • Hallo zusammen,

    Bin an einen reduzierten Stil. Da ich in der Forenübersicht die .tabularBoxTitle praktisch ausblende, fehlen mit die runden Ecken im jeweils ersten Forum. Scheinbar kann man die erste Zeile (im Screenshot "Birken") nicht separat ansprechen oder hat jemand eine Idee?

    in einigen Stilen fehlt bei den breadCrumbs der Hintergrund und die Pfeile sind kleine Zeichen z.B. http://wewexmedia.de/index.php/Board/2-Neuigkeiten-und-Ankündigungen/ Kann ich das mit CSS umsetzen und hat jemand ggf. schon den Code dafür?

    Seewie Signatur

    Edited 2 times, last by Seewie (March 1, 2014 at 9:07 PM).

  • Hier der CSS-Block auf dem Stil Blue Temptation:

    Gino Zantarelli

    - Wenn bei Dummheit & Arroganz Federn wachsen sollten, so würden hier einige wie Vögel durch die Luft fliegen -

    - Powerstylez.de -

  • Vesuche mal dieses:

    Code
    .containerList > li:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    und bitte zu jeder Anfrage einen neuen Thread schreiben, das verschafft eine bessere Übersicht & hilft dann auch anderen Usern mit besagten Problem ;)

    Gino Zantarelli

    - Wenn bei Dummheit & Arroganz Federn wachsen sollten, so würden hier einige wie Vögel durch die Luft fliegen -

    - Powerstylez.de -

  • @Gino: ich habe Deinen Block in den erweiterten CSS-Block ergänzt. Selbst wenn ich in dem block Schriftfarbe oder HG-Farbe ändere, verändert sich optisch nichts. Füge ich den Block ggf. nur an der falschen Stelle ein?

    Seewie Signatur

  • Kann man die first-child-Eigenschaft auch hierfür anwenden:

    .wbbBoardList .wbbDepth2.wbbBoardContainer > .wbbBoard {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    }

    Dies führt zwar zu runden oberen Ecken, allerdings in jeder Zeile anstatt nur in der ersten...?!?

    Seewie Signatur

  • Es klappt so :D

    /* Runde Ecken Forenstartseite */
    Media all and (min-width: 801px) {
    .wbbBoardList .wbbBoardContainer {
    background-color: #F5ECE9;
    }
    .wbbBoardList .wbbBoardContainer:first-child {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    }
    .wbbBoardList .wbbBoardContainer:last-child {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    }
    .wbbBoardList .wbbBoardNode1 {
    background-color: transparent;
    }
    }

    Allerdings leider nicht beim Hover. So klappts auch nicht:

    .wbbBoardList .wbbBoardContainer:first-child, .wbbBoardList .wbbBoardContainer:first-child hover {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    }

    Weiss jemand wie es richtig lauten muss?

    Seewie Signatur

  • Hallo Miracoolix,

    danke für die Unterstützung - klappt aber nicht. Wenn ich - in dem angehängten Bild - über das Forum "Birken" mit der Maus fahre, sind die oberen Ecken nicht mehr rund. Ohne Maus-Hover sind sie es durch den og. CSS-Code.

    Problem war, dass ich nicht alle ".wbbBoardList .wbbBoardContainer" mit runden Ecken versehen kann, da die Ecken nur im ersten und letzten Element rund sein dürfen. Deshalb die first- und last-child-Ansprache.

    Ich dachte dass eines davon klappt, tut es aber nicht. ich vermute ein Syntaxfehler?

    .wbbBoardList .wbbBoardContainer:first-child hover {border-top-right-radius: 5px;border-top-left-radius: 5px;}
    .wbbBoardList .wbbBoardContainer:first-child : hover {border-top-right-radius: 5px;border-top-left-radius: 5px;}

    Seewie Signatur

  • Ja, wird es wohl sein. Ist es beabsichtigt, das die Ecken beim hovern rund werden sollen? Normalerweise muss man das nicht angeben. Falls möglich, ein Link zu deinem Forum währe echt hilfreich, ansonsten gibt es hier nur weiteres fröhliches Rätselraten.

    Und weiter gehts :D

    CSS
    .wbbCategory li:first-child > .wbbBoard {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }
    CSS
    .wbbCategory li:last-child > .wbbBoard {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    }
  • Du hast es - DANKE :) Habe es unnötig verkompliziert.

    So wird auf der Startseite das erste Forum einer Kategorie mit runden Ecken oben versehen - für alle die ebenso die Kategorie-Zeile ohne HG versehen möchten:

    Media all and (min-width: 801px) {
    .wbbCategory li:first-child > .wbbBoard {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }
    }

    Seewie Signatur

  • @seewie
    Die Antwort steht in dem anderen Thema.
    Bitte nächstes mal die @User-Funktion in dem entsprechenden Thema benutzen. Das ersparrt dir das verlinken des Themas, dient der Übersichtlichkeit und ich werde dierekt auf dieses Thema aufmerksam gemacht bzw. der Nutzer den du ausschreibst. ;)

Participate now!

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