![\"PepeCyBs](\"https:\/\/klacker.org\/images\/default_profile_photos\/rainbow_man\/48.png\")
<\/a>PepeCyBs Welt<\/a> wrote the following post <\/a>Wed, 08 Oct 2025 15:50:06 +0200<\/span><\/span><\/div>Hubzilla gestalten<\/strong>
Fortsetzung zu Individuelle Anpassungen mit dem PDL-Editor (Einsteiger)<\/a>
Eine Digitaluhr im simplen Text-Format in die Seitenleiste schieben und umst\u00e4ndlich ein Hubzilla-Men\u00fc zu bauen... das ist jetzt nicht die "Hohe Schule" der Hubzilla-Gestaltung. Und auch nicht besonders schick und modern. Die Beispiele aus dem Artikel sollten nur dem grundlegenden Verst\u00e4ndnis der Seitengestaltung bei Hubzilla dienen.
Das Thema ist auch kaum vollumfassend abzuhandeln. In diese Artikel hier gehe ich auch nur beispielhaft auf die M\u00f6glichkeiten ein und ich kann vielleicht Anst\u00f6\u00dfe zu neuen Ideen geben, wie sich Nutzer ihr eigenes Hubzilla zusammenbauen k\u00f6nnen, ohne mit Admin-Rechten irgendetwas zu installieren.
Im ersten Teil habe ich ja gezeigt, wie man mit der App "Webseiten" ein Men\u00fc erstellt und dieses im PDL-Editor in die Seitenleiste packen kann... etwas umst\u00e4ndlich und so eigentlich auch nicht vorgesehen.
Die Optik eines solchen Men\u00fcs ist ohnehin nicht sonderlich ansprechend und tut damit auch nichts gegen den Vorwurf, Hubzilla w\u00fcrde mit seinem Standard-Theme "Redbasic" doch recht altbacken aussehen.
Sinnvoller und auch so vorgesehen ist die Gestaltung mit selbst erstellten Bl\u00f6cken. Nutzt man ein moderneres Theme, so passt sich die Optik auch halbwegs an das Theme an. So richtig schick wird es aber erst, wenn man auf ein modernes Framework zur\u00fcckgreift.
Voraussetzungen<\/h4>
Fortsetzung zu Individuelle Anpassungen mit dem PDL-Editor (Einsteiger)<\/a>
Eine Digitaluhr im simplen Text-Format in die Seitenleiste schieben und umst\u00e4ndlich ein Hubzilla-Men\u00fc zu bauen... das ist jetzt nicht die "Hohe Schule" der Hubzilla-Gestaltung. Und auch nicht besonders schick und modern. Die Beispiele aus dem Artikel sollten nur dem grundlegenden Verst\u00e4ndnis der Seitengestaltung bei Hubzilla dienen.
Das Thema ist auch kaum vollumfassend abzuhandeln. In diese Artikel hier gehe ich auch nur beispielhaft auf die M\u00f6glichkeiten ein und ich kann vielleicht Anst\u00f6\u00dfe zu neuen Ideen geben, wie sich Nutzer ihr eigenes Hubzilla zusammenbauen k\u00f6nnen, ohne mit Admin-Rechten irgendetwas zu installieren.
Im ersten Teil habe ich ja gezeigt, wie man mit der App "Webseiten" ein Men\u00fc erstellt und dieses im PDL-Editor in die Seitenleiste packen kann... etwas umst\u00e4ndlich und so eigentlich auch nicht vorgesehen.
Die Optik eines solchen Men\u00fcs ist ohnehin nicht sonderlich ansprechend und tut damit auch nichts gegen den Vorwurf, Hubzilla w\u00fcrde mit seinem Standard-Theme "Redbasic" doch recht altbacken aussehen.
Sinnvoller und auch so vorgesehen ist die Gestaltung mit selbst erstellten Bl\u00f6cken. Nutzt man ein moderneres Theme, so passt sich die Optik auch halbwegs an das Theme an. So richtig schick wird es aber erst, wenn man auf ein modernes Framework zur\u00fcckgreift.
Voraussetzungen<\/h4>
Voraussetzung f\u00fcr all die Dinge, die ich hier einmal vorf\u00fchren m\u00f6chte, sind die installierten Apps<\/a> "PDL-Editor" und "Webseiten" und die Freigabe f\u00fcr Code f\u00fcr den Kanal, den man aufpeppen m\u00f6chte.
Sofern man nicht selbst der Administrator ist, muss man f\u00fcr den letzten Punkt den Hub-Administrator kontaktieren und ihn bitten, Code f\u00fcr den eigenen Kanal zuzulassen. F\u00fcr den Admin ist das nur ein einfacher Klick. Am besten schreibt man dem Admin bei der Bitte um Freischaltung auch gleich, wof\u00fcr man das ben\u00f6tigt.
Sind diese Voraussetzungen geschaffen, die Apps also installiert und der Code erlaubt, kann es auch gleich losgehen.
Bootstrap und\/oder W3.CSS<\/h4>
Die meisten Themes f\u00fcr Hubzilla bieten entweder ein Subset oder teilweise zumindest das Basis-Stylesheet von Bootstrap. M\u00f6chte man aber die F\u00e4higkeiten von Bootstrap umfassend f\u00fcr die Gestaltung nutzen, ist es sinnvoll, das Framework auch original einzubinden.
Das funktioniert mit dem Inhaltstyp "HTML" auch v\u00f6llig problemlos. Man muss nur f\u00fchrend im Block (gilt nat\u00fcrlich auch f\u00fcr Webseiten, wenn man sie so erstellen m\u00f6chte) Bootstrap einbinden:
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css"\u00a0\u00a0 rel="stylesheet">`
<script src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js"><\/script><\/code><\/pre>
Damit bringt man dann allerdings eine Fremdquelle mit ein. Nun ist Bootstrap nicht extrem gro\u00df (aktuell 8,3 MB), weshalb es sich anbietet, es einfach in der eigenen Hubzilla-Cloud vorzuhalten. Dazu legt man sich am besten im Wurzelverzeichnis der eigenen Cloud ein Verzeichnis bootstrap<\/code> an, in welches man dann den Inhalt der Bootstrap-Distribution<\/a> hochl\u00e4dt.
Eingebunden wird es dann mit
<link href="https:\/\/<URL_des_Hub>\/cloud\/<Kanal>\/bootstrap\/css\/bootstrap.min.css"\u00a0\u00a0 rel="stylesheet">`
<script src="https:\/\/<URL_des_Hub>\/cloud\/<Kanal>\/bootstrap\/js\/bootstrap.bundle.min.js"><\/script><\/code><\/pre>Ich pers\u00f6nlich nutze aber auch sehr gerne das W3.CSS Framework, weil es ohne Javascript-Bibliothek auskommt und wesentlich kompakter ist (24,2 KB).
Auch dieses Framework muss man am Beginn eines Blocks einbinden:
<link rel="stylesheet" href="https:\/\/www.w3schools.com\/w3css\/5\/w3.css"><\/code><\/pre>
Oder man l\u00e4dt w3.css<\/a> herunter, packt es z.B. in ein Verzeichnis css<\/code> in der eigenen Cloud und bindet es mit
<link rel="stylesheet" href="https:\/\/<URL_des_Hub>\/cloud\/<Kanal>\/css\/w3.css"><\/code><\/pre>
ein.
Bl\u00f6cke<\/h4>
Bl\u00f6cke werden von der App "Webseiten" zur Verf\u00fcgung gestellt. Sie dienen dazu, wiederholt benutzbare Inhalte aufzunehmen, welche man dann \u00fcber den Blocknamen in Webseiten, Webseiten-Layouts oder aber auch in die Seitenlayouts von Hubzilla einbinden kann.
Der Vorteil ist, dass selbst erstellte Bl\u00f6cke im ITEM-Bereich des PDL-Editors zur Verf\u00fcgung stehen und per Drag-and-Drop an die passende Stelle geschoben werden k\u00f6nnen.
Ein Block kann so ziemlich "alles" beinhalten. Und man kann ihn mit verschiedenen Inhaltstypen erstellen.
Es stehen die Inhaltstypen
- bbCode<\/a><\/li>
- HTML<\/a><\/li>
- Markdown<\/a><\/li>
- Text (plain Text)<\/li>
- Comanche-Layout<\/a><\/li>
- PHP<\/a><\/li><\/ul>
zur Auswahl.
bbCode erlaubt zwar keine Einbindung eines Web-Frameworks, daf\u00fcr bietet es spezielle Auszeichnungen f\u00fcr hubzilla-spezifische Dinge.
HTML ist der universellste Inhaltstyp, sofern man sich mit HTML auskennt. Mit einem HTML-Block kann man auch die erw\u00e4hnten Frameworks nutzen und tolle Effekte und Funktionen einsetzen.
Markdown eignet sich f\u00fcr formatierte Texte, ist also eher etwas f\u00fcr Beitrags-Inhalte und weniger f\u00fcr Bl\u00f6cke, die man z.B. in die Seitenleiste einer Ansicht packt. Verwenden kann man es aber schon daf\u00fcr.
(Plain) Text, also reiner, unformatierter Text, ist die einfachste Variante, gibt aber f\u00fcr unsere Zwecke nichts her.
Die Comanche-Layout Auszeichnungssprache ist f\u00fcr den Einsatz f\u00fcr die Dinge, welche hier behandelt werden auch nicht sinnvoll.
PHP hingegen kann man durchaus nutzen, wenn man dynamische Inhalte erzeugen m\u00f6chte. Setzt allerdings das Verst\u00e4ndnis und die F\u00e4higkeit zum Programmieren voraus.
Ich werde jetzt hier fast ausschlie\u00dflich Bl\u00f6cke im HTML-Format einsetzen, weil damit die gr\u00f6\u00dfte Flexibilit\u00e4t gegeben ist.
Beispiel 1: Navigationsleiste f\u00fcr die Kanalseite<\/h4>
Und jetzt fange ich einmal mit einem konkreten Beispiel an: Eine Navigationsleiste, die ich ganz oben im Inhaltsbereich der Kanalansicht einbauen m\u00f6chte. Ich m\u00f6chte damit Besuchern meiner Kanalseite eine einfache Navigation zu wesentlichen Bereichen meines Kanals erm\u00f6glichen. So sollen sie mit einem Klick, ohne l\u00e4nger zu suchen, auf meine Artikelseite, zu meinen Karten, zu meinem Wiki, meiner Galerie und zu meinem \u00f6ffentlichen Kalender gelangen k\u00f6nnen. Damit es auch noch wirklich schick aussieht, gibt es als ersten Navigationspunkt eine Logo-Grafik des Hubs, die bei Anklicken zur Hub-Beschreibung f\u00fchrt.
![\"hgest01.png\"](\"https:\/\/klacker.org\/photo\/ac3db808-bc02-45e9-9ee9-d71e8a627d8d-2.png\" "\\"hgest01.png\\"")
<\/a>
Zun\u00e4chst habe ich mir f\u00fcr den "Home-Button" eine passende Grafik gebaut, die transparenten Hintergrund hat und zur Schriftgr\u00f6\u00dfe der weiteren Buttons passt (100 x 24 Pixel):
![\"whoville-logo.png\"](\"https:\/\/klacker.org\/photo\/10358d1e-ecfa-4cb8-872b-23947ea9b723-2.png\" "\\"whoville-logo.png\\"")
<\/a>
Die Navigationsleiste realisiere ich in diesem Fall mit W3.CSS. Au\u00dferdem mach ich es noch ein wenig bunt, indem ich die Hover-Farbe f\u00fcr die Buttons auf verschiedene Standard-Farben des Frameworks festlege.
Den Block erstelle ich mit dem Block-Editor der App "Webseiten". Als Namen habe ich "wnavbar" festgelegt. Als Inhaltstyp
<link rel="stylesheet" href="https:\/\/klacker.org\/cloud\/pepecyb\/css\/w3.css">
<div class="w3-bar w3-border w3-light-grey">
\u00a0 <a href="https:\/\/klacker.org\/page\/pepecyb\/about" class="w3-bar-item w3-button"><img src="https:\/\/klacker.org\/cloud\/pepecyb\/whoville\/whoville-logo.png" alt=""><\/a>
\u00a0 <a href="https:\/\/klacker.org\/articles\/pepecyb" class="w3-bar-item w3-button w3-hover-green">Artikel<\/a>
\u00a0 <a href="https:\/\/klacker.org\/cards\/pepecyb" class="w3-bar-item w3-button w3-hover-blue">Karten<\/a>
\u00a0 <a href="https:\/\/klacker.org\/wiki\/pepecyb" class="w3-bar-item w3-button w3-hover-teal">Wikis<\/a>
\u00a0 <a href="https:\/\/klacker.org\/gallery\/pepecyb" class="w3-bar-item w3-button w3-hover-purple">Galerie<\/a>
\u00a0 <a href="https:\/\/klacker.org\/cal\/pepecyb" class="w3-bar-item w3-button w3-hover-red">Kalender<\/a>
<\/div><\/code><\/pre>
Anschlie\u00dfend muss der Block im PDL-Editor noch an die oberste Stelle des Inhaltsbereichs im MODUL "channel" geschoben und die \u00c4nderungen mit Klick auf den Button "APPLY" \u00fcbernommen werden.
![\"Image\/photo\"](\"https:\/\/klacker.org\/cloud\/pcw\/Artikel\/2025-10-08\/hgest02a.gif\")
Nicht schlecht f\u00fcr den Anfang, oder?
Beispiel 2: Nochmal das Men\u00fc aus dem ersten Teil - aber besser<\/h4>
Im ersten Einf\u00fchrungsteil hatte ich ja ein Men\u00fc zu Artikeln von mir als Beispiel gebastelt. Allerdings nicht als Block, sondern als Hubzilla-Men\u00fc, welches man nur umst\u00e4ndlich mit dem PDL-Editor einbauen kann:
![\"pdl14.png\"](\"https:\/\/klacker.org\/photo\/f43c75a0-6cec-4a10-a886-4eb9d3ea7fca-2.png\" "\\"pdl14.png\\"")
<\/a>
Im Endeffekt ist ein natives Hubzilla-Men\u00fc nichts anderes als eine Liste von Links. Und eine Link-Liste kann man auch ohne die Men\u00fc-Funktion erstellen.
F\u00fcr diese Beispiel jetzt, erstelle ich wiederum ein Men\u00fc zu einigen (drei) Artikeln meines Kanals. Allerdings als Link-Liste.
Der HTML-Code f\u00fcr den entsprechenden Block sieht dann z.B. so aus:
<a href="https:\/\/klacker.org\/articles\/pepecyb\/hhowama">Hubzilla-H\u00e4ppchen: Hubzilla-Magie - OpenWebAuth \/ MagicAuth<\/a><br>
<a href="https:\/\/klacker.org\/articles\/pepecyb\/folhsh2">Hubzilla: Hashtags folgen - Variante 2<\/a><br>
<a href="https:\/\/klacker.org\/articles\/pepecyb\/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kan\u00e4le, -Profile<\/a><\/code><\/pre>
Hier einfach als einzelne Links untereinander mit dem <br>-Tag<\/code> (nicht sch\u00f6n und elegant).
Sieht so aus:
![\"hgest03.png\"](\"https:\/\/klacker.org\/photo\/4b4a278e-29f4-459a-9855-e74d22157011-2.png\" "\\"hgest03.png\\"")
<\/a>
Oder vielleicht besser als unsortierte Liste?
<ul><li><a href="https:\/\/klacker.org\/articles\/pepecyb\/hhowama">Hubzilla-H\u00e4ppchen: Hubzilla-Magie - OpenWebAuth \/ MagicAuth<\/a><\/li>
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/folhsh2">Hubzilla: Hashtags folgen - Variante 2<\/a><\/li>
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kan\u00e4le, -Profile<\/a><\/li><\/ul><\/code><\/pre>
Sieht schon etwas besser aus:
![\"hgest04.png\"](\"https:\/\/klacker.org\/photo\/b83a806d-68fe-466c-9f8d-4c34bb5d27d9-2.png\" "\\"hgest04.png\\"")
<\/a>
In die Kanalseite eingebaut (und mit einem Titel versehen):
![\"hgest05.png\"](\"https:\/\/klacker.org\/photo\/3b4ca0df-495b-42bf-9b92-49994212c998-2.png\" "\\"hgest05.png\\"")
<\/a>
Nett! Aber... Nett ist die kleine Schwester von Schei\u00dfe! \ud83d\ude09\ud83d\ude02
Also packen wir mal ein wenig Schnick und Schnack vom W3.CSS Framework dazu:
<link rel="stylesheet" href="https:\/\/klacker.org\/cloud\/pepecyb\/css\/w3.css">
<ul class="w3-ul w3-card-4 w3-pale-green" style="width:100%">
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/hhowama">Hubzilla-H\u00e4ppchen: Hubzilla-Magie - OpenWebAuth \/ MagicAuth<\/a><\/li>
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/folhsh2">Hubzilla: Hashtags folgen - Variante 2<\/a><\/li>
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kan\u00e4le, -Profile<\/a><\/li>
<\/ul><\/code><\/pre>
Und schon sieht es fetziger aus, oder?
![\"hgest06.png\"](\"https:\/\/klacker.org\/photo\/a4e6ba99-29b6-4740-a6c6-25f9f23f7927-2.png\" "\\"hgest06.png\\"")
<\/a>
Beispiel 3: Kontakt-Widget<\/h4>
Nun m\u00f6chte ich noch in der Seitenleiste ein Element haben, welches die Kontaktm\u00f6glichkeit mittels Delta Chat anzeigt. Daf\u00fcr m\u00f6chte ich den QR-Code meines Delta Chat Accounts verwenden.
Nun k\u00f6nnte man einfach ein Bild, n\u00e4mlich den QR-Code dort hinpacken. Und das sogar mit bbCode, weil's einfacher ist.
![\"hgest07.png\"](\"https:\/\/klacker.org\/photo\/d3273c29-9e66-4771-b67b-32443242ff45-2.png\" "\\"hgest07.png\\"")
<\/a>
Dann sieht das halt so aus:
![\"hgest08.png\"](\"https:\/\/klacker.org\/photo\/718087d4-7523-47e7-b1a0-98c51c8ff7b3-2.png\" "\\"hgest08.png\\"")
<\/a>
Nicht sehr ansprechend... und es frisst Platz, weshalb das Artikelmen\u00fc (oder andere Inhalte, falls man noch weitere in die Seitenleiste geschoben hat) nach unten rutscht und man erst scrollen muss, um es zu erreichen.
Besser w\u00e4re es, wenn dort ein Button "Kontakt" zu sehen w\u00e4re, welche bei Klick den QR-Code einblendet... und den man mit einem weiteren Klick wieder ausblenden kann. Daf\u00fcr bietet sich das "Accordeon" von W3.CSS an.
Und damit es nicht so langweilig aussieht, peppe ich es noch mit einer Karte als Inhalt und einer kleinen Animation auf. Ach... und der Button wird schwarz und hat ganz leich abgerundete Ecken.
Der Code daf\u00fcr:
<link rel="stylesheet" href="https:\/\/klacker.org\/cloud\/pepecyb\/css\/w3.css">
<button onclick="myFunction('contact1')" class="w3-button w3-block w3-black w3-left-align w3-round w3-margin-bottom">Kontakt<\/button>
<div id="contact1" class="w3-hide w3-container w3-animate-zoom">
<div class="w3-container">
\u00a0 <div class="w3-card-4 w3-center" style="width:100%;max-width:400px">
\u00a0 <h2>Delta Chat<\/h2>
\u00a0 \u00a0 <img src="https:\/\/klacker.org\/cloud\/pepecyb\/Pepes%20pic\/delta.png" alt="" style="width:100%">
\u00a0 \u00a0 <div class="w3-container w3-center">
\u00a0 \u00a0 \u00a0 <p>derpepe@morpork.email<\/p>
\u00a0 \u00a0 <\/div>
\u00a0 <\/div>
<\/div>
<\/div>
<script>
function myFunction(id) {
\u00a0 var x = document.getElementById(id);
\u00a0 if (x.className.indexOf("w3-show") == -1) {
\u00a0 \u00a0 x.className += " w3-show";
\u00a0 } else {
\u00a0 \u00a0 x.className = x.className.replace(" w3-show", "");
\u00a0 }
}
<\/script><\/code><\/pre>
Schnell noch in die Seitenleiste geschoben... und schon ist die Delta Chat Karte da!
![\"Image\/photo\"](\"https:\/\/klacker.org\/cloud\/pcw\/Artikel\/2025-10-08\/hgest09.gif\")
Beispiel 4: Sinnfreier PHP-Block<\/h4>
Einfach, um zu zeigen, dass man auch was mit PHP machen kann, hier ein Block, der anzeigt, wann die aktuelle Seite aufgerufen wurde. Mir ist einfach nichts N\u00fctzliches eingefallen...
Dazu legt man einen Block mit dem Inhaltstyp "PHP" an. Ich nenne ihn hier einfach mal "aufrufzeit".
Der Code ist extrem simpel!
date_default_timezone_set('Europe\/Budapest');
echo 'Seite aufgerufen am: ' . date('d.m.Y - H:i:s');<\/code><\/pre>
Beachte hier: Es darf kein <?php<\/code> davor und kein ?><\/code> am Ende stehen!
Das Ding packe ich in die Profilansicht ganz ans Ende, damit jeder wei\u00df, wann er sich das Profil angeschaut hat:
![\"Image\/photo\"](\"https:\/\/klacker.org\/cloud\/pcw\/Artikel\/2025-10-08\/hgest10.gif\")
Soviel dazu...<\/h4>
Damit lasse ich es jetzt einfach bewenden. Ich wollte hier einfach nur zeigen, was \u00fcber die einfachen Dinge aus dem ersten Teil mit Hubzilla alles m\u00f6glich ist.
Man ist extrem frei, die Oberfl\u00e4che f\u00fcr sich selbst, aber auch f\u00fcr Besucher attraktiver und praktischer zu gestalten.
Und man ist nicht auf die F\u00e4higkeiten vorhandener Widgets und Styles vorhandener Themes beschr\u00e4nkt. Mit aktuellen Frameworks kann man sehr viel gestalten, was frisch und modern aussieht.
Und da geht manches, was man vielleicht gar nicht f\u00fcr m\u00f6glich h\u00e4lt. So habe ich einfach einmal was ausprobiert (in einem Test-Kanal... weil ich es eigentlich nicht nutzen w\u00fcrde)...
Zum einfachen Verfassen von bbCode-Beitr\u00e4gen nutze ich gerne den SCEditor. Den habe ich mir lokal in eine HTML-Datei abgelegt und als Lesezeichen in die Lesezeichen-Symbolleiste meines Browsers gepackt. Ein Klick und er \u00f6ffnet sich... und ich kann losschreiben.
Und da dachte ich mir einfach mal: Ob man das auch in eine Hubzilla-Ansicht packen kann?
Und tats\u00e4chlich ist es ohne gro\u00dfe Anstrengung dort umsetzbar. Sah dann so aus:
![\"hgest11.png\"](\"https:\/\/klacker.org\/photo\/1f718543-0887-442b-9d52-e1a3344403f0-2.png\" "\\"hgest11.png\\"")
<\/a>
Ihr seht also... es ist echt viel m\u00f6glich. Einfach einmal ausprobieren.
Um Euch in die Frameworks einzuarbeiten oder den Einstieg in PHP zu schaffen, empfehle ich pers\u00f6nlich die Tutorials von w3 schools<\/a>:
Die meisten Themes f\u00fcr Hubzilla bieten entweder ein Subset oder teilweise zumindest das Basis-Stylesheet von Bootstrap. M\u00f6chte man aber die F\u00e4higkeiten von Bootstrap umfassend f\u00fcr die Gestaltung nutzen, ist es sinnvoll, das Framework auch original einzubinden.
Das funktioniert mit dem Inhaltstyp "HTML" auch v\u00f6llig problemlos. Man muss nur f\u00fchrend im Block (gilt nat\u00fcrlich auch f\u00fcr Webseiten, wenn man sie so erstellen m\u00f6chte) Bootstrap einbinden:
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css"\u00a0\u00a0 rel="stylesheet">`
<script src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js"><\/script><\/code><\/pre>
Damit bringt man dann allerdings eine Fremdquelle mit ein. Nun ist Bootstrap nicht extrem gro\u00df (aktuell 8,3 MB), weshalb es sich anbietet, es einfach in der eigenen Hubzilla-Cloud vorzuhalten. Dazu legt man sich am besten im Wurzelverzeichnis der eigenen Cloud ein Verzeichnis bootstrap<\/code> an, in welches man dann den Inhalt der Bootstrap-Distribution<\/a> hochl\u00e4dt.
Eingebunden wird es dann mit
<link href="https:\/\/<URL_des_Hub>\/cloud\/<Kanal>\/bootstrap\/css\/bootstrap.min.css"\u00a0\u00a0 rel="stylesheet">`
<script src="https:\/\/<URL_des_Hub>\/cloud\/<Kanal>\/bootstrap\/js\/bootstrap.bundle.min.js"><\/script><\/code><\/pre>Ich pers\u00f6nlich nutze aber auch sehr gerne das W3.CSS Framework, weil es ohne Javascript-Bibliothek auskommt und wesentlich kompakter ist (24,2 KB).
Auch dieses Framework muss man am Beginn eines Blocks einbinden:
<link rel="stylesheet" href="https:\/\/www.w3schools.com\/w3css\/5\/w3.css"><\/code><\/pre>
Oder man l\u00e4dt w3.css<\/a> herunter, packt es z.B. in ein Verzeichnis css<\/code> in der eigenen Cloud und bindet es mit
<link rel="stylesheet" href="https:\/\/<URL_des_Hub>\/cloud\/<Kanal>\/css\/w3.css"><\/code><\/pre>
ein.
Bl\u00f6cke<\/h4>
Bl\u00f6cke werden von der App "Webseiten" zur Verf\u00fcgung gestellt. Sie dienen dazu, wiederholt benutzbare Inhalte aufzunehmen, welche man dann \u00fcber den Blocknamen in Webseiten, Webseiten-Layouts oder aber auch in die Seitenlayouts von Hubzilla einbinden kann.
Der Vorteil ist, dass selbst erstellte Bl\u00f6cke im ITEM-Bereich des PDL-Editors zur Verf\u00fcgung stehen und per Drag-and-Drop an die passende Stelle geschoben werden k\u00f6nnen.
Ein Block kann so ziemlich "alles" beinhalten. Und man kann ihn mit verschiedenen Inhaltstypen erstellen.
Es stehen die Inhaltstypen
- bbCode<\/a><\/li>
- HTML<\/a><\/li>
- Markdown<\/a><\/li>
- Text (plain Text)<\/li>
- Comanche-Layout<\/a><\/li>
- PHP<\/a><\/li><\/ul>
zur Auswahl.
bbCode erlaubt zwar keine Einbindung eines Web-Frameworks, daf\u00fcr bietet es spezielle Auszeichnungen f\u00fcr hubzilla-spezifische Dinge.
HTML ist der universellste Inhaltstyp, sofern man sich mit HTML auskennt. Mit einem HTML-Block kann man auch die erw\u00e4hnten Frameworks nutzen und tolle Effekte und Funktionen einsetzen.
Markdown eignet sich f\u00fcr formatierte Texte, ist also eher etwas f\u00fcr Beitrags-Inhalte und weniger f\u00fcr Bl\u00f6cke, die man z.B. in die Seitenleiste einer Ansicht packt. Verwenden kann man es aber schon daf\u00fcr.
(Plain) Text, also reiner, unformatierter Text, ist die einfachste Variante, gibt aber f\u00fcr unsere Zwecke nichts her.
Die Comanche-Layout Auszeichnungssprache ist f\u00fcr den Einsatz f\u00fcr die Dinge, welche hier behandelt werden auch nicht sinnvoll.
PHP hingegen kann man durchaus nutzen, wenn man dynamische Inhalte erzeugen m\u00f6chte. Setzt allerdings das Verst\u00e4ndnis und die F\u00e4higkeit zum Programmieren voraus.
Ich werde jetzt hier fast ausschlie\u00dflich Bl\u00f6cke im HTML-Format einsetzen, weil damit die gr\u00f6\u00dfte Flexibilit\u00e4t gegeben ist.
Beispiel 1: Navigationsleiste f\u00fcr die Kanalseite<\/h4>
Und jetzt fange ich einmal mit einem konkreten Beispiel an: Eine Navigationsleiste, die ich ganz oben im Inhaltsbereich der Kanalansicht einbauen m\u00f6chte. Ich m\u00f6chte damit Besuchern meiner Kanalseite eine einfache Navigation zu wesentlichen Bereichen meines Kanals erm\u00f6glichen. So sollen sie mit einem Klick, ohne l\u00e4nger zu suchen, auf meine Artikelseite, zu meinen Karten, zu meinem Wiki, meiner Galerie und zu meinem \u00f6ffentlichen Kalender gelangen k\u00f6nnen. Damit es auch noch wirklich schick aussieht, gibt es als ersten Navigationspunkt eine Logo-Grafik des Hubs, die bei Anklicken zur Hub-Beschreibung f\u00fchrt.
<\/a>
Zun\u00e4chst habe ich mir f\u00fcr den "Home-Button" eine passende Grafik gebaut, die transparenten Hintergrund hat und zur Schriftgr\u00f6\u00dfe der weiteren Buttons passt (100 x 24 Pixel):
<\/a>
Die Navigationsleiste realisiere ich in diesem Fall mit W3.CSS. Au\u00dferdem mach ich es noch ein wenig bunt, indem ich die Hover-Farbe f\u00fcr die Buttons auf verschiedene Standard-Farben des Frameworks festlege.
Den Block erstelle ich mit dem Block-Editor der App "Webseiten". Als Namen habe ich "wnavbar" festgelegt. Als Inhaltstyp
<link rel="stylesheet" href="https:\/\/klacker.org\/cloud\/pepecyb\/css\/w3.css">
<div class="w3-bar w3-border w3-light-grey">
\u00a0 <a href="https:\/\/klacker.org\/page\/pepecyb\/about" class="w3-bar-item w3-button"><img src="https:\/\/klacker.org\/cloud\/pepecyb\/whoville\/whoville-logo.png" alt=""><\/a>
\u00a0 <a href="https:\/\/klacker.org\/articles\/pepecyb" class="w3-bar-item w3-button w3-hover-green">Artikel<\/a>
\u00a0 <a href="https:\/\/klacker.org\/cards\/pepecyb" class="w3-bar-item w3-button w3-hover-blue">Karten<\/a>
\u00a0 <a href="https:\/\/klacker.org\/wiki\/pepecyb" class="w3-bar-item w3-button w3-hover-teal">Wikis<\/a>
\u00a0 <a href="https:\/\/klacker.org\/gallery\/pepecyb" class="w3-bar-item w3-button w3-hover-purple">Galerie<\/a>
\u00a0 <a href="https:\/\/klacker.org\/cal\/pepecyb" class="w3-bar-item w3-button w3-hover-red">Kalender<\/a>
<\/div><\/code><\/pre>
Anschlie\u00dfend muss der Block im PDL-Editor noch an die oberste Stelle des Inhaltsbereichs im MODUL "channel" geschoben und die \u00c4nderungen mit Klick auf den Button "APPLY" \u00fcbernommen werden.
Nicht schlecht f\u00fcr den Anfang, oder?
Beispiel 2: Nochmal das Men\u00fc aus dem ersten Teil - aber besser<\/h4>
Im ersten Einf\u00fchrungsteil hatte ich ja ein Men\u00fc zu Artikeln von mir als Beispiel gebastelt. Allerdings nicht als Block, sondern als Hubzilla-Men\u00fc, welches man nur umst\u00e4ndlich mit dem PDL-Editor einbauen kann:
<\/a>
Im Endeffekt ist ein natives Hubzilla-Men\u00fc nichts anderes als eine Liste von Links. Und eine Link-Liste kann man auch ohne die Men\u00fc-Funktion erstellen.
F\u00fcr diese Beispiel jetzt, erstelle ich wiederum ein Men\u00fc zu einigen (drei) Artikeln meines Kanals. Allerdings als Link-Liste.
Der HTML-Code f\u00fcr den entsprechenden Block sieht dann z.B. so aus:
<a href="https:\/\/klacker.org\/articles\/pepecyb\/hhowama">Hubzilla-H\u00e4ppchen: Hubzilla-Magie - OpenWebAuth \/ MagicAuth<\/a><br>
<a href="https:\/\/klacker.org\/articles\/pepecyb\/folhsh2">Hubzilla: Hashtags folgen - Variante 2<\/a><br>
<a href="https:\/\/klacker.org\/articles\/pepecyb\/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kan\u00e4le, -Profile<\/a><\/code><\/pre>
Hier einfach als einzelne Links untereinander mit dem <br>-Tag<\/code> (nicht sch\u00f6n und elegant).
Sieht so aus:
<\/a>
Oder vielleicht besser als unsortierte Liste?
<ul><li><a href="https:\/\/klacker.org\/articles\/pepecyb\/hhowama">Hubzilla-H\u00e4ppchen: Hubzilla-Magie - OpenWebAuth \/ MagicAuth<\/a><\/li>
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/folhsh2">Hubzilla: Hashtags folgen - Variante 2<\/a><\/li>
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kan\u00e4le, -Profile<\/a><\/li><\/ul><\/code><\/pre>
Sieht schon etwas besser aus:
<\/a>
In die Kanalseite eingebaut (und mit einem Titel versehen):
<\/a>
Nett! Aber... Nett ist die kleine Schwester von Schei\u00dfe! \ud83d\ude09\ud83d\ude02
Also packen wir mal ein wenig Schnick und Schnack vom W3.CSS Framework dazu:
<link rel="stylesheet" href="https:\/\/klacker.org\/cloud\/pepecyb\/css\/w3.css">
<ul class="w3-ul w3-card-4 w3-pale-green" style="width:100%">
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/hhowama">Hubzilla-H\u00e4ppchen: Hubzilla-Magie - OpenWebAuth \/ MagicAuth<\/a><\/li>
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/folhsh2">Hubzilla: Hashtags folgen - Variante 2<\/a><\/li>
<li><a href="https:\/\/klacker.org\/articles\/pepecyb\/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kan\u00e4le, -Profile<\/a><\/li>
<\/ul><\/code><\/pre>
Und schon sieht es fetziger aus, oder?
<\/a>
Beispiel 3: Kontakt-Widget<\/h4>
Nun m\u00f6chte ich noch in der Seitenleiste ein Element haben, welches die Kontaktm\u00f6glichkeit mittels Delta Chat anzeigt. Daf\u00fcr m\u00f6chte ich den QR-Code meines Delta Chat Accounts verwenden.
Nun k\u00f6nnte man einfach ein Bild, n\u00e4mlich den QR-Code dort hinpacken. Und das sogar mit bbCode, weil's einfacher ist.
<\/a>
Dann sieht das halt so aus:
<\/a>
Nicht sehr ansprechend... und es frisst Platz, weshalb das Artikelmen\u00fc (oder andere Inhalte, falls man noch weitere in die Seitenleiste geschoben hat) nach unten rutscht und man erst scrollen muss, um es zu erreichen.
Besser w\u00e4re es, wenn dort ein Button "Kontakt" zu sehen w\u00e4re, welche bei Klick den QR-Code einblendet... und den man mit einem weiteren Klick wieder ausblenden kann. Daf\u00fcr bietet sich das "Accordeon" von W3.CSS an.
Und damit es nicht so langweilig aussieht, peppe ich es noch mit einer Karte als Inhalt und einer kleinen Animation auf. Ach... und der Button wird schwarz und hat ganz leich abgerundete Ecken.
Der Code daf\u00fcr:
<link rel="stylesheet" href="https:\/\/klacker.org\/cloud\/pepecyb\/css\/w3.css">
<button onclick="myFunction('contact1')" class="w3-button w3-block w3-black w3-left-align w3-round w3-margin-bottom">Kontakt<\/button>
<div id="contact1" class="w3-hide w3-container w3-animate-zoom">
<div class="w3-container">
\u00a0 <div class="w3-card-4 w3-center" style="width:100%;max-width:400px">
\u00a0 <h2>Delta Chat<\/h2>
\u00a0 \u00a0 <img src="https:\/\/klacker.org\/cloud\/pepecyb\/Pepes%20pic\/delta.png" alt="" style="width:100%">
\u00a0 \u00a0 <div class="w3-container w3-center">
\u00a0 \u00a0 \u00a0 <p>derpepe@morpork.email<\/p>
\u00a0 \u00a0 <\/div>
\u00a0 <\/div>
<\/div>
<\/div>
<script>
function myFunction(id) {
\u00a0 var x = document.getElementById(id);
\u00a0 if (x.className.indexOf("w3-show") == -1) {
\u00a0 \u00a0 x.className += " w3-show";
\u00a0 } else {
\u00a0 \u00a0 x.className = x.className.replace(" w3-show", "");
\u00a0 }
}
<\/script><\/code><\/pre>
Schnell noch in die Seitenleiste geschoben... und schon ist die Delta Chat Karte da!
Beispiel 4: Sinnfreier PHP-Block<\/h4>
Einfach, um zu zeigen, dass man auch was mit PHP machen kann, hier ein Block, der anzeigt, wann die aktuelle Seite aufgerufen wurde. Mir ist einfach nichts N\u00fctzliches eingefallen...
Dazu legt man einen Block mit dem Inhaltstyp "PHP" an. Ich nenne ihn hier einfach mal "aufrufzeit".
Der Code ist extrem simpel!
date_default_timezone_set('Europe\/Budapest');
echo 'Seite aufgerufen am: ' . date('d.m.Y - H:i:s');<\/code><\/pre>
Beachte hier: Es darf kein <?php<\/code> davor und kein ?><\/code> am Ende stehen!
Das Ding packe ich in die Profilansicht ganz ans Ende, damit jeder wei\u00df, wann er sich das Profil angeschaut hat:
Soviel dazu...<\/h4>
Damit lasse ich es jetzt einfach bewenden. Ich wollte hier einfach nur zeigen, was \u00fcber die einfachen Dinge aus dem ersten Teil mit Hubzilla alles m\u00f6glich ist.
Man ist extrem frei, die Oberfl\u00e4che f\u00fcr sich selbst, aber auch f\u00fcr Besucher attraktiver und praktischer zu gestalten.
Und man ist nicht auf die F\u00e4higkeiten vorhandener Widgets und Styles vorhandener Themes beschr\u00e4nkt. Mit aktuellen Frameworks kann man sehr viel gestalten, was frisch und modern aussieht.
Und da geht manches, was man vielleicht gar nicht f\u00fcr m\u00f6glich h\u00e4lt. So habe ich einfach einmal was ausprobiert (in einem Test-Kanal... weil ich es eigentlich nicht nutzen w\u00fcrde)...
Zum einfachen Verfassen von bbCode-Beitr\u00e4gen nutze ich gerne den SCEditor. Den habe ich mir lokal in eine HTML-Datei abgelegt und als Lesezeichen in die Lesezeichen-Symbolleiste meines Browsers gepackt. Ein Klick und er \u00f6ffnet sich... und ich kann losschreiben.
Und da dachte ich mir einfach mal: Ob man das auch in eine Hubzilla-Ansicht packen kann?
Und tats\u00e4chlich ist es ohne gro\u00dfe Anstrengung dort umsetzbar. Sah dann so aus:
<\/a>
Ihr seht also... es ist echt viel m\u00f6glich. Einfach einmal ausprobieren.
Um Euch in die Frameworks einzuarbeiten oder den Einstieg in PHP zu schaffen, empfehle ich pers\u00f6nlich die Tutorials von w3 schools<\/a>: