Zum Inhalt springen

CSS

WordPress: Wie man die Größe des Logos im Theme Twenty Seventeen ändert

Seid meinem Umzug zu einem neuen Provider, nutze ich auch der original WordPress-Theme Twenty Seventeen und bin damit sehr zufrieden, da mir das Minimalistische und Übersichtliche des Layout sehr gut gefällt. 

Allerdings hat mich gestört, dass das Logo, welches man in den Header einbauen kann, sehr klein angezeigt wird. 
Mit folgenden Code-Schnippsel könnt ihr die Größe des Logos vergrößern, oder – wenn ihr wollt – auch anpassen:

@media screen and (min-width: 48em) {
	.custom-logo-link img {
		max-width: 700px;
	}
}

.custom-logo-link img {
    /* display: inline-block; */
    max-height: 160px;
    /* width: auto; */
}
  • Die 700 Pixel max-width ist das doppelte von den standardmässigen 300px. Um die Logogröße zu halbieren, tragt dort 150px ein.
  • Die 160px max-height ist die Verdoppeltung der 80px, die per default eingetragen sind. Möchtet ihr wieder die Hälfte des Originalzustands haben, so müsst ihr dir 40px eintragen.
  • Obigen Code fügt ihr am einfachsten im WordPress-Backend unter „Design“ > „Customizer“ > „Zusätzliches CSS“ ein.

Der Original-Post, den ich mit diesen hilfreichen Infos gefunden habe, findet ihr unter:
How To Change The Logo Size (Increase & Decrease) In Twenty Seventeen
Originally published at Bharat Karavadra.

Farbverlauf mit CSS

CSS3_LogoNachdem ich nun einige Zeit irgendwelche Hintergrundbilder auf meiner Webseite eingebaut hatte, wollte ich mal was anderes. Vielleicht auch etwas, was „leichter“ ist, und weniger Daten benötigt bzw. verursacht. Mir ist die Idee gekommen, dass es hübscher als ein einfarbiger Hintergrund wäre, wenn man einen Farbverlauf hätte. Promt gibt es im CSS dafür einen Befehl, der sowas macht und mir bis dato unbekannt war.

Folgende Befehlszeile hab ich jetzt mal bei mir im CSS eingebaut:

background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #000000 125%);

Auf folgender Seite wird dann auch noch schön erklär, was die einzelnen Bereiche der Befehlskette zu bedeuten haben.

WordPress: Hintergrund- und Rahmenfarbe der Slideshow ändern

wordpress-logo-300x300Ich verwende in letzter Zeit immer häufiger die Slideshow-Funktion, die bei WordPress integriert ist, da mir diese besser zusagt, als ein zusätzlich installiertes Plugin.
Nun ist es aber so, dass bei den Default-Einstellungen eine solche Diashow einen dunkelgrauen Hintergrund bzw. Rahmen hat. Und da mein aktuelles Theme mittlerweile sehr hell ist, hat mich dies immer etwas gestört.

Nun habe ich aber eine Lösung gefunden, wie man die Farben von Hintergrund und Rahmen verändern kann.
Man geht dazu einfach ins Backend der WordPress-Seite und dort auf „Design“, anschliessend auf „CSS bearbeiten“. In das dortige Feld kopiert man dann einfach folgenden Code:

.slideshow-window {
 background-color: #fff;
 border: 20px solid #fff;
}

Hiermit wird sowohl der Hintergrund, als auch des Rahmen auf weiß gesetzt. Die Farben könnt ihr euch ja dann anpassen, so wie sich auch gefallen. 😉
Vorteil an dieser Lösung ist, dass dieses CSS-Schnipsel auch erhalten bleibt, wenn WordPress oder Jetpack aktualisiert werden und evtl. die CSS Dateien erneuert/überschrieben werden.
Stichwort: /deinWebspace/wp-content/plugins/jetpack/modules/shortcodes/css/slideshow-shortcodes.css

CSS: Bereich scrollen

Dies ist nur für mich als Gedächtnisstütze, da ich heute etwas Zeit vertan habe, bis ich einen Bereich in einem CSS scrollbar machen konnte.

article { display: block; 
 max-width: 980px;
 height: 600px;
 overflow: scroll;}

5 CSS-Tipps zur Optimierung deines Stylesheets

Vielleicht zu beachten, wenn ich das nächste mal wieder CSS Dateien in der Fingern habe 😉

5 CSS-Tipps zur Optimierung deines Stylesheets:

