aboutsummaryrefslogtreecommitdiffstats
path: root/doc/en/tutorials
diff options
context:
space:
mode:
Diffstat (limited to 'doc/en/tutorials')
-rw-r--r--doc/en/tutorials/DerivedTheme1.md96
-rw-r--r--doc/en/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.pngbin249151 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.pngbin293314 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8.pngbin178913 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.pngbin43797 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.pngbin46752 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.pngbin257211 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.pngbin91478 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.pngbin293611 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.pngbin318766 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.pngbin298857 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.pngbin532838 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.pngbin137827 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.pngbin466641 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.pngbin240495 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.pngbin665755 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.pngbin324092 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.pngbin466584 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.pngbin155763 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.pngbin134643 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.pngbin306069 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.pngbin57185 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.pngbin255688 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.pngbin83265 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.pngbin264916 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.pngbin68194 -> 0 bytes
-rw-r--r--doc/en/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.pngbin99210 -> 0 bytes
-rw-r--r--doc/en/tutorials/customise_look.md214
-rw-r--r--doc/en/tutorials/personal_channel.html162
-rw-r--r--doc/en/tutorials/pic/fedidb.pngbin0 -> 244957 bytes
-rw-r--r--doc/en/tutorials/pic/fedieverse-observer.pngbin0 -> 106457 bytes
-rw-r--r--doc/en/tutorials/pic/hopt01.pngbin0 -> 150759 bytes
-rw-r--r--doc/en/tutorials/pic/hopt02.pngbin0 -> 151567 bytes
-rw-r--r--doc/en/tutorials/pic/hopt03.pngbin0 -> 19815 bytes
-rw-r--r--doc/en/tutorials/pic/hopt04.pngbin0 -> 14919 bytes
-rw-r--r--doc/en/tutorials/pic/hopt05.pngbin0 -> 65825 bytes
-rw-r--r--doc/en/tutorials/pic/hopt06.pngbin0 -> 52620 bytes
-rw-r--r--doc/en/tutorials/pic/hopt07.pngbin0 -> 58430 bytes
-rw-r--r--doc/en/tutorials/pic/hopt08.pngbin0 -> 55982 bytes
-rw-r--r--doc/en/tutorials/pic/hopt09.pngbin0 -> 57157 bytes
-rw-r--r--doc/en/tutorials/pic/hopt10.pngbin0 -> 58212 bytes
-rw-r--r--doc/en/tutorials/pic/hopt11.pngbin0 -> 61304 bytes
-rw-r--r--doc/en/tutorials/pic/hopt12.pngbin0 -> 62719 bytes
-rw-r--r--doc/en/tutorials/pic/hopt13.pngbin0 -> 27056 bytes
-rw-r--r--doc/en/tutorials/pic/hopt14.pngbin0 -> 81987 bytes
-rw-r--r--doc/en/tutorials/pic/hopt15.pngbin0 -> 81777 bytes
-rw-r--r--doc/en/tutorials/pic/hopt16.pngbin0 -> 82299 bytes
-rw-r--r--doc/en/tutorials/pic/hopt17.pngbin0 -> 86757 bytes
-rw-r--r--doc/en/tutorials/pic/hopt18.pngbin0 -> 81963 bytes
-rw-r--r--doc/en/tutorials/pic/hopt19.pngbin0 -> 63556 bytes
-rw-r--r--doc/en/tutorials/pic/hopt20.pngbin0 -> 83873 bytes
-rw-r--r--doc/en/tutorials/pic/hopt21.pngbin0 -> 71989 bytes
-rw-r--r--doc/en/tutorials/pic/hopt22.pngbin0 -> 106180 bytes
-rw-r--r--doc/en/tutorials/pic/hopt23.pngbin0 -> 92702 bytes
-rw-r--r--doc/en/tutorials/pic/hopt24.pngbin0 -> 77255 bytes
-rw-r--r--doc/en/tutorials/pic/hopt25.pngbin0 -> 593830 bytes
-rw-r--r--doc/en/tutorials/pic/hopt26.pngbin0 -> 768390 bytes
-rw-r--r--doc/en/tutorials/pic/hopt27.pngbin0 -> 417262 bytes
-rw-r--r--doc/en/tutorials/pic/hopt28.pngbin0 -> 680827 bytes
-rw-r--r--doc/en/tutorials/pic/hopt29.pngbin0 -> 545331 bytes
-rw-r--r--doc/en/tutorials/pic/hopt30.pngbin0 -> 504309 bytes
-rw-r--r--doc/en/tutorials/pic/hopt31.pngbin0 -> 622842 bytes
-rw-r--r--doc/en/tutorials/pic/hopt32.pngbin0 -> 561752 bytes
-rw-r--r--doc/en/tutorials/pic/hopt33.pngbin0 -> 508595 bytes
-rw-r--r--doc/en/tutorials/pic/hopt34.pngbin0 -> 866202 bytes
-rw-r--r--doc/en/tutorials/pic/hopt35.pngbin0 -> 835740 bytes
-rw-r--r--doc/en/tutorials/pic/hopt36.pngbin0 -> 672671 bytes
-rw-r--r--doc/en/tutorials/pic/hopt37.pngbin0 -> 589760 bytes
-rw-r--r--doc/en/tutorials/pic/hopt38.pngbin0 -> 546046 bytes
-rw-r--r--doc/en/tutorials/pic/hopt39.pngbin0 -> 854145 bytes
-rw-r--r--doc/en/tutorials/pic/hopt40.pngbin0 -> 520843 bytes
-rw-r--r--doc/en/tutorials/pic/hopt41.pngbin0 -> 558247 bytes
-rw-r--r--doc/en/tutorials/pic/hopt42.pngbin0 -> 503358 bytes
-rw-r--r--doc/en/tutorials/pic/hopt43.pngbin0 -> 496619 bytes
-rw-r--r--doc/en/tutorials/pic/hopt44.pngbin0 -> 497219 bytes
-rw-r--r--doc/en/tutorials/pic/hopt45.pngbin0 -> 497785 bytes
-rw-r--r--doc/en/tutorials/pic/nomadapp.pngbin0 -> 172012 bytes
-rw-r--r--doc/en/tutorials/pic/pubsites.pngbin0 -> 167653 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep01.pngbin0 -> 5442 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep02.pngbin0 -> 21136 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep03.pngbin0 -> 133116 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep04.pngbin0 -> 152224 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep05.pngbin0 -> 33470 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep06.pngbin0 -> 35411 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep07.pngbin0 -> 153697 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep08.pngbin0 -> 70091 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep09.pngbin0 -> 63172 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep10.pngbin0 -> 10344 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep11.pngbin0 -> 68563 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep12.pngbin0 -> 45833 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep13.pngbin0 -> 15734 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep14.pngbin0 -> 60783 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep15.pngbin0 -> 91689 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep16.pngbin0 -> 14547 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep17.pngbin0 -> 13144 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep18.pngbin0 -> 32375 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep19.pngbin0 -> 13828 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep20.pngbin0 -> 11379 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep21.pngbin0 -> 24265 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep22.pngbin0 -> 16603 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep23.pngbin0 -> 7502 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep24.pngbin0 -> 12928 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep25.pngbin0 -> 32799 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep26.pngbin0 -> 37503 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep27.pngbin0 -> 12229 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep28.pngbin0 -> 25357 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep29.pngbin0 -> 31320 bytes
-rw-r--r--doc/en/tutorials/pic/stepbystep30.pngbin0 -> 22395 bytes
-rw-r--r--doc/en/tutorials/step_with_hubzilla.md157
109 files changed, 467 insertions, 162 deletions
diff --git a/doc/en/tutorials/DerivedTheme1.md b/doc/en/tutorials/DerivedTheme1.md
new file mode 100644
index 000000000..3858a335f
--- /dev/null
+++ b/doc/en/tutorials/DerivedTheme1.md
@@ -0,0 +1,96 @@
+### Creating a Derived Theme
+
+**Lesson 1**
+
+A derived theme takes most of the settings from its "parent" theme and lets you change a few things to your liking without creating an entire theme package.
+
+
+To create a derived theme, first choose a name. For our example we'll call our theme 'mytheme'. Hopefully you'll be a bit more creative. But throughout this document, wherever you see 'mytheme', replace that with the name you chose.
+
+**Directory Structure**
+
+First you need to create a theme directory structure. We'll keep it simple. We need a php directory and a css directory. Here are the Unix/Linux commands to do this. Assume that 'mywebsite' is your top level hubzilla folder.
+
+
+ cd mywebsite
+ mkdir view/theme/mytheme
+ mkdir view/theme/mytheme/css
+ mkdir view/theme/mytheme/php
+
+
+Great. Now we need a couple of files. The first one is your theme info file, which describes the theme.
+
+It will be called view/theme/mytheme/php/theme.php (clever name huh?)
+
+Inside it, put the following information - edit as needed
+
+ <?php
+
+ /**
+ * * Name: Mytheme
+ * * Description: Sample Derived theme
+ * * Version: 1.0
+ * * Author: Your Name
+ * * Compat: Red [*]
+ *
+ */
+
+ function mytheme_init(&$a) {
+
+ App::$theme_info['extends'] = 'redbasic';
+
+
+ }
+
+
+Remember to rename the mytheme_init function with your theme name. In this case we will be extending the theme 'redbasic'.
+
+
+Now create another file. We call this a PCSS file, but it's really a PHP file.
+
+The file is called view/theme/mytheme/php/style.php
+
+In it, put the following:
+
+ <?php
+
+ require_once('view/theme/redbasic/php/style.php');
+
+ echo @file_get_contents('view/theme/mytheme/css/style.css');
+
+
+
+That's it. This tells the software to read the PCSS information for the redbasic theme first, and then read our CSS file which will just consist of changes we want to make from our parent theme (redbasic).
+
+Now create the actual CSS file for your theme. Put it in view/theme/mytheme/css/style.css (where we just told the software to look for it). For our example, we'll just change the body background color so you can see that it works. You can use any CSS you'd like.
+
+
+ body {
+ background-color: #DDD;
+ }
+
+
+You've just successfully created a derived theme. This needs to be enabled in the admin "themes" panel, and then anybody on the site can use it by selecting it in Settings->Display Settings as their default theme.
+
+**Lesson 2**
+
+If you want to use the redbasic schemas for your derived theme, you have to do a bit more.
+
+Do everything as above, but don't create view/theme/mytheme/php/style.php, but copy instead view/theme/redbasic/php/style.php to view/theme/mytheme/php/style.php. Modify that file and remove (or comment out) these two lines:
+
+ if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'redbasic')
+ set_pconfig(local_channel(), 'redbasic', 'schema', '---');
+
+Also add this line at the bottom:
+
+ echo @file_get_contents('view/theme/mytheme/css/style.css');
+
+To show the schema selector you have to copy view/theme/redbasic/tpl/theme_settings.tpl to view/theme/mytheme/tpl/theme_settings.tpl. Modify that file and replace the lines:
+
+ {{if $theme == redbasic}}
+ {{include file="field_select.tpl" field=$schema}}
+ {{/if}}
+
+with:
+
+ {{include file="field_select.tpl" field=$schema}}
diff --git a/doc/en/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.png b/doc/en/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.png
deleted file mode 100644
index d5cf1093f..000000000
--- a/doc/en/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.png b/doc/en/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.png
deleted file mode 100644
index d613925aa..000000000
--- a/doc/en/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8.png b/doc/en/tutorials/assets/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8.png
deleted file mode 100644
index c403bf806..000000000
--- a/doc/en/tutorials/assets/2243e48ccea25bd907cce3dbd6fc9f7cd832a4c91a4c5dd294b7b219e7d8.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.png b/doc/en/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.png
deleted file mode 100644
index ca8ba6fb9..000000000
--- a/doc/en/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.png b/doc/en/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.png
deleted file mode 100644
index 0da2d96e2..000000000
--- a/doc/en/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.png b/doc/en/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.png
deleted file mode 100644
index 2a209b2be..000000000
--- a/doc/en/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.png b/doc/en/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.png
deleted file mode 100644
index f992672b0..000000000
--- a/doc/en/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.png b/doc/en/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.png
deleted file mode 100644
index b656192dc..000000000
--- a/doc/en/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.png b/doc/en/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.png
deleted file mode 100644
index 6129195b6..000000000
--- a/doc/en/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.png b/doc/en/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.png
deleted file mode 100644
index 923403fe9..000000000
--- a/doc/en/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.png b/doc/en/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.png
deleted file mode 100644
index f158ad5d9..000000000
--- a/doc/en/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.png b/doc/en/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.png
deleted file mode 100644
index edc8b01cc..000000000
--- a/doc/en/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.png b/doc/en/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.png
deleted file mode 100644
index 5b259058b..000000000
--- a/doc/en/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.png b/doc/en/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.png
deleted file mode 100644
index c03ffd18d..000000000
--- a/doc/en/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.png b/doc/en/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.png
deleted file mode 100644
index 65d4c5f0a..000000000
--- a/doc/en/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.png b/doc/en/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.png
deleted file mode 100644
index 45609a7bb..000000000
--- a/doc/en/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.png b/doc/en/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.png
deleted file mode 100644
index d239d6965..000000000
--- a/doc/en/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.png b/doc/en/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.png
deleted file mode 100644
index 45ed64d00..000000000
--- a/doc/en/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.png b/doc/en/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.png
deleted file mode 100644
index fcaed8bef..000000000
--- a/doc/en/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.png b/doc/en/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.png
deleted file mode 100644
index 0ccfc8995..000000000
--- a/doc/en/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.png b/doc/en/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.png
deleted file mode 100644
index 1cb4d2d22..000000000
--- a/doc/en/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.png b/doc/en/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.png
deleted file mode 100644
index 22e4cb5d5..000000000
--- a/doc/en/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.png b/doc/en/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.png
deleted file mode 100644
index 5674f5207..000000000
--- a/doc/en/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.png b/doc/en/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.png
deleted file mode 100644
index e6b4a9974..000000000
--- a/doc/en/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.png b/doc/en/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.png
deleted file mode 100644
index 8de042ae4..000000000
--- a/doc/en/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.png b/doc/en/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.png
deleted file mode 100644
index cec391fb4..000000000
--- a/doc/en/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.png
+++ /dev/null
Binary files differ
diff --git a/doc/en/tutorials/customise_look.md b/doc/en/tutorials/customise_look.md
new file mode 100644
index 000000000..f8c5e3849
--- /dev/null
+++ b/doc/en/tutorials/customise_look.md
@@ -0,0 +1,214 @@
+## Customise the look of Hubzilla
+
+After creating a channel, its appearance is not particularly appealing.
+
+![hopt01](/help/en/tutorials/pic/hopt01.png)
+
+### Pin apps
+
+Firstly, pin the most important apps to the top navigation bar: ‘Write post’, ‘Channel’, ‘Stream’, ‘Connections’ and ‘Public post stream’.
+To do this, select the bottom menu item ‘+ Apps’ in the app menu (⋮ top right). This will take you to the app settings and immediately to the apps already installed. On this page, click on the small pin symbol for each desired app and you will immediately see the respective icon appear at the top of the navigation bar.
+
+![hopt02](/help/en/tutorials/pic/hopt02.png)
+
+### Display settings
+
+Now it's time for the display settings. To do this, click on ‘Settings’ in the main menu (top left, where you can see your avatar image). The various settings categories can now be seen in the left-hand sidebar. Select ‘Display settings’ here.
+
+![hopt03](/help/en/tutorials/pic/hopt03.png)
+
+![hopt04](/help/en/tutorials/pic/hopt04.png)
+
+The page for the display settings is displayed. Since you want to customise the design, the ‘Custom theme settings’ tab is the right choice.
+
+![hopt05](/help/en/tutorials/pic/hopt05.png)
+
+However, the input screen initially only has a few options (five settings). The last setting is the one for which you must switch on the switch first: ‘Show advanced settings’. Click on ‘Submit’ and call up the ‘Customised theme settings’ tab again. You will now see many more settings.
+
+![hopt06](/help/en/tutorials/pic/hopt06.png)
+
+![hopt07](/help/en/tutorials/pic/hopt07.png)
+
+As an example, the colours are changed here, the size of the avatars in the stream is adjusted and a background image is set.
+
+Under the main settings you will find the settings for the colours of the colour scheme. The default colour is displayed as a small circle under each input field. When choosing your own colour, it makes sense to use the standard colour as a guide, at least in terms of brightness. If you click in one of the input fields, a colour selection dialogue box opens, which you can use to specify the colour. As an example, here is a purple colour scheme in which the basic colours are changed: ‘Primary theme color’, i.e. the basic colour of the theme, ‘Success theme color’, which is the colour for clickable links, for example, ‘Info theme color’, which is displayed as the background colour for highlighted menu items, for example, and the ‘Background colour of the navigation bar’. All other colours are not changed in the example. The choice of colour is of course up to you.
+
+![hopt08](/help/en/tutorials/pic/hopt08.png)
+
+![hopt09](/help/en/tutorials/pic/hopt09.png)
+
+![hopt10](/help/en/tutorials/pic/hopt10.png)
+
+![hopt11](/help/en/tutorials/pic/hopt11.png)
+
+Schließlich die „Größe der Avatare von Themenstartern“ auf 48 Pixel festlegen.
+
+![hopt12](/help/en/tutorials/pic/hopt12.png)
+
+The background image is still missing. This should be relatively large, approximately the size of the main screen used. It is also advisable to use a rather light or pale image (if necessary, lighten it with the graphics programme and reduce the contrast) so that it does not ‘overwhelm’ the actual content.
+
+The background image must be accessible somewhere via a URL. It makes sense to upload the image to the files (cloud) of your own channel and use it from there.
+
+To do this, open the ‘Files’ app in the app menu. Here you can create an extra folder if you like (please note that the folder and the image uploaded there are publicly accessible... adjust the access rights with the small padlock, the privacy tool, if necessary) and then upload the image.
+
+![hopt13](/help/en/tutorials/pic/hopt13.png)
+
+![hopt14](/help/en/tutorials/pic/hopt14.png)
+
+![hopt15](/help/en/tutorials/pic/hopt15.png)
+
+![hopt16](/help/en/tutorials/pic/hopt16.png)
+
+![hopt17](/help/en/tutorials/pic/hopt17.png)
+
+![hopt18](/help/en/tutorials/pic/hopt18.png)
+
+![hopt19](/help/en/tutorials/pic/hopt19.png)
+
+![hopt20](/help/en/tutorials/pic/hopt20.png)
+
+![hopt21](/help/en/tutorials/pic/hopt21.png)
+
+After uploading, the image is displayed in the file list. Right-click on the entry and select to copy the URL to move the URL for the image to the clipboard.
+
+![hopt22](/help/en/tutorials/pic/hopt22.png)
+
+Back at ‘Customised theme settings’, you can now enter the URL in the ‘Background image’ input field.
+
+![hopt23](/help/en/tutorials/pic/hopt23.png)
+
+![hopt24](/help/en/tutorials/pic/hopt24.png)
+
+One last click and Hubzilla shines in its new look.
+
+![hopt25](/help/en/tutorials/pic/hopt25.png)
+
+### PDL Editor
+
+#### Basics
+
+Various Hubzilla apps and basic functions are based on specially designed websites. The user does not come into contact with the underlying mechanisms, they simply use these pages.
+If you call up the ‘Channel’ app, for example, your own channel is displayed.
+
+![hopt26](/help/en/tutorials/pic/hopt26.png)
+
+The channel banner can be seen at the top. The channel name and the channel address (handle) are embedded in this banner.
+
+Below this is the navigation bar with the main menu, the title of the hub, any pinned apps and the app menu.
+
+However, the area below the navigation bar is where things get interesting. This is where the biggest differences can be seen between the various apps. On the channel page, a card with the channel information (banner, profile picture, short description, profile information) can be found at the top of the left-hand sidebar (in the unchanged default state).
+
+In the centre, in the content area, the content created by this channel is displayed.
+Below the profile info card, in the left sidebar, there is a card with some of the connections (when calling up external channels, the shared contacts are displayed here).
+
+Below this is a card with the archives of the content (the top level is the years, one level below the months). If you select an archive, only the content published in the selected archive period is displayed in the content area.
+Below the archive card is the category card. All categories under which content was published are listed here. Clicking on such a category causes all content published by the channel under the corresponding category to be displayed in the content area.
+
+Below the archive card is the card with the keyword cloud, which displays the hashtags used and can be used to filter the content of the content area (channel articles).
+
+If there are unseen notifications, these are shown in another card in the right-hand sidebar.
+
+This is the ‘normal state’.
+
+#### Editing modules with the PDL editor
+
+The various pages that can be accessed via apps are also referred to as ‘modules’.
+
+As a user, you can now customise and design the appearance of these pages to a large extent. Internally, the structure of such a page is determined by a PDL file. These files are layout files that use the Comanche page description language.
+
+So that the user does not have to deal with such a language, there is the app ‘PDL Editor’, with which you can change / create the page structure with a GUI.
+
+The app must first be installed and activated. Then you can call it up from the app menu.
+If you call up the PDL Editor, the page structure of the HQ is displayed as standard.
+
+The main menu of the PDL Editor is located at the bottom centre of the screen. Here you will find the entries
+
+‘MODULES’, “TEMPLATES”, “ITEMS”, “SOURCE” and “APPLY”.
+
+From the ‘MODULES’ menu, you can select the module to be edited (this corresponds to the page to be edited).
+
+Assuming you want to customise the channel page (as it is displayed to you and visitors), select the ‘channel’ module here.
+
+![hopt27](/help/en/tutorials/pic/hopt27.png)
+
+The PDL file for the channel page is loaded and you can see the corresponding components (‘ITEMS’) of this page that have just been described.
+
+![hopt28](/help/en/tutorials/pic/hopt28.png)
+
+Assuming you would now like to ‘refine’ our channel page by displaying the time in the right-hand sidebar, select the ‘CLOCK’ item under ‘ITEMS’, ‘grab’ it with the mouse pointer at the cross arrow symbol and drag it to the right into the sidebar.
+
+![hopt29](/help/en/tutorials/pic/hopt29.png)
+
+![hopt30](/help/en/tutorials/pic/hopt30.png)
+
+To apply the changes, click on ‘APPLY’ in the main menu.
+
+![hopt31](/help/en/tutorials/pic/hopt31.png)
+
+If you now open the channel page, a card with the current time appears in the right-hand sidebar.
+
+![hopt32](/help/en/tutorials/pic/hopt32.png)
+
+In this way, you can customise all the pages found under ‘MODULES’ to your own taste.
+
+If you have customised your page and it is somehow ‘so completely chopped up’: No need to panic! In the main menu, you will find the additional entry ‘RESET’ for customised layout pages. Click on it to reset the page layout to the Hubzilla standard.
+
+However, not all items are presented here... Everyone can experiment a little. Most of them have an explanatory title.
+
+If you click on ‘SOURCE’ in the PDL main menu, the source code of the current layout is displayed. A look here will help you familiarise yourself with PDL. You can also make changes directly in the source code... if something is not accessible via the ‘ITEMS’. However, you should familiarise yourself with the page markup language, blocks and modules beforehand.
+
+![hopt33](/help/en/tutorials/pic/hopt33.png)
+
+#### **PDL editor for advanced users**
+
+Suppose you want to make some links accessible via a menu in the right-hand sidebar of the channel page.
+This is perfectly feasible.
+
+But first you need a menu. To create menus, however, you need to install and activate the ‘Websites’ app, because creating menus is part of the website functionality. So even if you don't want to create websites in your channel, you need the ‘Websites’ app to create menus. Although... that's not quite true. You can also access the menu editor in a different way than via the ‘Websites’ app. To do this, enter `<url-des-hub>/menu/<channel name>`. Now you also end up in the menu ‘app’. However, it is easier with the website app.
+
+![hopt34](/help/en/tutorials/pic/hopt34.png)
+
+Click on ‘Create’ to open the menu editor.
+
+![hopt35](/help/en/tutorials/pic/hopt35.png)
+
+Here you now have to enter a suitable name (which you can use to address the menu later) and (optionally) a title for the menu (this can be seen later on the website).
+
+Then click on ‘Submit and continue’.
+
+You will now be taken to the link editor for the menu you have just created. Here you enter the title of the menu item and the corresponding URL. You can also specify the order in which the menu items are sorted using the ‘Order in list’ field. Once you have completed the entry and clicked on ‘Submit and continue’, you can then enter another menu item. Clicking on ‘Submit and finalise’ adds the entry and closes the menu editor (you can of course also edit menus afterwards).
+
+![hopt36](/help/en/tutorials/pic/hopt36.png)
+
+![hopt37](/help/en/tutorials/pic/hopt37.png)
+
+![hopt38](/help/en/tutorials/pic/hopt38.png)
+
+The new menu now appears in the list of menus.
+
+![hopt39](/help/en/tutorials/pic/hopt39.png)
+
+Now return to the PDL editor and call up the channel module.
+
+Now there are again two possibilities. Either you open the source text editor ‘SOURCE’ and enter the entry for the menu card in the appropriate place by hand...
+
+If you want the menu to appear in the sidebar, select the ‘aside’ region and enter `[menu]mymenu[/menu]` as a new line.
+
+![hopt40](/help/en/tutorials/pic/hopt40.png)
+
+Now click on ‘Submit’ and the new map will appear in the visual PDL editor.
+Accept with ‘APPLY’... and then the menu is shown on the channel website.
+
+![hopt41](/help/en/tutorials/pic/hopt41.png)
+
+The second method (with which you don't have to search for the right place in the source code) is to simply drag any item in the PDL editor to the place where the menu should appear. Then click on the ‘Edit’ button for this item, change the existing entry to `[menu]mymenu[/menu]` and click on ‘Submit’. Then click on ‘APPLY’ and you have the same result.
+
+![hopt42](/help/en/tutorials/pic/hopt42.png)
+
+![hopt43](/help/en/tutorials/pic/hopt43.png)
+
+![hopt44](/help/en/tutorials/pic/hopt44.png)
+
+![hopt45](/help/en/tutorials/pic/hopt45.png)
+
+Have fun experimenting!
diff --git a/doc/en/tutorials/personal_channel.html b/doc/en/tutorials/personal_channel.html
deleted file mode 100644
index 3069cd44b..000000000
--- a/doc/en/tutorials/personal_channel.html
+++ /dev/null
@@ -1,162 +0,0 @@
-
-<p>This tutorial is intended to be followed in sequence as if you were setting up a
-channel for the first time. It introduces some of the tools and features related
-to a personal channel in a natural way.</p>
-
-<h3 id="Create_a_new_channel">Create a new channel</h3>
-
-<p>When you log in for the first time after registering, you must create a channel.
-(Alternatively you can visit https://your_website/new_channel)</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/c9a880cc82ffa1f7c2f460397bb083bf7dc2a2b8f065e64da598b45b4a2b.png" alt="image"></p>
-
-<p>Enter your name and a nickname for the channel address, and select a "role".
-Typically if this is a personal channel that represents you, select a <strong>Social</strong> role
-with a level of default privacy that you are comfortable with. If you are unsure,
-select <strong>Social - Mostly public</strong> which allows easy interaction and provides privacy when you need it.
-Alternatively, <strong>Social - Restricted</strong> is very popular among privacy advocates, though it may require a bit more
-effort to meet people. Whichever setting you choose can be changed later if you decide you require more or less privacy than what is provided.</p>
-
-<!-- This section no longer applicable
-<h3 id="Configure_your_channel_features">Configure your channel features</h3>
-
-<p>When your new channel is created you are directed to the channel settings page.
-Take the time to look around at all the settings pages to familiarize yourself with
-your options, even if you don't understand everything you see right now.</p>
-
-<p>Navigate to the <strong>Additional Features</strong> settings and follow the screenshots below to
-enable various features. Remember to press the Submit button when you are done with
-your selections.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/3656a67dce40a1fc2515e9089217f2e136d4fcf8babe77bac00ecaad43ce.png" alt="image"><img class="img-responsive" src="/help/en/tutorials/assets/4aaaf1e124514c8d6999a5fe1d07be5af460cda4ba6cde9106ebc1564bb0.png" alt="image"><img class="img-responsive" src="/help/en/tutorials/assets/99a6efda4df631dfb2d2a849412044cc6a0f8aebeac289d28786f2649d24.png" alt="image"><img class="img-responsive" src="/help/en/tutorials/assets/e5d5674a34e848e2cce90a60fc416415271d9c51b81ad2a950fb0157222a.png" alt="image"></p>
--->
-
-<h3 id="Add_a_profile_photo">Add a profile photo</h3>
-
-<p>When your new channel is created, you will be directed to a page determined by your site admin. By default this is the <strong>Edit Profile</strong> page.
-
-<p>From the <strong>Profile Tools</strong> dropdown menu, select <strong>Change profile photo</strong> (or just click the profile photo).</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/31f42a02bdbae095e0329db6c3814e2975979aff12f873f43d81724c5e61.png" alt="image"></p>
-
-<p>Upload your photo and size as necessary using the image editor.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/458a842c2ea0fbe3b7869bb14dfffe1e5be098d1cd6e590bbead25b4cc05.png" alt="image"></p>
-
-<p>When you press <strong>Done Editing</strong> you will be redirected back to the profile editor.
-(You might need to clear your browser cache if you have trouble seeing the new photo.)</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/d080e92d797af5e863fa39b2084c16a8410de1f7a6559633435817444aef.png" alt="image"></p>
-
-<p>Returning to your channel home page you will see that a post notifying others of your new
-profile pic has been automatically posted.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/1ebe02c205962dd25035c441631745d16acdb7a44e50d148256c8ad26a67.png" alt="image"></p>
-
-<h3 id="Compose_a_post">Compose a post</h3>
-
-<p>Go to your channel home and open the post editor by pressing the <strong>Share</strong> textbox
-at the top of the channel "wall". Enter a message, and then drag-and-drop an image
-file into the post editor text area (alternatively you can use the <strong>Attach file</strong>
-tool at the bottom).</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/b0bfdf02aef3710a37bb6092c3240b291eca8afa73133b3ac03b86f3302d.png" alt="image"></p>
-
-<p>Your image file will be automatically uploaded and stored in your cloud files, and
-a link will appear in the post window. Pressing the post preview button will allow you to preview your post before publishing it.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/7c976a06662a1357b3da8ed0680d1a721c85f2ae2bdd5739a8def466010e.png" alt="image"></p>
-
-<p>Pressing the lock button near the Submit button will open the <strong>Access Control List</strong>
-so you can specify exactly who can access this post.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/2b539d5a8474d6ec6dc91155b628d9be5f99ab04a78108ec404f53ec7bb5.png" alt="image"></p>
-
-<h3 id="Use_an_uploaded_image_as_a_channel_cover_photo">Use an uploaded image as a channel cover photo</h3>
-
-<p>One way to add some pizzazz your channel is to add a cover photo that visitors will
-see when they load your channel page. The integrated cloud file system
-allows you to choose an existing photo for this purpose.</p>
-
-<p>Visit your photos in the <strong>Photos</strong> app</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/0965ace945f0c95ae38aa5bfedd230d2a7233d3915ac15d629f9dd845854.png" alt="image"></p>
-
-<p>Select the photo you wish to use and select <strong>Use as cover photo</strong> from the <strong>Photo Tools</strong>
-dropdown menu.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/9eae9fad774a4cd29e665961d35affbd053368056f562c58200fb41027b0.png" alt="image"></p>
-
-<p>Crop the image using the photo editor and save your changes.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/b3eece28e8db67f1024af42055f0f24ed5e81ba622aca8cac576ccf5930e.png" alt="image"></p>
-
-<p>When you load your channel home page, you will first see the cover photo, and your
-channel page will fade in as you scroll down.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/4cf326152797a8ecdf5630e921756f825ee00f8ee464d3ef9fed971d2852.png" alt="image"></p>
-
-<h3 id="Make_a_connection">Make a connection</h3>
-
-<p>Making connections between channels to share things is what social communications are all about.
-Making a connection is simple. If you do not already know how to reach a channel's home
-page, you might try a directory search by opening the <strong>Directory</strong> link from the menu on the right
-side of the top navbar.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/ef78bc6aa3fafebd46f353514c907b3fdfe019918fc5553bb3f31388a36f.png" alt="image"></p>
-
-<p>You can connect directly from the directory entry using the <strong>Connect</strong> button there,
-or you can open the channel page first and press the <strong>Connect</strong> button below the
-profile photo.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/75d2927b7ad0d2043d4d3b6ba1364fac8ead173edd39340adaf78be11c9d.png" alt="image"></p>
-
-<p>After you connect you are immediately taken to the connection editor page, where
-you make some important decisions about what you plan to share with this channel.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/b334915c03a665493915598c69c17a87c910a39db2cd3b5292e4623ea4c4.png" alt="image"></p>
-
-<p>The two important settings are</p>
-
-<ul><li>The individual permissions for the newly connected channel</li>
-<li>The privacy group(s) the connection is a member of</li>
-</ul><p>The individual permissions are mostly straightforward, but they can be slightly
-unclear at first. For example, <strong>Can view my file storage and photos</strong> does <em>not</em>
-mean that the connected channel will be able to view <em>all</em> of your photos and files!
-It means that you will have the <em>option</em> to share photos and files with that
-channel. It is perfectly possible for you to allow someone to read your posts but
-disallow them from seeing photos in that post. This kind of unusual situation is,
-as they say, not a bug; it is a feature.</p>
-
-<p>Privacy groups allow you to conveniently share items with groups of people. You can
-create whatever groups fit your needs by opening the <strong>Add privacy group</strong> link.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/facb0bdfdecb4c779de9048cd14b417c0d76de17af476be5f296b78d70e9.png" alt="image"></p>
-
-<p>In this editor, you can switch between the existing privacy groups and see at a
-glance what channels are and are not members of the group. Selecting the icon of
-a channel in either box will move it to the in or out of the group.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/25eaad2435200f72a1dd3a00ba17a76ca6db4c246b3c4fa286b390cae7c8.png" alt="image"></p>
-
-<p>When editing an individual channel's settings, you can set their privacy group
-membership using the widget on the left:</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/bdbcf0ffd9004657237f6b7b7863da5a8e39a5bc17d2c67fa160efef2056.png" alt="image"></p>
-
-<p>Connections are a mutual engagement. The channel you connect can <em>choose</em> to approve your
-connection. They will receive a notification that you connected</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/324247680b605fd214fd61aecd8f216fa8f5dfa0f16a04c8e968fdbc43d0.png" alt="image"></p>
-
-<p>which takes them to their <a href="https://grid.reticu.li/connections"><strong>Connections</strong></a> editor page where
-they can choose to approve the connection or not.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/e05248fdc5688d6d24bde52432fdc7b39692a094559aa504de99352940b1.png" alt="image"></p>
-
-<p>After you approve a connection, it is a good idea to open the individual connection
-editor by pressing the edit button beside the <strong>Delete</strong> button.</p>
-
-<p><img class="img-responsive" src="/help/en/tutorials/assets/c4cad3e4c356dd2a227df79bd4dc6d47edf1b66ea243f005b6b452ec366b.png" alt="image"></p>
-
-
diff --git a/doc/en/tutorials/pic/fedidb.png b/doc/en/tutorials/pic/fedidb.png
new file mode 100644
index 000000000..988658aff
--- /dev/null
+++ b/doc/en/tutorials/pic/fedidb.png
Binary files differ
diff --git a/doc/en/tutorials/pic/fedieverse-observer.png b/doc/en/tutorials/pic/fedieverse-observer.png
new file mode 100644
index 000000000..a80cbded9
--- /dev/null
+++ b/doc/en/tutorials/pic/fedieverse-observer.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt01.png b/doc/en/tutorials/pic/hopt01.png
new file mode 100644
index 000000000..6543906df
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt01.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt02.png b/doc/en/tutorials/pic/hopt02.png
new file mode 100644
index 000000000..8daa6bcce
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt02.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt03.png b/doc/en/tutorials/pic/hopt03.png
new file mode 100644
index 000000000..258d47001
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt03.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt04.png b/doc/en/tutorials/pic/hopt04.png
new file mode 100644
index 000000000..0cf80fc55
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt04.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt05.png b/doc/en/tutorials/pic/hopt05.png
new file mode 100644
index 000000000..acd442a5f
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt05.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt06.png b/doc/en/tutorials/pic/hopt06.png
new file mode 100644
index 000000000..1bde1ffed
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt06.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt07.png b/doc/en/tutorials/pic/hopt07.png
new file mode 100644
index 000000000..0d93acbd5
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt07.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt08.png b/doc/en/tutorials/pic/hopt08.png
new file mode 100644
index 000000000..e3e08c1f1
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt08.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt09.png b/doc/en/tutorials/pic/hopt09.png
new file mode 100644
index 000000000..a0332a804
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt09.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt10.png b/doc/en/tutorials/pic/hopt10.png
new file mode 100644
index 000000000..56eade1e1
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt10.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt11.png b/doc/en/tutorials/pic/hopt11.png
new file mode 100644
index 000000000..c8bfc949b
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt11.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt12.png b/doc/en/tutorials/pic/hopt12.png
new file mode 100644
index 000000000..785e485d6
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt12.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt13.png b/doc/en/tutorials/pic/hopt13.png
new file mode 100644
index 000000000..ca95acb14
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt13.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt14.png b/doc/en/tutorials/pic/hopt14.png
new file mode 100644
index 000000000..f48723302
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt14.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt15.png b/doc/en/tutorials/pic/hopt15.png
new file mode 100644
index 000000000..16458f64f
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt15.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt16.png b/doc/en/tutorials/pic/hopt16.png
new file mode 100644
index 000000000..a6204ffb8
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt16.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt17.png b/doc/en/tutorials/pic/hopt17.png
new file mode 100644
index 000000000..f1e17df7d
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt17.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt18.png b/doc/en/tutorials/pic/hopt18.png
new file mode 100644
index 000000000..1b65ecf53
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt18.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt19.png b/doc/en/tutorials/pic/hopt19.png
new file mode 100644
index 000000000..669ecfb99
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt19.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt20.png b/doc/en/tutorials/pic/hopt20.png
new file mode 100644
index 000000000..0d5102d6c
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt20.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt21.png b/doc/en/tutorials/pic/hopt21.png
new file mode 100644
index 000000000..29493ad27
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt21.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt22.png b/doc/en/tutorials/pic/hopt22.png
new file mode 100644
index 000000000..cfe9e4967
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt22.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt23.png b/doc/en/tutorials/pic/hopt23.png
new file mode 100644
index 000000000..ebe8934fd
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt23.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt24.png b/doc/en/tutorials/pic/hopt24.png
new file mode 100644
index 000000000..fcdd3c819
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt24.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt25.png b/doc/en/tutorials/pic/hopt25.png
new file mode 100644
index 000000000..b5660aab3
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt25.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt26.png b/doc/en/tutorials/pic/hopt26.png
new file mode 100644
index 000000000..baf283f26
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt26.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt27.png b/doc/en/tutorials/pic/hopt27.png
new file mode 100644
index 000000000..e13c1982e
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt27.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt28.png b/doc/en/tutorials/pic/hopt28.png
new file mode 100644
index 000000000..b6c4385ee
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt28.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt29.png b/doc/en/tutorials/pic/hopt29.png
new file mode 100644
index 000000000..2392d848e
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt29.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt30.png b/doc/en/tutorials/pic/hopt30.png
new file mode 100644
index 000000000..9fc4ee3bd
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt30.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt31.png b/doc/en/tutorials/pic/hopt31.png
new file mode 100644
index 000000000..9656ef6a5
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt31.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt32.png b/doc/en/tutorials/pic/hopt32.png
new file mode 100644
index 000000000..70afa3801
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt32.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt33.png b/doc/en/tutorials/pic/hopt33.png
new file mode 100644
index 000000000..0e4c57e66
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt33.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt34.png b/doc/en/tutorials/pic/hopt34.png
new file mode 100644
index 000000000..72fa8ed4f
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt34.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt35.png b/doc/en/tutorials/pic/hopt35.png
new file mode 100644
index 000000000..5aa06cc39
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt35.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt36.png b/doc/en/tutorials/pic/hopt36.png
new file mode 100644
index 000000000..dcc955b86
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt36.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt37.png b/doc/en/tutorials/pic/hopt37.png
new file mode 100644
index 000000000..466d9fbd0
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt37.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt38.png b/doc/en/tutorials/pic/hopt38.png
new file mode 100644
index 000000000..dcdeabd75
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt38.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt39.png b/doc/en/tutorials/pic/hopt39.png
new file mode 100644
index 000000000..852e1a5e1
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt39.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt40.png b/doc/en/tutorials/pic/hopt40.png
new file mode 100644
index 000000000..d7825a76e
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt40.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt41.png b/doc/en/tutorials/pic/hopt41.png
new file mode 100644
index 000000000..6e9d920fa
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt41.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt42.png b/doc/en/tutorials/pic/hopt42.png
new file mode 100644
index 000000000..3b594dfbe
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt42.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt43.png b/doc/en/tutorials/pic/hopt43.png
new file mode 100644
index 000000000..4910684f1
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt43.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt44.png b/doc/en/tutorials/pic/hopt44.png
new file mode 100644
index 000000000..77c769df1
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt44.png
Binary files differ
diff --git a/doc/en/tutorials/pic/hopt45.png b/doc/en/tutorials/pic/hopt45.png
new file mode 100644
index 000000000..6afa1b488
--- /dev/null
+++ b/doc/en/tutorials/pic/hopt45.png
Binary files differ
diff --git a/doc/en/tutorials/pic/nomadapp.png b/doc/en/tutorials/pic/nomadapp.png
new file mode 100644
index 000000000..f62e3d96d
--- /dev/null
+++ b/doc/en/tutorials/pic/nomadapp.png
Binary files differ
diff --git a/doc/en/tutorials/pic/pubsites.png b/doc/en/tutorials/pic/pubsites.png
new file mode 100644
index 000000000..6fe2e1e71
--- /dev/null
+++ b/doc/en/tutorials/pic/pubsites.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep01.png b/doc/en/tutorials/pic/stepbystep01.png
new file mode 100644
index 000000000..98fc350e5
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep01.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep02.png b/doc/en/tutorials/pic/stepbystep02.png
new file mode 100644
index 000000000..55d2069f7
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep02.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep03.png b/doc/en/tutorials/pic/stepbystep03.png
new file mode 100644
index 000000000..6def65c6d
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep03.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep04.png b/doc/en/tutorials/pic/stepbystep04.png
new file mode 100644
index 000000000..7356dadd5
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep04.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep05.png b/doc/en/tutorials/pic/stepbystep05.png
new file mode 100644
index 000000000..87fab8d76
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep05.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep06.png b/doc/en/tutorials/pic/stepbystep06.png
new file mode 100644
index 000000000..44d3ff8fd
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep06.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep07.png b/doc/en/tutorials/pic/stepbystep07.png
new file mode 100644
index 000000000..6d0b386e4
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep07.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep08.png b/doc/en/tutorials/pic/stepbystep08.png
new file mode 100644
index 000000000..ec86d2319
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep08.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep09.png b/doc/en/tutorials/pic/stepbystep09.png
new file mode 100644
index 000000000..962a24d30
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep09.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep10.png b/doc/en/tutorials/pic/stepbystep10.png
new file mode 100644
index 000000000..bfa768f66
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep10.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep11.png b/doc/en/tutorials/pic/stepbystep11.png
new file mode 100644
index 000000000..7d7a428ae
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep11.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep12.png b/doc/en/tutorials/pic/stepbystep12.png
new file mode 100644
index 000000000..03f8edcaf
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep12.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep13.png b/doc/en/tutorials/pic/stepbystep13.png
new file mode 100644
index 000000000..f34cf2840
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep13.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep14.png b/doc/en/tutorials/pic/stepbystep14.png
new file mode 100644
index 000000000..891e9fb78
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep14.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep15.png b/doc/en/tutorials/pic/stepbystep15.png
new file mode 100644
index 000000000..1ec9c43cf
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep15.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep16.png b/doc/en/tutorials/pic/stepbystep16.png
new file mode 100644
index 000000000..061b5a99d
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep16.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep17.png b/doc/en/tutorials/pic/stepbystep17.png
new file mode 100644
index 000000000..90e0d4a56
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep17.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep18.png b/doc/en/tutorials/pic/stepbystep18.png
new file mode 100644
index 000000000..4a1b6153e
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep18.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep19.png b/doc/en/tutorials/pic/stepbystep19.png
new file mode 100644
index 000000000..f867ac869
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep19.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep20.png b/doc/en/tutorials/pic/stepbystep20.png
new file mode 100644
index 000000000..ed0ad7a5f
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep20.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep21.png b/doc/en/tutorials/pic/stepbystep21.png
new file mode 100644
index 000000000..6a00aa7d3
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep21.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep22.png b/doc/en/tutorials/pic/stepbystep22.png
new file mode 100644
index 000000000..5e411cf2c
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep22.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep23.png b/doc/en/tutorials/pic/stepbystep23.png
new file mode 100644
index 000000000..41ee51552
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep23.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep24.png b/doc/en/tutorials/pic/stepbystep24.png
new file mode 100644
index 000000000..b4e711e3e
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep24.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep25.png b/doc/en/tutorials/pic/stepbystep25.png
new file mode 100644
index 000000000..0b8087e07
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep25.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep26.png b/doc/en/tutorials/pic/stepbystep26.png
new file mode 100644
index 000000000..cbdcb2cd4
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep26.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep27.png b/doc/en/tutorials/pic/stepbystep27.png
new file mode 100644
index 000000000..c88d02f07
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep27.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep28.png b/doc/en/tutorials/pic/stepbystep28.png
new file mode 100644
index 000000000..58e9c5a90
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep28.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep29.png b/doc/en/tutorials/pic/stepbystep29.png
new file mode 100644
index 000000000..4b92c7766
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep29.png
Binary files differ
diff --git a/doc/en/tutorials/pic/stepbystep30.png b/doc/en/tutorials/pic/stepbystep30.png
new file mode 100644
index 000000000..425bfab1f
--- /dev/null
+++ b/doc/en/tutorials/pic/stepbystep30.png
Binary files differ
diff --git a/doc/en/tutorials/step_with_hubzilla.md b/doc/en/tutorials/step_with_hubzilla.md
new file mode 100644
index 000000000..9da530597
--- /dev/null
+++ b/doc/en/tutorials/step_with_hubzilla.md
@@ -0,0 +1,157 @@
+## Step by step into the Fediverse with Hubzilla
+
+### Getting started
+
+As with any other Fediverse service, the first step is to choose a server (hub). This is the case in Fediverse and an essential part of the freedom it offers.
+
+You can find hubs in the usual ways: by using appropriate databases or lists.
+
+e.g.
+
+[FediDB](https://fedidb.org/software/hubzilla)
+
+![fedidb](/help/en/tutorials/pic/fedidb.png)
+
+[Fediverse Observer](https://hubzilla.fediverse.observer/list)
+
+![observer](/help/en/tutorials/pic/fedieverse-observer.png)
+
+[List of public hubs on a Hubzilla server](https://zotsite.net/pubsites)
+
+![pubsites](/help/en/tutorials/pic/pubsites.png)
+
+Once you have selected a hub, call up the URL. This will take you to a standard page. This may vary slightly from hub to hub, but you will usually find two menu items at the top of the screen: ‘Login’ and ‘Register’.
+
+![sbs01](/help/en/tutorials/pic/stepbystep01.png)
+
+![sbs02](/help/en/tutorials/pic/stepbystep02.png)
+
+Clicking on the link leads to a registration form. There are several possible scenarios here. Some hubs are set up so that you create a channel when you register (another special feature of Hubzilla is that you can operate several channels with one account). With other hubs, you initially only create one account using the form. Once you have created this account and log in for the first time, you will be directed to the channel creation form.
+
+![sbs04](/help/en/tutorials/pic/stepbystep04.png)
+
+To create an account, you need a ( valid ) e-mail address and you have to come up with a password. You also have to confirm your age and then you can send the information you have entered.
+You will then be taken to an input mask where you have to enter a verification code (usually, there are also hubs that skip this step... I think it's risky). You will receive this code by e-mail after submitting the registration form.
+
+![sbs05](/help/en/tutorials/pic/stepbystep05.png)
+
+If you did not have to create a channel when you registered, you will be redirected to the ‘Create a channel’ page at this point. Here you must now come up with a name for your own identity. And also a short name (‘nickname’) for the channel (a suggestion is automatically generated from the channel name). This short name will be the main component of the Fediverse handle (i.e. your own ‘Fediverse address’).
+
+![sbs06](/help/en/tutorials/pic/stepbystep06.png)
+
+| **Note regarding the handle at Hubzilla:** |
+| ------------------------------------------------------------ |
+| Compared to other Fediverse services, Hubzilla makes an exception with the handle. While an ‘@’ is placed in front of the handle almost everywhere, this is not the case with Hubzilla. However, this is quickly internalised. For example, if you use Hubzilla to search for a user who has a Mastodon account via their handle, you simply omit the leading ‘@’. However, if you want to follow or search for a Hubzilla user from another Fediverse service, simply add an ‘@’ in front of the Hubzilla handle. |
+
+Once you have created the channel, you are finally ‘in’. By default, Hubzilla takes you to the ‘’Headquarter‘’ (‘HQ’), an overview page of your own channel.
+
+![sbs08](/help/en/tutorials/pic/stepbystep08.png)
+
+And, as always when you enter Fediverse, it's pretty empty. In the left sidebar you will find tabs with various information:
+
+- Public (or Restricted) Messages: This is a compact view of your personal timeline (called ‘Stream’ on Hubzilla)
+- Direct Messages: Postings that are only exchanged among selected participants.
+- Favourite posts: You can add a ‘star’ to a post to mark it. Posts marked in this way end up here.
+- Notifications
+
+The personal stream (timeline) is displayed in the centre. Important information (notification of new contacts, new posts, etc.) is displayed in the right-hand sidebar. For a newly created channel, a list for the first steps with Hubzilla and links that lead to the corresponding functions also appear here.
+
+If you no longer need this help for beginners, you can switch it off under Settings → Display settings → Content settings.
+
+![sbs10](/help/en/tutorials/pic/stepbystep10.png)
+
+![sbs11](/help/en/tutorials/pic/stepbystep11.png)
+
+![sbs12](/help/en/tutorials/pic/stepbystep12.png)
+
+Firstly, you should fill your profile with useful information... as with any Fediverse service. No black magic!
+The navigation bar is located at the top of the screen. On the left is the menu for channel selection, your profile and settings. On the right are icons for some functions and the so-called ‘app menu’ (⋮), which takes you to the installed apps. The most important applications are already available there by default:
+
+- Files: Access to your own cloud
+- Photos: Access to your own photo album
+- Help: Help
+- Calendars
+- Channel: The page of your own channel with the channel information. Only your own posts are displayed here in the stream.
+- Stream: Switches to the federated stream view.
+- Connections: The existing connections are listed here (‘Followers’ and ‘Followed’). You can also add new connections in the connections directory.
+- Directory: The user directory is displayed. Note: You can view the global directory or just a directory with the users of your own instance. You can also create new connections here.
+
+**I strongly recommend installing and activating a few more apps:**
+
+**ActivityPub, Superblock and Privacy Groups.**
+
+**The ActivityPub app is essential if you want to participate in the Fediverse.** This app is a **MUST** and only requires installation and activation. No further settings are required.
+
+Superblock is also very important, as it allows you to exclude posts from (even unfollowed) users from the stream.
+
+Many (unfortunately, but understandably, not all) hubs also offer the ‘Public post stream’ app. This provides the public timeline of all Fediverse instances that are federated with your own hub. A good place to orientate yourself and find new contacts.
+
+Installing and activating apps is no problem. Select the last entry ‘+ Apps’ in the app menu to access the app management.
+
+![sbs13](/help/en/tutorials/pic/stepbystep13.png)
+
+Here you can view the installed apps (i.e. the preset apps) and the generally available apps (all apps, including those that are not installed).
+
+![sbs14](/help/en/tutorials/pic/stepbystep14.png)
+
+ActivityPub, Superblock and Privacy groups are still only available under ‘Available apps’. Click on ‘Install’ to install them and they will then also be available under ‘Installed apps’.
+
+![sbs15](/help/en/tutorials/pic/stepbystep15.png)
+
+![sbs16](/help/en/tutorials/pic/stepbystep16.png)
+
+![sbs17](/help/en/tutorials/pic/stepbystep17.png)
+
+The newly installed apps still need to be ‘activated’, i.e. made usable via the menu. You will find a ‘star symbol’ in the app box. If you click on it, the star turns yellow and the app is active and now also appears in the app menu.
+
+![sbs18](/help/en/tutorials/pic/stepbystep18.png)
+
+![sbs19](/help/en/tutorials/pic/stepbystep19.png)
+
+![sbs20](/help/en/tutorials/pic/stepbystep20.png)
+
+There is also a pin symbol. If you click on this, the app will also appear permanently in the navigation bar at the top right.
+
+![sbs21](/help/en/tutorials/pic/stepbystep21.png)
+
+It is also recommended that you take this opportunity to pin the ‘Channel’ and ‘Stream’ apps to the navigation bar, as these are often needed.
+
+### It is also important to know how to add contacts...
+
+For example, if you have found an interesting user in the public stream (if activated by the admin and the app is installed), you can simply click on the user's profile picture and select ‘Connect’ from the drop-down menu. You can also click on the user's handle, which will take you to a page with a ‘Connect’ button.
+
+If you know the handle of a Fediverse user, you can also simply click on the ‘Connections’ app. The connection directory opens. There is a ‘+ Add’ button at the top. If you click on this, an input field opens in which you can enter the handle (remember: without the leading ‘@’). Click on the ‘+’ next to it and the contact will be added.
+
+![sbs22](/help/en/tutorials/pic/stepbystep22.png)
+
+![sbs23](/help/en/tutorials/pic/stepbystep23.png)
+
+![sbs24](/help/en/tutorials/pic/stepbystep24.png)
+
+![sbs25](/help/en/tutorials/pic/stepbystep25.png)
+
+![sbs26](/help/en/tutorials/pic/stepbystep26.png)
+
+Finally, you can also call up the directory (it is best to deactivate ‘This website only’ in the left-hand sidebar in order to use the global directory). Here you can simply scroll through or search specifically by name or interests, or by tags (quick access also via a keyword cloud in the left sidebar). To connect, click on the ‘Connect’ button.
+
+![sbs27](/help/en/tutorials/pic/stepbystep27.png)
+
+![sbs28](/help/en/tutorials/pic/stepbystep28.png)
+
+![sbs29](/help/en/tutorials/pic/stepbystep29.png)
+
+![sbs30](/help/en/tutorials/pic/stepbystep30.png)
+
+Once you have contacts, installed the apps and completed your profile, you can now use Hubzilla just like any other Fediverse service.
+
+### Is there an app?
+
+Yes and no...
+
+Basically, you don't need one. You can simply call up the hub in your web browser on your mobile device. The responsive design makes it easy to use.
+
+However, there is an older app for Android that still works very well today. You can find it at [F-Droid](https://f-droid.org/de/), for example, under the name [Nomad](https://f-droid.org/de/packages/com.dfa.hubzilla_android/). I still use it when I want to work with Hubzilla on my smartphone (which is rare).
+
+![nomadapp](/help/en/tutorials/pic/nomadapp.png)
+
+Alternatively, if you are on the move, it is recommended that you install Hubzilla as a PWA on your device: [A Hubzilla app](https://info.hubzilla.hu/en/Hubzilla-App.html)