CSS-Frage

Seewie · Nov 23rd 2013

Hallo zusammen,

ich habe im Blue Temptation Stil einige Anpassungen vorgenommen u.a. die Schriftfarbe und Stil des ausgewählten Hauptmenüs (z.B. "Forum") . Bis dahin kein Problem. Der mouseover-Effekt im ausgewählten Hauptmenü bleibt jedoch immer beim Standardblau, fett. Wo kann ich die Hover-Farbe des Hauptmenüs definieren? So klappt es nicht (betreffende Stelle rot markiert):

/* main menu */
.mainMenu > ul {
background-color: rgba(0, 0, 0, .4);

> li {
> a {
border-width: 0 !important;
color: @wcfPageLinkColor;

.transition(color, .3s, ease);
.textShadow(@wcfPageBackgroundColor);

&:hover {
color: @wcfPageLinkHoverColor;
}
}

&.active > a {
color: #CCA888;
font-weight: normal;
.linearGradient(@wcfNavigationHeaderBackgroundColor, lighten(@wcfNavigationHeaderBackgroundColor, 0%), @wcfNavigationHeaderBackgroundColor);
}

&:hover {
color: #FFFFFF;
font-weight: normal;
}
}
}

Jemand eine Idee?

Garma · Nov 23rd 2013

CSS

.mainMenu > ul {
    ...

    > li {
        ....

        &.active > a {
            ...

            &:hover {
                color: #fff;
            }
        }
        ...
    }
}

Display More

Die 3 Punkte sind nur die Platzhalter für den Rest der hier ja unwichtig ist. Du musst für das active Hover natürlich &:hover unter li -> &.active > a anwenden

Seewie · Nov 23rd 2013

Supi Garma - funktioniert Weitere Frage: Wäre es im Hinblick auf Performance und Google-Indexierung nicht sinnvoller das Seiten-Logo "Burning Board" als Schrift statt als Bild darzustellen? Schonmal jemand implementiert?

Seewie · Nov 23rd 2013

Komme mit der Syntax noch nicht recht klar. Wenn ich im Navigations-Menü Einträge wie "ungelesene Beiträge" oder Unerledigte Themen einfärben möchte, wie muss ich das tun? Meine Versuche führten nicht zum gewünschten Ergebnis:

/* navigation header / footer */
Media all and (min-width: 801px) {
.navigation {
border-color: darken(@wcfSidebarBackgroundColor, 8%);

> ul {
&.navigationIcons {
> li {
> a {
color: #FFFFFF; ...
}

> a:hover {
background-color: @wcfSidebarBackgroundColor;
}
}
}

Black Rider · Nov 23rd 2013

Quote from Testernk

&.navigationIcons {

Du hast die falsche Klasse. Damit sind nur die Icons rechts selektiert. Du benötigst aber .navigationMenuItems.

Übrigens: Hex-Codes sind mit Kleinbuchstaben zu schreiben.

pash · Nov 23rd 2013

Schrift :

CSS

.navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a {color: #000000;}

Hintergrund :

CSS

.navigationHeader {background:#ffffff;}

Seewie · Nov 23rd 2013

dank Euch

Seewie · Nov 24th 2013

Wenn ich den Schatten der Icons um Hautpmenü ändern will, kann ich das über

.icon {text-shadow: 0 1px 0 #000000;}

hinbekommen. Habe gesehen dass es auch eine Less-Funktion .textShadow(...) gibt. Wäre es sinnvoller diese anstatt der og. Umsetzung zu verwenden?

Black Rider · Nov 24th 2013

Im Normalfall ist es immer sinnvoll, die vorhandenen Mixins zu nutzen. Bitte aber genau anschauen, wie diese aufgebaut sind (am Beispiel von .textShadow z.B. gibst du die Hintergrundfarbe des Elements an, anhand dessen dann die Schattenfarbe automatisch "berechnet" wird).

Nur wenn du es wirklich anders brauchst, ist es sinnvoll, mit Eigenkreationen zu arbeiten.

Seewie · Nov 24th 2013

Hallo Back Rider,
gibt es denn eine Übersicht oder Erläuterung über die verfügbaren Mixins?

**Alexander Ebert** · Nov 24th 2013

Die Mixins stehen in wcf/style/bootstrap/mixin.less

Seewie · Nov 24th 2013

danke

Seewie · Dec 8th 2013

Hallo,

ich würde gerne in der Forenübersicht zwei Dinge ändern:

- Forentitel und Icon für gelesen/ungelesen vertikal zentrieren

Ich möchte die jeweils aktiven Nutzer im Forum nicht anzeigen und somit alles vertikal gleich ausrichten...

Beim Icon habe ich mit position absolut, top: 14px und left 1% die Zentrierung hinbekommen, beim Forentitel klappt das nicht. Wie ist hier das geschickteste Vorgehen?

norse · Dec 8th 2013

Geht´s eventuell so:

Code

.wbbBoardList .icon , .wbbBoardList  .box32 .containerHeadline {position:relative; top:14px;left:1%;}

Gruß norse

Seewie · Dec 8th 2013

danke für Dein Feedback. Das verschiebt jedoch gleich den Pfeil zum Ein- und Ausblenden der Foren mit nach unten. Würde gerne nur die Forentitel ansprechen...?

norse · Dec 8th 2013

Dann eben so:

Code

.wbbBoardContainer .icon , .wbbBoardContainer .containerHeadline {position:relative; top:14px;left:1%;}

Gruß norse

Seewie · Dec 9th 2013

klappt soweit ganz gut - allerdings verursacht die top:14px-Positionierung Probleme im mobilen Design. Kann man definieren, dass im mobilen Design diese CSS-Änderung nicht vorgenommen wird?

Black Rider · Dec 9th 2013

Einfach mit dem entsprechenden @media-Query:

CSS

@media only screen and (min-width: 801px) {
}

Seewie · Dec 9th 2013

thx - funktioniert!

Seewie · Dec 9th 2013

neue Frage zur Forenübersicht: ich habe nur wenige Foren so dass eine Verlinkung auf Kategorien wie "Burning Board 4.0" keinen Sinn macht. Um es minimalistisch zu halten möchte ich deshalb den Pfeil zum ein- und Ausblenden einer Forum-Kategorie ausblenden. Dessen Funktion soll ein Klick auf den Kategorienamen wie "Burning Board 4.0" übernehmen (anstatt auf eine Forenübersichts-Unterseite mit 2 Foren "Fehler und Probleme" sowie "Vorschläge und Wünsche" zu linken).

Das ausblenden des Pfeils ist mit
.icon-folder-close:before {display:none;}
schnell gemacht.

Doch schaffe ich es per CSS die Funktion des Pfeils auf den Kategorie-Namen zu übertragen? Mit

.tabularBoxTitle > header > h2 > a {pointer-events: none;}

kann ich den Link schonmal deaktivieren. Eine Idee?

CSS-Frage

Participate now!

Share