CSS-Anpassung: wbbBoardList Abgerundete Ecken oben?

Seewie · Feb 22nd 2014

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?

Gino Zantarelli · Feb 22nd 2014

Hier der CSS-Block auf dem Stil Blue Temptation:

Code

/* bread crumbs */
@media only screen and (min-width: 801px) {
    .breadcrumbs {
        background-color: @wcfContentBackgroundColor;
        border: 1px solid @wcfContainerBorderColor;
        border-radius: 6px;

        > ul {
            > li {
                padding-right: 0;

                .transition(max-width, .2s);

                &:hover {
                    max-width: 100%;

                    > a {
                        background-color: @wcfContainerAccentBackgroundColor;
                        position: relative;
                        z-index: 10;
                    }

                    > .pointer > span {
                        border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
                    }
                }

                > .pointer {
                    border-color: transparent transparent transparent @wcfContainerBorderColor;
                    border-style: inset none inset solid;
                    border-width: 15px;
                    display: block;
                    height: 0;
                    padding: 0;
                    right: -15px;
                    top: -3px;
                    width: 0;
                    z-index: 20;

                    > span {
                        border-color: transparent transparent transparent @wcfContentBackgroundColor;
                        border-style: inset none inset solid;
                        border-width: 15px;
                        display: block;
                        height: 0;
                        left: -16px;
                        overflow: hidden;
                        position: absolute;
                        text-indent: -9000px;
                        top: -15px;
                        width: 0;

                        .transition(border-color, .2s);
                    }
                }

                > a {
                    padding-left: 20px;

                    .transition(background-color, .2s);
                }

                &:first-child > a {
                    border-radius: @wcfContainerBorderRadius - 2 0 0 @wcfContainerBorderRadius - 2;
                    padding-left: 9px;
                }
            }
        }
    }
}

Display More

Gino Zantarelli

Seewie · Feb 22nd 2014

im ersten Beitrag ergänzt...

Gino Zantarelli · Feb 22nd 2014

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

Seewie · Feb 22nd 2014

klappt leider nicht
keine Änderung zu Vorher...?

Seewie · Feb 23rd 2014

@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 · Feb 23rd 2014

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 · Mar 1st 2014

Es klappt so

/* 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?

Miracoolix · Mar 1st 2014

CSS

.wbbCategory > ul {
border-radius: 5px;
}

Seewie · Mar 1st 2014

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

Miracoolix · Mar 2nd 2014

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

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

Seewie · Mar 2nd 2014

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 · Mar 2nd 2014

@Miracoolix

hast du zufällig auch ne Idee für

Hintergrund-Vignette: Box-Shadow bei Seiten mit geringer Höhe

Miracoolix · Mar 2nd 2014

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

CSS-Anpassung: wbbBoardList Abgerundete Ecken oben?

Participate now!

Share