Anpassungen mobile Ansicht

nim · March 30, 2018 at 1:42 PM

Hallo,

ich möchte gerne nur mobil diese Änderungen per CSS vornehmen:

Breadcrumbs ausblenden
Titelzeile einfärben (Ich habe div. Elemente in der Desktop-Ansicht weiß eingefärbt. Die Titelleiste in der mobilen Ansicht ist davon leider nun auch betroffen)

Vielen Dank für die Unterstützung!

ReeN · March 30, 2018 at 3:14 PM

Quote from nim

Breadcrumbs ausblenden

Meinst du so?

CSS

@media screen and (max-width: 768px) {
    .breadcrumbs {
        display: none;
    }
}

Quote from nim

Titelzeile einfärben

Welche Titelzeile meinst du?

nim · March 30, 2018 at 5:11 PM

Super, vielen Dank!

Ich meine die Titelzeile/-leiste in der mobilen Ansicht, in der links das Menü-Icon, mittig das Logo und rechts der Avatar/Login angezeigt wird. Bei mir ist der Bereich weiß und die Icons sind es leider auch. Deswegen würde ich die Hintergrundfarbe gerne ändern. Aber halt nur in der mobilen Ansicht. Auf dem Desktop ist alles gut.

DANKE!

ReeN · March 30, 2018 at 5:13 PM

CSS

@media screen and (max-width: 1024px) {
    .pageHeaderPanel {
        background-color: rgba(255, 0, 0, 1);
    }
}

nim · March 30, 2018 at 5:19 PM

Damit erhalte ich leider einen Fehler im Parser.

ReeN · March 30, 2018 at 5:25 PM

Ich hab den Code mal korrigiert. Der Code selbst passte, aber die Einrückungen waren wohl irgendwie fehlerhaft. Keine Ahnung was genau da falsch lief.

Gino Zantarelli · March 30, 2018 at 5:26 PM

Seit dem WSC 3.0.x.x haben sich die Bezeichnungen der Breakpoints geändert - siehe hier: https://docs.woltlab.com/view_css.html#available-breakpoints

du müsstest also nun UNTEN in der CSS-Deklaration deines Stils folgendes eintragen:

Code

@include screen-sm-down {
.breadcrumbs {
    display: none;
}
}

ReeN · March 30, 2018 at 5:28 PM

Funktioniert am Ende beides. Ich persönlich nehme lieber die px Werte.

nim · March 30, 2018 at 5:32 PM

ReeN

Super vielen Dank! Der neue Code klappt.

Kurze weitere Fragen:

Wie kann ich in der mobilen Ansicht ein anderes Logo in der ausgeklappten Navigation anzeigen lassen als in der Desktop-Version?
Wie kann ich das Logo für die Navigation im pageHeaderPanel wirklich weiß färben? Es wirkt jetzt nämlich plötzlich gräulich.

Gino Zantarelli

Vielen Dank für den Code! Soll dieser zusätzlich oder an Stelle von ReeNs Code eingebaut werden?

Gino Zantarelli · March 31, 2018 at 12:15 PM

Der Code von mir wird (wenn du aktuell bleiben & keine älteren Codes verwenden möchtest) anstatt der Lösung von Reen genommen.

Das Logo für die Mobilansicht kannst du hochladen in den Stileinstellungen deines verwendeten Stils > Globale Einstellungen.

nim · March 31, 2018 at 5:42 PM

Vielen Dank für deine Antwort.

Das mit dem Logo ist mir klar. Normalerweise wird jedoch in der mobilen Ansicht oben, mittig das "mobile Logo" und bei aufgeklappter Navigation das "normale Logo" angezeigt.

Ich möchte jetzt, dass in der mobilen Ansicht und bei aufgeklappter Navigation ein anderes als das im ACP definierte Logo angezeigt wird. Gibt es hier eine Möglichkeit?

Ganz vielen Dank!

Gino Zantarelli · March 31, 2018 at 11:01 PM

Hier eine "dreckige" Lösung:

CSS

.menuOverlayLogoWrapper .menuOverlayLogo {
    background-image: url(#{$style_image_path}logoS.png) !important;
}

Das Logo muss eine png-Datei sein mit dem Titel logoS und in deinem Stilordner des verwendeten Stils vorhanden sein.

nim · April 1, 2018 at 8:15 AM

Danke! ?

Anpassungen mobile Ansicht

Participate now!

Users Viewing This Thread