Hilfreiche CSS Schnipsel


Stichworte: Tools, Wissen / FAQ

Nachfolgend einige CSS Schnipsel, die mir weiter geholfen haben. Vielleicht helfen sie ja auch Dir. Genutzt habe ich diese unter WordPress. Meist mit dem Theme GeneratePress.

CSS Schnipsel – WordPress und Generatepress

Inhalte:

Box / Grid mit Schatten versehen | Überschrift-Icon rechts platzieren |
Container beim Srollen fixieren | Strich beim Zitat anpassen | CSS Klasse zum Ausblenden von Elementen


Eine Box mit Schatten versehen

Du hast eine Box, zum Beispiel um neueste Beiträge anzuzeigen. Diese soll nun mit einem Schatten versehen werden:

/* Beiträge */
.is-flex-container li {
    flex: 1;
    box-shadow: 1px 1px 10px silver;
	  padding-left:10px;
	  padding-right:10px;
	  padding-bottom:20px;
	  padding-top:10px;
	
}

Überschrift – Icon rechts anzeigen (Generatepress)

Es gibt leider keine Option, um in der Überschrift das Icon rechts zu platzieren. Das geht mit einem kleinen CSS Befehl:

.gb-headline.r-icon > span.gb-icon { 
   order: 1;
   margin-left: 15px;
}

Container fixieren, Sticky, nicht scrollen (Generatepress)

Du hast einen Text, zum Beispiel das Inhaltsverzeichnis. Das soll nun beim Scrollen oben bleiben, also nicht mit scrollen.

* Sticky Inhaltsverzeichnis */
.mysticky > .gb-inside-container {
	position: sticky;
	top: 0;
}

Zitat, Strich in der Dicke und Farbe ändern

Beim Zitat erscheint in der Regel links ein Strich. Den willst du ändern.

/* Zitat Rahmen */
blockquote {
    border-left: 4px solid #b89573; 
}

CSS Klasse zum Ausblenden von Elementen

Manchmal möchte man bestimmte Dinge abhängig vom Device ausblenden. Wenn das Theme das nicht vorsieht, kann man sich mit CSS weiterhelfen

/* PC oder Mobile ausblenden */
@media (max-width: 768px) { 
.nur-pc {
    display: none;
}
}
@media (min-width: 769px) { 
.nur-mobile {
    display: none;
}
}

Schreibe einen Kommentar