kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


CSS Shapes – Textumfluss, Konturenführung und individuelle Formen für Websites

Normalerweise erzeugen alle HTML-Elemente auf einer Website eine rechteckige Box. Das geschieht auch, wenn sie nicht rechteckig aussehen, da sie beispielsweise mit der CSS-Eigenschaft border-radius optisch so verändert wurden, dass sie abgerundet wirken. Texte und andere Elemente richten sich nun immer an den rechteckigen Boxen aus, was optisch unschöne Ergebnisse erzeugen kann. Mit den sog. »CSS Shapes« ist es möglich, nicht rechteckige Formen zu erzeugen und beispielsweise Texte exakt um ein Element herumfließen zu lassen. Vergleichbar mit der Konturenführung aus InDesign. Somit sind sehr interessante und magazinähnliche Layouts möglich.

Beitrag zu Ende lesen

Visitenkarten-Upload (*.vcf) in WordPress erlauben

vCards (*vcf) sind elektronische Visitenkarten, die es ermöglichen, Kontaktdaten unkompliziert in das eigene Adressbuch zu übernehmen. Also ein sehr nützliches Format um den Besuchern einer Website Kontaktinformationen schnell zugänglich zu machen. Schade nur, dass die WordPress-Mediathek den Upload dieses Dateiformats bisher verbietet. Mit einer kleinen Anpassung an der functions.php behebt ihr dieses Problem.

Beitrag zu Ende lesen

WordPress: Plugin-Integration sicherstellen

Ein WordPress-Theme sollte immer so entwickelt werden, dass es sich unkompliziert erweitern und individualisieren lässt. Dazu gehört natürlich auch, dass es möglich ist, Plugins einzubinden. Einige Plugins, aber auch WordPress selbst, müssen ab und zu Code in das Theme einschleusen, um eine Funktion bereitstellen zu können. Dazu gehört beispielsweise JavaScript im HTML-Head oder im Fußbereich der Website.  Beitrag zu Ende lesen

WordPress: Der Loop

Das Herzstück von WordPress ist der sog. Loop. Innerhalb des Loops werden Inhalte (Beiträge, Seiten etc.) ausgegeben. Welche Beiträge das sind, bestimmt das Template bzw. die URL, die gerade geladen ist. Befindet man sich beispielsweise in der Detailansicht eines Beitrags, beinhaltet der Loop den Inhalt des Posts. Befindet man sich in einer Kategorieübersicht, listet der Loop die neuesten Beiträge usw. Beitrag zu Ende lesen

Die CSS-Eigenschaft box-decoration-break – padding & Co. beim Zeilenumbruch beibehalten

Wenn ihr Inline-Elementen über padding einen Innenabstand zuweist, dann wird dieses padding bei einem Zeilenumbruch ignoriert. Gleiches gilt für Eigenschaften wie box-shadow oder border-radius. Diese Tatsache ist in der Praxis extrem lästig, da es beispielsweise nicht möglich ist nur den Textbereich einer mehrzeiligen Überschrift mit einer Hintergrundfarbe zu hinterlegen und ansprechend zu gestalten. An den Zeilenumbrüchen wird der Hintergrund unschön abgeschnitten. Die CSS-Eigenschaft box-decoration-break schafft Abhilfe.

Beitrag zu Ende lesen