„Bei der Arbeit (z.B. an einem neuen WordPress-Theme) notiere ich mir immer wieder kleine CSS-Tipps, die ich während der Theme-Entwicklung entdecke oder bei einem fertigen Theme optimiere. Da die Tipps bestimmt auch für andere CSS-Fans hilfreich sind, habe ich eine kleine Liste meiner derzeitigen Lieblings-CSS-Tipps zusammengestellt.

1. Placeholder-Inputtext stylen

Um die Standard-Textfarbe Grau eines HTML5 Placeholder-Textes (z.B. Suchbegriff eingeben… in einem Suchformular) individuell anzupassen, kannst du die folgenden CSS-Eigenschaften mit deinem eigenen color-Wert nutzen:

Der CSS-Code:

::-webkit-input-placeholder {color:#999;}
:-moz-placeholder {color:#999;}
.placeholder {color:#999;}

So kannst du einen dunkleren Grauton oder eine andere Farbe für den Placeholder-Text in Formlurfeldern definieren. Da derzeit die unterschiedlichen Browser noch ihre jeweils eigene Eigenschaft nutzen, musst du alle drei Eigenschaften angeben. Der Internet Explorer unterstützt leider noch keine HTML5 Placeholder. Hier kannst du bei Bedarf auf eine JavaScript-Lösung zurückgreifen (z.B. jQuery Placeholder auf GitHub).

2. text-size-adjust: none

Indem man text-size-adjust mit none setzt, kann man das automatische größer Skalieren von gewissen, als wichtig eingestuften Textelementen (z.B. auf dem iPhone bei Navigationsmenüs oder Elementen der Sidebar) verhindern.

Der CSS-Code:

html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}

Man sollte zwar etwas vorsichtig mit dieser CSS-Eigenschaft umgehen, da man mit dieser Funktion den Text-Zoom komplett deaktiviert. Eventuell könntest du die Eigenschaft daher nur für die Styles der mobilen Geräte einsetzen.

3. Pseudoklassen :before und :after

Die CSS-Pseudoklassen :before und :after können hilfreich sein, um extra Schriftzeichen, wie z.B. den Gedankenstrich vor dem Zitat-Autor direkt über das Stylesheet zu integrieren. Mit Hilfe der CSS-Eigenschaft content funktioniert das so:

Der CSS-Code:

#content blockquote p cite:before {
	content:"2212 020";
}

Der HTML-Code für ein Zitat mit Zitat-Autor muss dann nur noch in der folgenden Form im Text-Editor eingefügt werden:

<blockquote>Zitattext hier...
<cite><a href="hhttp://LinkZitatAutor.de/">Name des Zitat-Autors</a></cite></blockquote>

CSS Tipps before und after Pseudoklassen

4. text-rendering: optimizeLegibility;

Über die CSS-Eigenschaft text-rendering:optimizeLegibility lässt sich die Lesbarkeit von Text optimieren. Besonders sinnvoll ist dies bei größer gesetzten Text-Elementen wie den Überschriften. Die Abstände zwischen den einzelnen Buchstaben werden dann automatisch angepasst (Kerning).

CSS Tipp Text-Rendering

Der CSS-Code:

h1, h2, h3, h4, h5, h6 {
	text-rendering: optimizeLegibility;
}

Die Optimierung sollte allerdings nicht auf alle Texteelemente angewandt werden, da dies die Ladegeschwindigkeit der Webseite im Browser verlangsamen könnte. Die Geschwindigkeit ist vor allem auf mobilen Geräten relevant. Weitere Infos zu text-rendering: optimizeLegibility findest du im folgenden Blog-Artikel »Cross-browser kerning-pairs & ligatures«.

5. word-wrap: break-word

Mit Hilfe der word-wrap Eigenschaft und dem Wert break-word kannst du sicher stellen, dass sehr lange Wörter auf jeden Fall automatisch in die nächste Zeile umgebrochen werden und nicht über den Inhaltsbereich herausreichen.

CSS Tipp word-wrap: break-word

Dies kann z.B. bei Blogartikel-Überschriften sinnvoll werden oder beim Seiten-Titel eines WordPress-Themes.

Der CSS-Code:

#site-title h1 {
word-wrap: break-word;
}
Welches sind deine Lieblings-CSS-Tipps?

Wie gefallen dir die vorgestellten CSS-Tipps und fallen Dir noch weitere praktische Tipps für die Optimierung des Stylesheets ein? Über dein Feedback und deine weiteren Tipps freue ich mich sehr!

“

(Via Elmastudio.)