23. Februar 2023

Download-Links mit passenden Icons

Download-Links können ganz einfach automatisch mit passenden Icons gekennzeichnet werden – ganz ohne PHP oder JavaScript, sondern nur mit CSS. In diesem Beispiel mit Hilfe von Font Awesome.

• CSS

21. Februar 2023

Icon-Fonts und SVG-Icons

Font AwesomeVor über 10 Jahren wurde Font Awesome veröffentlicht und ist seitdem für die Icons auf Millionen von Websites verantwortlich. Im Jahr 2020 wurde Font Awesome von immerhin auf 38 %(!) der Websites verwendet, die Schriftskripte von Drittanbietern verwenden. Seit fast 7 Jahren (Okt 2017) gibt es jetzt die Version 4.7, die nach wie vor […]

• CSS
• Design
• HTML

19. Februar 2023

Externe Links in neuem Fenster öffnen

Mit folgendem JavaScript werden alle Links einer Website, die auf einer externe Seite führen, in einem neuen Fenster geöffnet. Fun Fact: Irgendwo habe ich einen ähnlichen Code schon mal eingesetzt. Statt ihn zu suchen, habe ich Chat GPT erneut auf die Probe gestellt. Meine Anfrage lautete: „Erstelle ein Javascript, das bewirkt, dass alle externen Links […]

• ChatGPT
• JavaScript

18. Februar 2023

Bild mit 100% Breite im Bootstrap-Container

Jeder, der mit Bootstrap arbeitet stand bestimmt schon mal vor diesem Problem: Die Breite der Inhalte ist durch den Bootstrap-Container begrenzt, jetzt soll aber ein Bild über die ganze Breite des Bildschirms laufen. Das naheliegende „width: 100%“ bezieht sich auf die Breite des Containers und funktioniert somit natürlich nicht. Und wenn der Image-Container absolut positioniert […]

• Bootstrap
• CSS

18. Februar 2023

WordPress-PlugIn „Lazy Blocks“

„Lazy Blocks“ ist ein Gamechanger und ein echtes Must-Have in jedem WordPress-Backend! Klar, der Gutenberg-Editor hat das Bearbeiten von Websites revolutioniert – aber Lazy Blocks ist genau das, was noch gefehlt hat. Mit Lazy Blocks kannst du eigene Blöcke bauen. Und so ein Block kann im Prinzip alles sein: Slider, Kontakt-Box, Accordion, Downloads… also alles, […]

• HTML
• LazyBlocks
• WordPress

17. Februar 2023

Seitentitel in WordPress ausblenden

Das (optionale) Ausblenden des Seitentitels in WordPress lässt sich z.B. mit dem PlugIn „Custom Field Suite“ realisieren. Erstelle hierzu eine neue Feldgruppe mit einem Feld names „seitentitel_ausblenden“. Ergänze jetzt dein Template um folgende if-Anweisung. Jetzt kannst du im Backend über eine Checkbox den Seitentitel wahlweise ausblenden.

• PHP
• WordPress

14. Februar 2023

Background-Video

Mit folgendem Code lassen sich sich Videos als Hintergrund darstellen: Hier geht´s zur Demo: www.fbnfrtg.de/demo/backgroundvideo.html

• CSS

12. Februar 2023

Masonry-Layout mit Bootstrap

Masonry-Layouts waren in der Vergangenheit nicht immer einfach umzusetzen. Mit Bootstrap 5 können einfach die gewohnten Col-Klassen benutzt werden und mit wenigen Zeichen Code in ein Masonry-Layout gewandelt werden. Hierfür muss natürlich das Masonry-Javascript geladen sein: https://masonry.desandro.com/

• Bootstrap
• JavaScript