Hubzilla gestalten
Fortsetzung zu Individuelle Anpassungen mit dem PDL-Editor (Einsteiger)
Eine Digitaluhr im simplen Text-Format in die Seitenleiste schieben und umständlich ein Hubzilla-Menü zu bauen... das ist jetzt nicht die "Hohe Schule" der Hubzilla-Gestaltung. Und auch nicht besonders schick und modern...
Eine Digitaluhr im simplen Text-Format in die Seitenleiste schieben und umständlich ein Hubzilla-Menü zu bauen... das ist jetzt nicht die "Hohe Schule" der Hubzilla-Gestaltung. Und auch nicht besonders schick und modern...
View article
View summary
Fortsetzung zu Individuelle Anpassungen mit dem PDL-Editor (Einsteiger)
Eine Digitaluhr im simplen Text-Format in die Seitenleiste schieben und umständlich ein Hubzilla-Menü 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ändnis der Seitengestaltung bei Hubzilla dienen.
Das Thema ist auch kaum vollumfassend abzuhandeln. In diese Artikel hier gehe ich auch nur beispielhaft auf die Möglichkeiten ein und ich kann vielleicht Anstöße zu neuen Ideen geben, wie sich Nutzer ihr eigenes Hubzilla zusammenbauen können, ohne mit Admin-Rechten irgendetwas zu installieren.
Im ersten Teil habe ich ja gezeigt, wie man mit der App "Webseiten" ein Menü erstellt und dieses im PDL-Editor in die Seitenleiste packen kann... etwas umständlich und so eigentlich auch nicht vorgesehen.
Die Optik eines solchen Menüs ist ohnehin nicht sonderlich ansprechend und tut damit auch nichts gegen den Vorwurf, Hubzilla würde mit seinem Standard-Theme "Redbasic" doch recht altbacken aussehen.
Sinnvoller und auch so vorgesehen ist die Gestaltung mit selbst erstellten Blöcken. 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ückgreift.
Voraussetzung für all die Dinge, die ich hier einmal vorführen möchte, sind die installierten Apps "PDL-Editor" und "Webseiten" und die Freigabe für Code für den Kanal, den man aufpeppen möchte.
Sofern man nicht selbst der Administrator ist, muss man für den letzten Punkt den Hub-Administrator kontaktieren und ihn bitten, Code für den eigenen Kanal zuzulassen. Für den Admin ist das nur ein einfacher Klick. Am besten schreibt man dem Admin bei der Bitte um Freischaltung auch gleich, wofür man das benötigt.
Sind diese Voraussetzungen geschaffen, die Apps also installiert und der Code erlaubt, kann es auch gleich losgehen.
Die meisten Themes für Hubzilla bieten entweder ein Subset oder teilweise zumindest das Basis-Stylesheet von Bootstrap. Möchte man aber die Fähigkeiten von Bootstrap umfassend für die Gestaltung nutzen, ist es sinnvoll, das Framework auch original einzubinden.
Das funktioniert mit dem Inhaltstyp "HTML" auch völlig problemlos. Man muss nur führend im Block (gilt natürlich auch für Webseiten, wenn man sie so erstellen möchte) Bootstrap einbinden:
Damit bringt man dann allerdings eine Fremdquelle mit ein. Nun ist Bootstrap nicht extrem groß (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
Eingebunden wird es dann mit
Auch dieses Framework muss man am Beginn eines Blocks einbinden:
Oder man lädt w3.css herunter, packt es z.B. in ein Verzeichnis
ein.
Blöcke werden von der App "Webseiten" zur Verfügung gestellt. Sie dienen dazu, wiederholt benutzbare Inhalte aufzunehmen, welche man dann über den Blocknamen in Webseiten, Webseiten-Layouts oder aber auch in die Seitenlayouts von Hubzilla einbinden kann.
Der Vorteil ist, dass selbst erstellte Blöcke im ITEM-Bereich des PDL-Editors zur Verfügung stehen und per Drag-and-Drop an die passende Stelle geschoben werden können.
Ein Block kann so ziemlich "alles" beinhalten. Und man kann ihn mit verschiedenen Inhaltstypen erstellen.
Es stehen die Inhaltstypen
zur Auswahl.
bbCode erlaubt zwar keine Einbindung eines Web-Frameworks, dafür bietet es spezielle Auszeichnungen für hubzilla-spezifische Dinge.
HTML ist der universellste Inhaltstyp, sofern man sich mit HTML auskennt. Mit einem HTML-Block kann man auch die erwähnten Frameworks nutzen und tolle Effekte und Funktionen einsetzen.
Markdown eignet sich für formatierte Texte, ist also eher etwas für Beitrags-Inhalte und weniger für Blöcke, die man z.B. in die Seitenleiste einer Ansicht packt. Verwenden kann man es aber schon dafür.
(Plain) Text, also reiner, unformatierter Text, ist die einfachste Variante, gibt aber für unsere Zwecke nichts her.
Die Comanche-Layout Auszeichnungssprache ist für den Einsatz für die Dinge, welche hier behandelt werden auch nicht sinnvoll.
PHP hingegen kann man durchaus nutzen, wenn man dynamische Inhalte erzeugen möchte. Setzt allerdings das Verständnis und die Fähigkeit zum Programmieren voraus.
Ich werde jetzt hier fast ausschließlich Blöcke im HTML-Format einsetzen, weil damit die größte Flexibilität gegeben ist.
Und jetzt fange ich einmal mit einem konkreten Beispiel an: Eine Navigationsleiste, die ich ganz oben im Inhaltsbereich der Kanalansicht einbauen möchte. Ich möchte damit Besuchern meiner Kanalseite eine einfache Navigation zu wesentlichen Bereichen meines Kanals ermöglichen. So sollen sie mit einem Klick, ohne länger zu suchen, auf meine Artikelseite, zu meinen Karten, zu meinem Wiki, meiner Galerie und zu meinem öffentlichen Kalender gelangen können. Damit es auch noch wirklich schick aussieht, gibt es als ersten Navigationspunkt eine Logo-Grafik des Hubs, die bei Anklicken zur Hub-Beschreibung führt.

Zunächst habe ich mir für den "Home-Button" eine passende Grafik gebaut, die transparenten Hintergrund hat und zur Schriftgröße der weiteren Buttons passt (100 x 24 Pixel):

Die Navigationsleiste realisiere ich in diesem Fall mit W3.CSS. Außerdem mach ich es noch ein wenig bunt, indem ich die Hover-Farbe für 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
Anschließend muss der Block im PDL-Editor noch an die oberste Stelle des Inhaltsbereichs im MODUL "channel" geschoben und die Änderungen mit Klick auf den Button "APPLY" übernommen werden.

Nicht schlecht für den Anfang, oder?
Im ersten Einführungsteil hatte ich ja ein Menü zu Artikeln von mir als Beispiel gebastelt. Allerdings nicht als Block, sondern als Hubzilla-Menü, welches man nur umständlich mit dem PDL-Editor einbauen kann:

Im Endeffekt ist ein natives Hubzilla-Menü nichts anderes als eine Liste von Links. Und eine Link-Liste kann man auch ohne die Menü-Funktion erstellen.
Für diese Beispiel jetzt, erstelle ich wiederum ein Menü zu einigen (drei) Artikeln meines Kanals. Allerdings als Link-Liste.
Der HTML-Code für den entsprechenden Block sieht dann z.B. so aus:
Hier einfach als einzelne Links untereinander mit dem
Sieht so aus:

Oder vielleicht besser als unsortierte Liste?
Sieht schon etwas besser aus:

In die Kanalseite eingebaut (und mit einem Titel versehen):

Nett! Aber... Nett ist die kleine Schwester von Scheiße! 😉😂
Also packen wir mal ein wenig Schnick und Schnack vom W3.CSS Framework dazu:
Und schon sieht es fetziger aus, oder?

Nun möchte ich noch in der Seitenleiste ein Element haben, welches die Kontaktmöglichkeit mittels Delta Chat anzeigt. Dafür möchte ich den QR-Code meines Delta Chat Accounts verwenden.
Nun könnte man einfach ein Bild, nämlich den QR-Code dort hinpacken. Und das sogar mit bbCode, weil's einfacher ist.

Dann sieht das halt so aus:

Nicht sehr ansprechend... und es frisst Platz, weshalb das Artikelmenü (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äre es, wenn dort ein Button "Kontakt" zu sehen wäre, welche bei Klick den QR-Code einblendet... und den man mit einem weiteren Klick wieder ausblenden kann. Dafür 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ür:
Schnell noch in die Seitenleiste geschoben... und schon ist die Delta Chat Karte da!

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ützliches eingefallen...
Dazu legt man einen Block mit dem Inhaltstyp "PHP" an. Ich nenne ihn hier einfach mal "aufrufzeit".
Der Code ist extrem simpel!
Beachte hier: Es darf kein
Das Ding packe ich in die Profilansicht ganz ans Ende, damit jeder weiß, wann er sich das Profil angeschaut hat:

Damit lasse ich es jetzt einfach bewenden. Ich wollte hier einfach nur zeigen, was über die einfachen Dinge aus dem ersten Teil mit Hubzilla alles möglich ist.
Man ist extrem frei, die Oberfläche für sich selbst, aber auch für Besucher attraktiver und praktischer zu gestalten.
Und man ist nicht auf die Fähigkeiten vorhandener Widgets und Styles vorhandener Themes beschränkt. Mit aktuellen Frameworks kann man sehr viel gestalten, was frisch und modern aussieht.
Und da geht manches, was man vielleicht gar nicht für möglich hält. So habe ich einfach einmal was ausprobiert (in einem Test-Kanal... weil ich es eigentlich nicht nutzen würde)...
Zum einfachen Verfassen von bbCode-Beiträgen 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 öffnet sich... und ich kann losschreiben.
Und da dachte ich mir einfach mal: Ob man das auch in eine Hubzilla-Ansicht packen kann?
Und tatsächlich ist es ohne große Anstrengung dort umsetzbar. Sah dann so aus:

Ihr seht also... es ist echt viel möglich. Einfach einmal ausprobieren.
Um Euch in die Frameworks einzuarbeiten oder den Einstieg in PHP zu schaffen, empfehle ich persönlich die Tutorials von w3 schools:
Viel Spaß beim Experimentieren und bei der Gestaltung Eures Hubzilla-Kanals!
Artikel in der Hubzilla KnowledgeDB
Eine Digitaluhr im simplen Text-Format in die Seitenleiste schieben und umständlich ein Hubzilla-Menü 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ändnis der Seitengestaltung bei Hubzilla dienen.
Das Thema ist auch kaum vollumfassend abzuhandeln. In diese Artikel hier gehe ich auch nur beispielhaft auf die Möglichkeiten ein und ich kann vielleicht Anstöße zu neuen Ideen geben, wie sich Nutzer ihr eigenes Hubzilla zusammenbauen können, ohne mit Admin-Rechten irgendetwas zu installieren.
Im ersten Teil habe ich ja gezeigt, wie man mit der App "Webseiten" ein Menü erstellt und dieses im PDL-Editor in die Seitenleiste packen kann... etwas umständlich und so eigentlich auch nicht vorgesehen.
Die Optik eines solchen Menüs ist ohnehin nicht sonderlich ansprechend und tut damit auch nichts gegen den Vorwurf, Hubzilla würde mit seinem Standard-Theme "Redbasic" doch recht altbacken aussehen.
Sinnvoller und auch so vorgesehen ist die Gestaltung mit selbst erstellten Blöcken. 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ückgreift.
Voraussetzungen
Voraussetzung für all die Dinge, die ich hier einmal vorführen möchte, sind die installierten Apps "PDL-Editor" und "Webseiten" und die Freigabe für Code für den Kanal, den man aufpeppen möchte.
Sofern man nicht selbst der Administrator ist, muss man für den letzten Punkt den Hub-Administrator kontaktieren und ihn bitten, Code für den eigenen Kanal zuzulassen. Für den Admin ist das nur ein einfacher Klick. Am besten schreibt man dem Admin bei der Bitte um Freischaltung auch gleich, wofür man das benötigt.
Sind diese Voraussetzungen geschaffen, die Apps also installiert und der Code erlaubt, kann es auch gleich losgehen.
Bootstrap und/oder W3.CSS
Die meisten Themes für Hubzilla bieten entweder ein Subset oder teilweise zumindest das Basis-Stylesheet von Bootstrap. Möchte man aber die Fähigkeiten von Bootstrap umfassend für die Gestaltung nutzen, ist es sinnvoll, das Framework auch original einzubinden.
Das funktioniert mit dem Inhaltstyp "HTML" auch völlig problemlos. Man muss nur führend im Block (gilt natürlich auch für Webseiten, wenn man sie so erstellen möchte) Bootstrap einbinden:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">`
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Damit bringt man dann allerdings eine Fremdquelle mit ein. Nun ist Bootstrap nicht extrem groß (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
an, in welches man dann den Inhalt der Bootstrap-Distribution hochlädt.Eingebunden wird es dann mit
<link href="https://<URL_des_Hub>/cloud/<Kanal>/bootstrap/css/bootstrap.min.css" rel="stylesheet">`
<script src="https://<URL_des_Hub>/cloud/<Kanal>/bootstrap/js/bootstrap.bundle.min.js"></script>
Ich persönlich 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">
Oder man lädt w3.css herunter, packt es z.B. in ein Verzeichnis
css
in der eigenen Cloud und bindet es mit<link rel="stylesheet" href="https://<URL_des_Hub>/cloud/<Kanal>/css/w3.css">
ein.
Blöcke
Blöcke werden von der App "Webseiten" zur Verfügung gestellt. Sie dienen dazu, wiederholt benutzbare Inhalte aufzunehmen, welche man dann über den Blocknamen in Webseiten, Webseiten-Layouts oder aber auch in die Seitenlayouts von Hubzilla einbinden kann.
Der Vorteil ist, dass selbst erstellte Blöcke im ITEM-Bereich des PDL-Editors zur Verfügung stehen und per Drag-and-Drop an die passende Stelle geschoben werden können.
Ein Block kann so ziemlich "alles" beinhalten. Und man kann ihn mit verschiedenen Inhaltstypen erstellen.
Es stehen die Inhaltstypen
- bbCode
- HTML
- Markdown
- Text (plain Text)
- Comanche-Layout
- PHP
zur Auswahl.
bbCode erlaubt zwar keine Einbindung eines Web-Frameworks, dafür bietet es spezielle Auszeichnungen für hubzilla-spezifische Dinge.
HTML ist der universellste Inhaltstyp, sofern man sich mit HTML auskennt. Mit einem HTML-Block kann man auch die erwähnten Frameworks nutzen und tolle Effekte und Funktionen einsetzen.
Markdown eignet sich für formatierte Texte, ist also eher etwas für Beitrags-Inhalte und weniger für Blöcke, die man z.B. in die Seitenleiste einer Ansicht packt. Verwenden kann man es aber schon dafür.
(Plain) Text, also reiner, unformatierter Text, ist die einfachste Variante, gibt aber für unsere Zwecke nichts her.
Die Comanche-Layout Auszeichnungssprache ist für den Einsatz für die Dinge, welche hier behandelt werden auch nicht sinnvoll.
PHP hingegen kann man durchaus nutzen, wenn man dynamische Inhalte erzeugen möchte. Setzt allerdings das Verständnis und die Fähigkeit zum Programmieren voraus.
Ich werde jetzt hier fast ausschließlich Blöcke im HTML-Format einsetzen, weil damit die größte Flexibilität gegeben ist.
Beispiel 1: Navigationsleiste für die Kanalseite
Und jetzt fange ich einmal mit einem konkreten Beispiel an: Eine Navigationsleiste, die ich ganz oben im Inhaltsbereich der Kanalansicht einbauen möchte. Ich möchte damit Besuchern meiner Kanalseite eine einfache Navigation zu wesentlichen Bereichen meines Kanals ermöglichen. So sollen sie mit einem Klick, ohne länger zu suchen, auf meine Artikelseite, zu meinen Karten, zu meinem Wiki, meiner Galerie und zu meinem öffentlichen Kalender gelangen können. Damit es auch noch wirklich schick aussieht, gibt es als ersten Navigationspunkt eine Logo-Grafik des Hubs, die bei Anklicken zur Hub-Beschreibung führt.

Zunächst habe ich mir für den "Home-Button" eine passende Grafik gebaut, die transparenten Hintergrund hat und zur Schriftgröße der weiteren Buttons passt (100 x 24 Pixel):

Die Navigationsleiste realisiere ich in diesem Fall mit W3.CSS. Außerdem mach ich es noch ein wenig bunt, indem ich die Hover-Farbe für 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://hub.hubzilla.hu/cloud/pepecyb/css/w3.css">
<div class="w3-bar w3-border w3-light-grey">
<a href="https://hub.hubzilla.hu/page/pepecyb/about" class="w3-bar-item w3-button"><img src="https://hub.hubzilla.hu/cloud/pepecyb/whoville/whoville-logo.png" alt=""></a>
<a href="https://hub.hubzilla.hu/articles/pepecyb" class="w3-bar-item w3-button w3-hover-green">Artikel</a>
<a href="https://hub.hubzilla.hu/cards/pepecyb" class="w3-bar-item w3-button w3-hover-blue">Karten</a>
<a href="https://hub.hubzilla.hu/wiki/pepecyb" class="w3-bar-item w3-button w3-hover-teal">Wikis</a>
<a href="https://hub.hubzilla.hu/gallery/pepecyb" class="w3-bar-item w3-button w3-hover-purple">Galerie</a>
<a href="https://hub.hubzilla.hu/cal/pepecyb" class="w3-bar-item w3-button w3-hover-red">Kalender</a>
</div>
Anschließend muss der Block im PDL-Editor noch an die oberste Stelle des Inhaltsbereichs im MODUL "channel" geschoben und die Änderungen mit Klick auf den Button "APPLY" übernommen werden.

Nicht schlecht für den Anfang, oder?
Beispiel 2: Nochmal das Menü aus dem ersten Teil - aber besser
Im ersten Einführungsteil hatte ich ja ein Menü zu Artikeln von mir als Beispiel gebastelt. Allerdings nicht als Block, sondern als Hubzilla-Menü, welches man nur umständlich mit dem PDL-Editor einbauen kann:

Im Endeffekt ist ein natives Hubzilla-Menü nichts anderes als eine Liste von Links. Und eine Link-Liste kann man auch ohne die Menü-Funktion erstellen.
Für diese Beispiel jetzt, erstelle ich wiederum ein Menü zu einigen (drei) Artikeln meines Kanals. Allerdings als Link-Liste.
Der HTML-Code für den entsprechenden Block sieht dann z.B. so aus:
<a href="https://hub.hubzilla.hu/articles/pepecyb/hhowama">Hubzilla-Häppchen: Hubzilla-Magie - OpenWebAuth / MagicAuth</a><br>
<a href="https://hub.hubzilla.hu/articles/pepecyb/folhsh2">Hubzilla: Hashtags folgen - Variante 2</a><br>
<a href="https://hub.hubzilla.hu/articles/pepecyb/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kanäle, -Profile</a>
Hier einfach als einzelne Links untereinander mit dem
<br>-Tag
(nicht schön und elegant).Sieht so aus:

Oder vielleicht besser als unsortierte Liste?
<ul><li><a href="https://hub.hubzilla.hu/articles/pepecyb/hhowama">Hubzilla-Häppchen: Hubzilla-Magie - OpenWebAuth / MagicAuth</a></li>
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/folhsh2">Hubzilla: Hashtags folgen - Variante 2</a></li>
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kanäle, -Profile</a></li></ul>
Sieht schon etwas besser aus:

In die Kanalseite eingebaut (und mit einem Titel versehen):

Nett! Aber... Nett ist die kleine Schwester von Scheiße! 😉😂
Also packen wir mal ein wenig Schnick und Schnack vom W3.CSS Framework dazu:
<link rel="stylesheet" href="https://hub.hubzilla.hu/cloud/pepecyb/css/w3.css">
<ul class="w3-ul w3-card-4 w3-pale-green" style="width:100%">
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/hhowama">Hubzilla-Häppchen: Hubzilla-Magie - OpenWebAuth / MagicAuth</a></li>
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/folhsh2">Hubzilla: Hashtags folgen - Variante 2</a></li>
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kanäle, -Profile</a></li>
</ul>
Und schon sieht es fetziger aus, oder?

Beispiel 3: Kontakt-Widget
Nun möchte ich noch in der Seitenleiste ein Element haben, welches die Kontaktmöglichkeit mittels Delta Chat anzeigt. Dafür möchte ich den QR-Code meines Delta Chat Accounts verwenden.
Nun könnte man einfach ein Bild, nämlich den QR-Code dort hinpacken. Und das sogar mit bbCode, weil's einfacher ist.

Dann sieht das halt so aus:

Nicht sehr ansprechend... und es frisst Platz, weshalb das Artikelmenü (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äre es, wenn dort ein Button "Kontakt" zu sehen wäre, welche bei Klick den QR-Code einblendet... und den man mit einem weiteren Klick wieder ausblenden kann. Dafür 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ür:
<link rel="stylesheet" href="https://hub.hubzilla.hu/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">
<div class="w3-card-4 w3-center" style="width:100%;max-width:400px">
<h2>Delta Chat</h2>
<img src="https://hub.hubzilla.hu/cloud/pepecyb/Pepes%20pic/delta.png" alt="" style="width:100%">
<div class="w3-container w3-center">
<p>derpepe@morpork.email</p>
</div>
</div>
</div>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Schnell noch in die Seitenleiste geschoben... und schon ist die Delta Chat Karte da!

Beispiel 4: Sinnfreier PHP-Block
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ützliches 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');
Beachte hier: Es darf kein
<?php
davor und kein ?>
am Ende stehen!Das Ding packe ich in die Profilansicht ganz ans Ende, damit jeder weiß, wann er sich das Profil angeschaut hat:

Soviel dazu...
Damit lasse ich es jetzt einfach bewenden. Ich wollte hier einfach nur zeigen, was über die einfachen Dinge aus dem ersten Teil mit Hubzilla alles möglich ist.
Man ist extrem frei, die Oberfläche für sich selbst, aber auch für Besucher attraktiver und praktischer zu gestalten.
Und man ist nicht auf die Fähigkeiten vorhandener Widgets und Styles vorhandener Themes beschränkt. Mit aktuellen Frameworks kann man sehr viel gestalten, was frisch und modern aussieht.
Und da geht manches, was man vielleicht gar nicht für möglich hält. So habe ich einfach einmal was ausprobiert (in einem Test-Kanal... weil ich es eigentlich nicht nutzen würde)...
Zum einfachen Verfassen von bbCode-Beiträgen 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 öffnet sich... und ich kann losschreiben.
Und da dachte ich mir einfach mal: Ob man das auch in eine Hubzilla-Ansicht packen kann?
Und tatsächlich ist es ohne große Anstrengung dort umsetzbar. Sah dann so aus:

Ihr seht also... es ist echt viel möglich. Einfach einmal ausprobieren.
Um Euch in die Frameworks einzuarbeiten oder den Einstieg in PHP zu schaffen, empfehle ich persönlich die Tutorials von w3 schools:
Viel Spaß beim Experimentieren und bei der Gestaltung Eures Hubzilla-Kanals!
Artikel in der Hubzilla KnowledgeDB
Feintuning extrem - Berechtigungen unter Hubzilla
Immer wieder "prahle" ich, wie feingranular denn das Berechtigungssystem von Hubzilla ist und wie genau man festlegen kann, wer was sehen und wer was womit machen kann...
View article
View summary

Immer wieder "prahle" ich, wie feingranular denn das Berechtigungssystem von Hubzilla ist und wie genau man festlegen kann, wer was sehen und wer was womit machen kann.
Nutzt man die Kanalrollen "Persönlich" oder "Öffentlich", so ist auch schon sehr viel möglich. Viel mehr als bei den meisten Fediverse-Diensten. Aber trotzdem bleiben es noch "Berechtigungen mit Hammer und Meißel". Wer aber mit dem spitzen Bleistift feine Berechtigungsmuster zeichnen möchte, der muss etwas tiefer in das Berechtigungssystem von Hubzilla eintauchen und – das ergibt sich aus dem Wunsch – ein wenig mehr Aufwand betreiben.
Ausgangspunkt für einen solchen Kanal ist die Kanalrolle. Und hier müssen wir nun "Benutzerdefiniert" auswählen, weil die vorgegebenen Rollen zu viele Rechte einräumen.
Die benutzerdefinierte Kanalrolle entspricht nach Kanalerstellung der Rolle "Persönlich". Wir können aber, im Gegensatz zu den vorkonfigurierten Rollen, jegliche Berechtigung selbst festlegen. Dies geschieht über Einstellungen ➔ Privacy-Einstellungen ➔ Benutzerdefinierte Konfiguration der Channel Role.

Wählt man diesen Punkt, wird man zunächst gewarnt, dass man sich damit seinen Kanal durchaus "kaputt konfigurieren" kann. Na ja... dauerhaft kaputt macht man ihn sich damit auch nicht, weil man ja alles "zurückdrehen" kann. Es kann nur passieren, dass gewisse Dinge womöglich nicht mehr funktionieren, sofern man bei bestimmten Berechtigungen die falsche Einstellung wählt.

"Feintunig extrem" heißt dieser Beitrag... und "extrem" ist hier ziemlich wörtlich gemeint.
Grundsätzlich möchte man ja trotzdem, wenn man ein Soziales Netzwerk nutzt, mit anderen Nutzern in Interaktion treten. Das sollte man im Hinterkopf behalten, insbesondere bevor man bei einer Berechtigung die Auswahl "Nur ich" anwendet.
Für mein Beispiel setze ich jede(!) Berechtigung auf "Nur die, denen Du es explizit erlaubst". Damit ist der erste Schritt getan. Ab sofort muss ich alles, was ich anderen zugestehen möchte, explizit für jeden auch erlauben.
Nun kommen die Kontaktrollen ins Spiel. Es gibt immer die Rolle "Standard", welche allen Verbindungen das erlaubt, was auch mit der Kanalrolle "Persönlich" erlaubt ist. Und jede neue Verbindung erhält zunächst die Kontaktrolle "Standard". Damit wäre also erstmal kaum etwas gewonnen. An dieser Stelle ist es also erforderlich (bei einem neuen Kanal am besten, bevor man die erste Verbindung überhaupt eingeht), weitere Kontaktrollen zu erstellen. Das geschieht mit der App "Contact Roles" (findet Ihr die nicht im App-Menü, müsst ihr in der App-Verwaltung das "Sternchen" erst noch aktivieren).
Dort sieht man in einer Liste die bisher einzige vorhandene Kontaktrolle "Standard" und ein leeres Formular zur Erstellung einer neuen Rolle. Die ist nun im vorliegenden Fall im Bereich der Berechtigungen ohne auch nur ein einziges abgehaktes Kästchen und es gibt auch keine positiven Berechtigungen, die von der Kanalrolle geerbt wurden. Und genau diese Rolle nehmen wir jetzt auch mit sämtlich leeren Kästchen als eine neue Kontaktrolle. Das ist die Rolle, die auch Verbindungen nichts erlaubt. So mal rein gar nichts.

Sie muss einen Namen bekommen. Ich habe meine "nüscht" genannt. Wichtig (nicht zwingend, dazu später mehr) für unser Vorhaben ist die Option "Neuen Kontakten automatisch diese Rolle zuweisen". Die sollte aktiviert werden. Das sorgt dafür, dass jede neu eingegangene Verbindung grundsätzlich erst einmal diese Rolle bekommt... und letztlich "nüscht" darf. Die Verbindung bekommt nicht einmal von uns geteilte Inhalte auch nur zu sehen. Und wir selbst sehen von dieser Verbindung damit auch erstmal genau "nüscht".
Das ist nun aber eher sinnfrei. Die Rolle und die Festlegung, jedem Kontakt dieser Rolle zuzuweisen, sofern man keine andere auswählt, dient nur der Sicherheit, dass neue Verbindungen unbeabsichtigt Berechtigungen bekommen, die wir ihnen eigentlich nicht zugestehen wollen.
So, und nun können wir ans Feintuning gehen. Wir legen uns weitere Kontaktrollen an, die ganz genau auf unsere Bedürfnisse abgestimmt sind.
Die vorhandene (und nicht bearbeitbare) Standard-Rolle können wir natürlich auch für Verbindungen nutzen. Nämlich für genau diejenigen, mit denen wir wie in einem Sozialen Netzwerk ganz normal interagieren möchten.
Nun mag es vielleicht sein, dass wir das typische Social-Network-Verhalten nur für eine bestimmte Zahl unserer Verbindungen haben wollen, die meisten aber sollen die Funktionen nur etwas eingeschränkt nutzen können. Angenommen, die normalen Kontakte sollen unsere Postings sehen können, wir selbst wollen deren Postings auch sehen, sie sollen auch unsere Dateien und Bilder sehen können, ebenso unsere Webseiten und Wikiseiten. Überdies sollen sie liken und disliken können und unsere Beiträge kommentieren... ach und Direktnachrichten sollen sie uns auch schicken können. Die Rolle, ich nenne sie einfach mal "normal" würde dann so aussehen:

Nun mag es sein, dass wir Kontaktanfragen bekommen, wir dem Antragsteller auch durchaus erlauben wollen, unsere Beiträge zu verfolgen, wir selbst wollen aber seine Beiträge nicht sehen und er soll auch keine Reaktionen oder Kommentare machen können... er wäre also das, was bei anderen Diensten der "Follower" ist, dem wir selbst aber nicht folgen, dann können wir eine weitere Rolle anlegen (und z.B. "Follower" nennen). Die sähe dann so aus:

Wir erlauben dem "Follower" also, alles zu sehen, aber selbst nicht in unserem Stream in Erscheinung zu treten.
Und nach diesem Schema können wir uns beliebig viele Kontaktrollen für jede denkbare Verbindung erstellen und dann bestimmten Verbindungen zuweisen.
Das Zuweisen erfolgt entweder, wenn wir selbst eine Verbindung eingehen im dann erscheinenden Verbindungs-Editor. Hier können wir im Auswahlmenü "Wählen Sie eine Rolle für diesen Kontakt" die gewünschte Kontaktrolle auswählen.

Bereits bestehenden Verbindungen können wir auch andere Kontaktrollen zuordenen, indem wir den Verbindungs-Editor in der App "Verbindungen" nutzen.

Bekommen wir eine Verbindungs-Anfrage, landen wir auch wieder im Verbindungs-Editor und legen dort auch gleich die Rolle fest.

Bei einer übersichtlichen Zahl von Verbindungen funktioniert das. Werden es wesentlich mehr Verbindungen, dann kann man sich auch mit der Privacy Gruppen das Leben etwas einfacher machen (auch wenn man die Berechtigungen später einmal umfassend für seine Verbindungen umstrukturieren möchte).
Die App "Privacy Gruppen"muss, sofern noch nicht geschehen, erst einmal installiert werden (obwohl ihre Grundfunktionalität ohnehin schon vorhanden ist... man kann halt ohne die App nicht dran rumschrauben).
Legt man sich für verschiedene Berechtigungs-Rollen nun verschiedene Privacy Gruppen an und schiebt seine Kontakte in diese Gruppen, so kann man in der App "Contact Roles" bei jeder Rolle festlegen, dass diese allen Mitgliedern einer bestimmten Privacy Gruppe zugewiesen werden.
Achtung, Fußangel: Ordnet Ihr einzelne Verbindungen gleichzeitig mehreren Privacy Gruppen zu, so gilt für diese Verbindungen natürlich die Kontaktrolle, die Ihr zuletzt einer Gruppe zugewiesen habt.
Ist also Kontakt A gleichzeitig in den Gruppen B und C und Ihr weist die Kontaktrolle D allen Mitgliedern der Gruppe B zu und danach allen Mitgliedern der Gruppe C die Rolle E, dann verfügt Kontakt A über die Berechtigungen der Rolle D, weil ihm zuletzt als Gruppenmitglied der Gruppe C die Rolle E zugewiesen hat.
Aaaargh... wenn Ihr jetzt einen Knoten im Gehirn habt, Beschwerden bitte nach /dev/null verschieben. 😉😂 War jetzt suboptimal, das Beispiel...
Also kurz: Die zuletzt einer Privacy Gruppe zugewiesene Kontaktrolle gilt dann für alle Gruppenmitglieder, die sich zu dem Zeitpunkt in dieser Gruppe befunden haben. Andere Kontaktrollen, die sie vorher hatten, werden überschrieben.
Soviel zum Berechtigungs-Feintuning. Mit Hubzilla ist echt sehr viel möglich. Und das, was ich hier beschrieben habe, ist tatsächlich, wenn man es auf die Spitze treibt, etwas für Berechtigungsverteilungsfanatiker (nicht nur die Ungarn können lange Wörter). Man muss die richtige Balance finden.
Das Beispiel, das ich mit den paar Rollen hier beschrieben habe, ist aber durchaus alltagstauglich und kann helfen, den Stream hygienisch zu halten.
Die Rolle "nüscht" könnt Ihr Euch auch klemmen, wenn Ihr wollt (vor allem die automatische Zuweisung für neue Kontakte). Ihr müsst dann halt nur darauf achten, beim Eingehen einer Verbindung auch wirklich die korrekte Kontaktrolle zuzuweisen. Ist quasi nur ein zusätzliches Sicherungsseil. Dann wäre es aber sinnvoll, neuen Kontakten als Standard die Rolle "Normal" zuzuweisen.
Titelbild von Kevin Wuhrmann auf Pixabay
Wieder einmal Zuwachs: Bájoska
Nachdem wir ja im ersten Halbjahr einige unserer Schützlinge endgültig gehen lassen mussten, war wieder Kapazität in unserem Hunde-Altersruhesitz...
View article
View summary
Nachdem wir ja im ersten Halbjahr einige unserer Schützlinge endgültig gehen lassen mussten, war wieder Kapazität in unserem Hunde-Altersruhesitz.
Und so hat Bájoska, eine nette ältere Dame (ca. 9 Jahre), Neufundländer-Mix wie auch unser Magic, bei uns ihr endgültiges Zuhause gefunden. Sie war wieder einmal der klassische Fall eines Hundes, der das Tierheim ansonsten nie mehr verlassen hätte: etwas größer, schwarz, "alt"... und überdies mit Herzwurmvorgeschichte (ist schon therapiert). Sowas will keiner haben.
Jedenfalls sprach meine Frau vor ein paar Tagen mit der Leiterin des örtlichen Tierheims hier und berichtete vom Stand unseres Hundealtersruhesitzes. Den Saša, den wir vor Jahren über sie aufgenommen hatten, mussten wir ja vor einiger Zeit erlösen. Na jedenfalls erwähnte meine Frau, dass wir nun wieder einmal Platz für Unvermittelbare hätten.
Und... natürlich gab es da die unvermittelbare Bájoska. Die sei voll lieb (auf den Fotos ständig am Lächeln... das sprach dafür), aber niemand würde sie haben wollen. Verträglich mit Hund und Katz und Spatz. Wir sollten sie uns doch mal am Sonntag anschauen kommen.
Gestern waren wir also da... und was soll ich sagen... so einen aufgeschlossenen, lieben Hund hab ich selten erlebt. Sie kam sofort auf uns zu, als würden wir uns schon ewig kennen und nun endlich nach längerer Zeit wiedersehen. Wir haben ja schon sehr lange Erfahrung mit Hunden aus dem Tierschutz, und wissen wie lange es dauern kann, bis so ein Engel Vertrauen gefasst hat und "angekommen" ist. So z.B. der Magic, dem sie ja so ähnlich sieht. Grundvertrauen hatte er schon nach ein paar Monaten, aber erst seit ein paar Wochen, also nach über einem Jahr bei uns, ist er so richtig endgültig angekommen... Kuscheln einfordern und sowas halt.
Na jedenfalls hat sie uns 😉😂 sofort adoptiert und wir haben sie auch sofort mitgenommen (das Tierheim ist eh völlig überfüllt).
Hier angekommen wollte ich sie dann mit der üblichen Strategie ans Rudel (acht gerettete Hunde) heranführen... also: Rudel im Haus, Neuzugang in den Garten und dann einen nach dem anderen, vom aufgeschlossensten bin zum skeptischsten Schützling in den Garten lassen. Magic war der erste, der durfte. Und dann hat unser Toni von innen selbst die Tür geöffnet und der Rest war ungeplant auf einen Schlag draußen.
Null Probleme! Geschaut, beschnuppert, akzeptiert!
Ob sie wohl mit ins Haus kommt? Klar kommt sie. Nun muss sie nur noch die Hundeklappe (ne große, wo sie alle durchpassen) lernen, das kennt sie noch nicht. Ich schätze, das geht auch in ein paar Tagen.
Auf jeden Fall verhält sie sich hier, als wäre sie schon immer bei uns gewesen. Ich habe noch nie einen Hund erlebt, der (sie kennt uns ja noch nicht einmal 24 Stunden) so in uns hineinkriecht, wie Bájoska. Ines hat sich gestern dann mit ihr auf den Boden gesetzt und wollte probieren, ob sie sich kämmen lässt (war dringend notwendig). Na klar... nach ein paar Stunden lag neben ihr ein "zweiter Hundefell-Hund". Und Bájoska hatte sich während des Bürstens auf ihre Schenkel gelegt. Unglaublich!
Die erste Nacht war völlig ohne Vorkommnisse. Vermutlich wird wohl der Rudi neben ihr gelegen haben... der war nämlich sofort "schockverliebt".
Und so hat sie ein neues Zuhause und darf bei uns bleiben... logisch...
Conversation Features
Loading...
Loading...
Login
PepeCyBs Welt
pcw@hub.hubzilla.hu
Mein Blog PepeCyB's Welt - Pepes Gedanken, das Fediverse und mehr…
Categories