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 … Read the rest

Farbverlauf mit CSS

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

http://www.mediaevent.de/css/gradient.htmlRead the rest

WordPress: Hintergrund- und Rahmenfarbe der Slideshow ändern

Ich 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… Read the rest

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 PlacehoRead the rest