CSS-Stylesheet

Hier finden Sie zahlreiche Tricks, um Ihr Webprojekt mit CSS-Code auf Vordermann zu bringen.

Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden. Wie Sie ein Child-Theme erstellen, erfahren Sie im Beitrag «Ein Child-Theme anlegen – ein Must im Webdesign».

Beiträge der Kategorie «CSS-Stylesheet»

Links auf der Divi-Website stylen

Im Divi-Theme lässt sich von Haus aus die Farbe der dargestellten Links definieren - jedoch ist damit mit Customizing auch schon Schluss. Beim Webdesign werden damit Links ab und an zu diskret dargestellt. Das lässt sich mit minimalem Aufwand ändern.

Wider den Spambots: Maillinks sicherer machen

Nun ja: So richtig sicher vor Spambots auf Harvest-Tour sind Ihre Mailadressen nicht, sobald Sie diese auf einer Website anzeigen. Aber immerhin: Es gibt ein paar Tricks, wie Sie wenigstens etwas mehr Sicherheit erreichen können. Und wir räumen mit Scheinsicherheiten auf: Wir sagen, warum das [at] mittlerweile wirklich bloss noch ein Scherz ist.

Abschnitte im Divi-Theme abwechselnd einfärben

Diesen Hack finden wir ziemlich cool: Damit Abschnitte besser erfasst und unterschieden werden können, kann es hilfreich sein, sie verschiedenfarbig auszuzeichnen. Ändern sich die Inhalte jedoch häufiger, ist es sehr aufwändig alle Abschnitte einzeln umzufärben. Mit ein wenig CSS kann diese Arbeit vermieden werden.

Divi-Menü auf gesamter Seitenbreite darstellen

Das Divi-Menu wächst seitwärts, je mehr Inhalte angezeigt werden. Bisweilen kann das Menu dabei «überlaufen» – bzw. zweistöckig dargestellt werden. Dies lässt sich ändern, wenn auf einer Website das Menu von allem Anfang an auf der ganzen Seitenbreite dargestellt wird - und dies auch bei weniger Menupunkten.

Die Krux mit den verunstalteten Telefon-Links

Kennen Sie das? Da nennen Sie auf Ihrer Website eine harmlose Telefonnummer - und schwups, wird diese in zahlreichen Browsern übel verunstaltet. Einige Browser - ganz besonders solche von Mobilgeräten - erkennen nämlich Telefonnummern auf Websiten und markieren sie als anklickbaren Link, um einen Anruf zu erleichtern. Damit der eigentlich praktische Link aber nicht völlig am sonstigen Webdesign vorbeischiesst, empfiehlt es sich, den Telefonlink auf dem Radar zu haben. Ein Mini-Workshop von Dr. Code.

Contact Form 7-Formulare zum Webdesign passend stylen

Vor einer Weile hat sich Dr. Code nach einem neuen Formularplugin umgesehen. «Back to the roots» war am Schluss die Devise. Denn zurückgekehrt sind wir zum Formular-Plugin, das wir ganz am Anfang unserer Wordpress-Zeit genutzt haben: Zu Contact Form 7. Damit das auch anständig ausschaut, haben wir einen CSS-Bausatz angefertigt, der vielleicht auch Ihnen hilft.

Frühjahrsputz für WordPress #2: Funktionen, CSS-Blocks, Scripts und HTML sauber anschreiben

Besonders wenn Sie ab und an selber an ihren Theme-Dateien oder am CSS-Stylesheet Hand anlegen, kann es nach einiger Zeit unübersichtlich werden: Was genau tut der Code in der functions.php? Welches Styling wird von Zeile 987 in meinem CSS-Stylesheet definiert? Es lohnt sich, eigene Programmierungen und Anweisungen laufend mit Kommentaren zu versehen. Für die spätere Übersicht (allenfalls sogar für die Fehlersuche durch Dritte) kann dieser Zusatzaufwand hilfreich sein.

Standard-Beitragstitel, Meta-Infos und Beitragsbild im Divi-Theme ausblenden

Im Divi-Theme lassen sich die dargestellten Posts schön und einfach designen. Auch deren Titel, Meta-Tags und das Beitragsbild lassen sich vorzüglich gestalten und platzieren. Ungeachtet dessen will Wordpress jedoch diese Infos standardmässig in jedem Beitrag noch einmal ganz oben hinstellen. Mit äusserst mageren Möglichkeiten, darauf Einfluss zu nehmen. Sie können das in jedem Einzelfall unterbinden - oder (mit ein wenig CSS-Code) ein für alle Mal auf der gesamten Website festlegen.

Divi-Beiträge standardmässig auf ganzer Seitenbreite darstellen

Beiträge werden im Divi-Theme standardmässig mit einer Seitenleiste dargestellt. Ausserdem werden die Ränder eingerückt, was Platz verschwendet und überdies einer einheitlichen Darstellung nicht eben zuträglich ist. Zwar lässt sich dies in jedem Einzelfall händisch beheben - viel einfacher geht es aber mit einer Standardeinstellung, welche auf ein paar Zeilen CSS-Code basiert.

i-Frames im Divi-Theme auf voller Seitenbreite darstellen

Ob jetzt die berühmt-berüchtigten Inline-Frames (iframes) sinnvoll oder eine Plage sind, darüber lässt sich freilich streiten. Zu Zeiten des Responsive Webdesigns stehen sie etwas quer in der Landschaft. Ab und an mögen Sie aber praktisch sein. Im Divi-Theme müssen Sie jedoch mit einem kleinen Code nachhelfen, damit das Inline-Frame auch Tablet- und Phone-tauglich wird.

Werbung

 

Pin It on Pinterest