diff --git a/help/gitlab-pages.html b/help/gitlab-pages.html
index 4344c36c23a32809cc08a4f495f674b2817de20e..bef780019589f827aa77eb4939a93173f066a839 100644
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -73,8 +73,8 @@
<li> Nun können Sie ihr Projekt befüllen. Tragen Sie mindestens die Grundinformationen wie <em> Project name </em> und <em> Project description </em> ein.<img src="/img/help/createproject.png" width="95%"/> </li>
<li> Klicken Sie auf <em> Create project</em></li>
<li>
- Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt. <img src="/img/help/folderpublic.png" width="95%"/> <br/>
- In diesem Ordner befinden sich die Dateien <em> index.html, aktuelles.html </em>, <em> style.css </em> und <em>settings.js</em>. Diese sorgen für Inhalt (aktuelles.html, index.html) und Aussehen (style.css) der statischen Webseite und enthalten allgemeine Projektinformationen (settings.js). Direkt nach Projekterstellung enthalten sie zunächst nur allgemeine, grundsätzliche Informationen aus dem Template. <img src="/img/help/content_public.png" width="95%"/>
+ Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt.
+ <img src="/img/help/folderpublic.png" width="95%"/> <br/>
</li>
<li>
Um Ihre eigenen Projektinhalte zu veröffentlichen, können Sie entweder eine komplett eigene HTML-Seite erzeugen oder sich an unseren Vorgaben aus dem Template orientieren. Eine Anleitung zur Verwendung unserer Vorlage finden Sie im Bereich <a href="#template_Text">Gitlab-pages Template benutzen</a>
@@ -306,34 +306,32 @@
<li>
Geben Sie einen Dateinamen (<b> wichtig: </b> Endung .html) an und fügen Sie folgenden Standardtext ein:
<textarea rows="28" cols="64" disabled="true">
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="generator" content="GitLab Pages">
- <title>Neue Seite</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div id="topbar">
- <div id="menu" class="navbar"></div>
- </div>
- <div class="content">
- <h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
-
- <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
-
- <h2> Seitentitel: </h2>
-
- <p>
- Content
- </p>
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="generator" content="GitLab Pages">
+ <title>Neue Seite</title>
+ <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+ <div id="topbar">
+ <div id="menu" class="navbar"></div>
+ </div>
+ <div class="content">
+ <h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
+
+ <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
+ <h2> Seitentitel: </h2>
+ <p>
+ Content
+ </p>
- <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
- </div>
- <script src="settings.js"> </script>
- </body>
-</html>
+ <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
+ </div>
+ <script src="settings.js"> </script>
+ </body>
+ </html>
</textarea>
<img src="/img/help/editnewpage.png" width="95%"/>
</li>
@@ -396,6 +394,241 @@
</div>
</div>
</div>
+ <div id="template_Text" class="margin_middle">
+ <div class="container background_ffffff">
+ <div class="margin_top_bottom">
+ <div class="col-lg-12">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center mailinglist_heading"><strong>Gitlab-pages Templates <em>generic/ simple_raw / simple_thesis</em> benutzen</strong></h2>
+ </div>
+ <div class="col-auto background_ffffff">
+ <p>
+ Wir stellen mehrere Vorlagen für Projektwebseiten zur Verfügung.
+ </p>
+ <div class="help">
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse3t" aria-expanded="false" aria-controls="collapse3t">
+ <small>Erste Schritte</small></a>
+ </h3>
+ </div>
+ <div id="collapse3t" class="card-body collapse">
+ <p>
+ Eine Projektwebseite kann entweder aus einer einzelnen Seite oder aber aus mehreren Seiten mit einem Auswahlmenü bestehen.
+ Falls der Name eines Templates mit "simple" beginnt, handelt es sich um ein Template mit einer einzigen Seite. Die allgemeine Struktur eines Templates sieht wie folgt aus:
+
+ </p>
+ <img src="/img/help/content_public.jpg"/>
+ <p><em>assets</em> Ordner: In diesem Ordner platzieren Sie alle Dateien, die alle Ihre Seiten des gitlab templates gemeinsm haben. Hier kommen zum Beispiel persönliche Avatare oder Partnerlogos in die entsprechenden Unterordner (images, logos).</p>
+ <p><em>home</em> Ordner: Dies ist der Standardordner für Ihre Hauptseite.</p>
+ <p><em>settings.js</em>: In dieser Datei wählen Sie die Einstellungen für Ihre gitlab-Seite.</p>
+ <p>Sie sollten einige dieser Dateien anpassen.</p>
+ <img src="/img/help/content_public_colors.jpg"/>
+ <p>Rot: Diese Dateien sollten nicht geändert werden.</p>
+ <p>Orange: Diese Dateien sollten durch eigene Datein mit dem selben Dateinamen ersetzt werden. Ob Dateien ersetzt werden müssen, hängt vom Template ab.</p>
+ <p>Grün: Diese Dateien können Sie ändern</p>
+ <p>Blau: In diese Ordner können Sie zusätzliche Dateien platzieren. In den assets-Ordner zum Beispiel Bilder, Logos etc.; in den template-Ordner Ihr eigenes css, javascript oder weitere Dateien.</p>
+ <p>
+ Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
+ </p>
+ <ol>
+ <li> Anpassen der Einstellungen in settings.js
+ <p>
+ Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> settings.js </em> und editieren Sie die Datei.
+ </p>
+ <img src="/img/help/select_settings_generic.png" width="95%"/>
+ <p>
+ Hier sehen Sie die Standardwerde für Soziale Netzwerke und persönliche Webseiten eines Teilnehmers sowie den Standardavatar. Es wird empfohlen, diese Werte nicht zu ändern, aber Sie können weitere Soziale Netzwerke hinzufügen.
+ </p>
+ <img src="/img/help/default_settings.png"/>
+ <p>Diese Schalter kontrollieren, welche Teile der gitlab-Seite angezeigt werden sollen. Wenn Sie also beispielsweise nur eine einzige Seite haben, benötigen Sie kein Menü und können den Wert für 'menu' auf OFF stellen.</p>
+ <img src="/img/help/switches.png"/>
+ <p>Hier ändern Sie das Projektlogo. Das Logo wird am oberen Rand der Seite mittig angezeigt. Wenn der Schalter für 'project logo' auf OFF steht, wird es nicht angezeigt.</p>
+ <img src="/img/help/pr_logo.png"/>
+ <p>Hier ändern Sie den Projektnamen. Wenn der Schalter auf 'OFF' steht, wird kein Projektname angezeigt.</p>
+ <img src="/img/help/pr_name.png"/>
+ <p>Hier ändern Sie das Menü Ihrer gitlab-Seite. Ein Menü kann entweder auf einen Unterordner/ template verweisen oder aber auf einen externen Link, z.B. eine Demo. Sie können Menüeinträge hinzufügen oder entfernen. Das Menü wird mit dem Schalter 'OFF' verborgen.
+ Vergessen Sie nicht den Schrägstrich am Ende eines Menülinks, wenn dieser auf einen Ordner zeigt.
+ </p>
+ <img src="/img/help/menu.png"/>
+ <p>Hier ändern Sie die Teilnehmenden. Sie können die Standardwerte für Soziale Netzwerke (diese beinhalten die HFT-Kanäle) oder Ihr eigenen Progile verwenden. Sie können auf Ihre persönliche Webseite verlinken. Sie können soziale Netzwerke hinzufügen oder entfernen. Sie können auch einen persönlichen Avatar oder den Standard-Avatar (DEFAULT.avatar) verwenden.
+ </p>
+ <img src="/img/help/partic.png"/>
+ <p>Hier ist ein Beispiel mit zwei Teilnehmenden:
+ </p>
+ <img src="/img/help/partic2.png"/>
+ <p>
+ Hier ändern Sie die Fußzeilenlogos z.B. zu denen von Projektpartnern. Wenn Sie das Logo nicht mit einer externen Webseite verlinken wollen, verwenden Sie EMPTY_LINK als Wert für href. Der Titel title wird bei Mouse-Hover über dem Logo erscheinen.
+ </p>
+ <img src="/img/help/f_logos.png"/>
+ <p>
+ Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
+ </p>
+
+ <img src="/img/help/edit_settings.png" width="95%"/>
+
+ </li>
+ </ol>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse4t" aria-expanded="false" aria-controls="collapse4t">
+ <small>Avatar hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse4t" class="card-body collapse">
+ <p> Um einen persönlichen Avatar hinzuzufügen:
+ <ol>
+ <li>
+ Öffnen Sie den Ordner <em> public/assets/images </em>
+ </li>
+ <li>
+ Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
+ </li>
+ <li>
+ Wir empfehlen, dass das Bild quadratisch oder im Porträtformat ist. Zudem empfehlen wir keine allzu großen Bilder (>500px) hochzuladen.
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
+ <small>Logo hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse5" class="card-body collapse">
+ <p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
+ <ol>
+ <li>
+ Öffnen Sie den Ordner <em> public/assets/logos </em>
+ </li>
+ <li>
+ Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
+ <img src="/img/help/publicplus.png" width="95%"/>
+ </li>
+ <li>
+ <p>
+ Das Logo sollte quadratisch mit einer Auflösung von 300x300 pixel sein.
+ </p>
+ </li>
+ <li>
+ Fügen Sie die gewünschte Datei hinzu und klicken Sie auf <em> Upload File </em>
+ <img src="/img/help/upload_logo.png" width="95%"/>
+ </li>
+ <li>
+ Öffnen Sie nun im Ordner <em> public </em> die Datei <em> settings.js </em> und editieren diese.
+ <p>
+ In der Zeile mit <em>projectLogo</em> schreiben Sie nun DATEINAME in die Anführungszeichen, um den Pfad zum Logo anzugeben. Ein Klick auf <em> Commit changes </em> speichert die Datei.
+ </p>
+ <img src="/img/help/pr_logo.png"/>
+ </li>
+ <li>
+ Nun erscheint auf all Ihren Seiten das Projektlogo neben dem Logo der Hochschule.
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse6t" aria-expanded="false" aria-controls="collapse6t">
+ <small>Neue Seite hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse6t" class="card-body collapse">
+ <p>
+ Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
+ <ol>
+ <li>
+ Gehen Sie in den templates-Ordner und editieren Sie die Datei index.html. Wählen Sie den gesamten Text in dieser Datei aus und kopieren ihn. Dann Klicken Sie auf <em>cancel</em>.
+ </li>
+ <li>
+ Klicken Sie im Ordner <em> public </em> auf das +, das sich oben neben dem Pfad befindet
+ <img src="/img/help/publicplus.png" width="95%"/>
+ </li>
+ <li>
+ Klicken Sie dort auf <em> New File </em>
+ </li>
+ <li>Fügen Sie den Text, den Sie kopiert haben, ein</li>
+ <li>
+ Geben Sie die Dateinamen index.html (<b> wichtig: </b> Endung .html)
+
+ <img src="/img/help/editnewpage.png" width="95%"/>
+ </li>
+ <li>
+ Nun können Sie noch den Inhalt der Seite anpassen. Wenn Sie mit dem Inhalt der Seite zufrieden sind, speichern Sie sie durch Klick auf <em> Commit changes </em>
+ </li>
+ <li>
+ Ihre Seite wird nun automatisch auf den Server übertragen und ist unter folgender Adresse erreichbar:
+ <p>https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/DATEINAME</p>
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse7t" aria-expanded="false" aria-controls="collapse7t">
+ <small>simple_raw Vorlage</small></a>
+ </h3>
+ </div>
+ <div id="collapse7t" class="card-body collapse">
+ <p>Dies is eine Vorlage mit einer einzigen Seite. Um den Inhalt anzupassen, ändern Sie die Datei index.html.</p>
+ </div>
+ </div>
+
+ <br/>
+
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse8t" aria-expanded="false" aria-controls="collapse8t">
+ <small>simple_thesis Vorlage</small></a>
+ </h3>
+ </div>
+ <div id="collapse8t" class="card-body collapse">
+ <p>
+ Diese Vorlage hat eine einzelne Seite und ist für die Präsentation einer Studienarbeit (Bachelor- / Masterarbeit) gedacht. Im Home-Ordner müssen Sie die Dateien für Ihre Titelseite und die pdf Ihrer Arbeit austauschen. Anschließend müssen in der Datei index.html Ihr Name, das Jahr etc. angepasst werden.
+ </p>
+ </div>
+ </div>
+
+ <br/>
+
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse9t" aria-expanded="false" aria-controls="collapse9t">
+ <small>generic Vorlage</small></a>
+ </h3>
+ </div>
+ <div id="collapse9t" class="card-body collapse">
+ <p>
+ Wenn Sie die generic Vorlage wählen, finden Sie den zusätzlichen Ordner tempaltes. In diesem Ordner finden Sie die für Unterseiten verfügbaren Vorlagen.
+ Um eine solche Vorlage für eine Unterseite zu nutzen, kopieren Sie den Ordner aus templates/<template name> und kopieren Ihn unter neuem Namen in Ihrem root-Ordner. Bitte beachten Sie, dass dies nicht in Gitlabs Webclient geschehen kann, sondern Sie dazu lokal auf Ihren Rechner arbeiten müssen.
+ Die Startseite deutet dabei immer auf den Ordner home, wenn Sie also die Startseite ändern wollen, müssen Sie den Ordner in 'home' umbenennen.
+ </p>
+ <img src="/img/help/generic.png"/>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
</div>
</div>
diff --git a/img/help/content_index_marked.png b/img/help/content_index_marked.png
index c54492a44508edb71cefdf6ad99d4cd3517cce61..316ea7d379cba0e3a3b8038c034a6c204d7bcb4a 100644
Binary files a/img/help/content_index_marked.png and b/img/help/content_index_marked.png differ
diff --git a/img/help/content_public.jpg b/img/help/content_public.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1838b2dff9f221870bf3a9cea6a49050dda46df7
Binary files /dev/null and b/img/help/content_public.jpg differ
diff --git a/img/help/content_public.png b/img/help/content_public.png
deleted file mode 100644
index 1b1c9ab14457f56294b5c7985848db81173e64ff..0000000000000000000000000000000000000000
Binary files a/img/help/content_public.png and /dev/null differ
diff --git a/img/help/content_public_colors.jpg b/img/help/content_public_colors.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6b3d9bbbd2b5c97a7b16061c3be1959bfa01a449
Binary files /dev/null and b/img/help/content_public_colors.jpg differ
diff --git a/img/help/default_settings.png b/img/help/default_settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5e8e805822308b06773ab1d8cc37dfadc0f0570
Binary files /dev/null and b/img/help/default_settings.png differ
diff --git a/img/help/edit_contact.png b/img/help/edit_contact.png
deleted file mode 100644
index 5b4c4c9730b01043c2cbac2010f06d883edbd8b0..0000000000000000000000000000000000000000
Binary files a/img/help/edit_contact.png and /dev/null differ
diff --git a/img/help/edit_settings.png b/img/help/edit_settings.png
deleted file mode 100644
index 18ee119d079e08e62554de1a83fcaff734a8e8df..0000000000000000000000000000000000000000
Binary files a/img/help/edit_settings.png and /dev/null differ
diff --git a/img/help/edit_settings_generic.png b/img/help/edit_settings_generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7261e942f0ae2151324e7afe4e46c9f2ac4f81e
Binary files /dev/null and b/img/help/edit_settings_generic.png differ
diff --git a/img/help/editnewpage.png b/img/help/editnewpage.png
index eadd4b3632b0cac9325b7ec57e59942013b85488..e57f6e38f894269be8facf5ff9dfb5df3c8892f9 100644
Binary files a/img/help/editnewpage.png and b/img/help/editnewpage.png differ
diff --git a/img/help/f_logos.png b/img/help/f_logos.png
new file mode 100644
index 0000000000000000000000000000000000000000..620c58792b7d4362a93a322585038d94f93f96e2
Binary files /dev/null and b/img/help/f_logos.png differ
diff --git a/img/help/generic.png b/img/help/generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..32497460abdfbbabe4f3f7538ab84d7c79e59dd7
Binary files /dev/null and b/img/help/generic.png differ
diff --git a/img/help/menu.png b/img/help/menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..ada3a1dacaebd3bb64ab6900cd6be4ee214deeb1
Binary files /dev/null and b/img/help/menu.png differ
diff --git a/img/help/partic.png b/img/help/partic.png
new file mode 100644
index 0000000000000000000000000000000000000000..05041efcbf3b42e1f8986b8cb07fc203f9d286fb
Binary files /dev/null and b/img/help/partic.png differ
diff --git a/img/help/partic2.png b/img/help/partic2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4fccc4208f715a951d2116bd64da1301120eb8b
Binary files /dev/null and b/img/help/partic2.png differ
diff --git a/img/help/pr_logo.png b/img/help/pr_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..aee979e10bb2620b29c4cf0ad0c153335af85e73
Binary files /dev/null and b/img/help/pr_logo.png differ
diff --git a/img/help/pr_name.png b/img/help/pr_name.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe610d512c67cf464dea5762e3ce9e0d99dcd252
Binary files /dev/null and b/img/help/pr_name.png differ
diff --git a/img/help/publicplus.png b/img/help/publicplus.png
deleted file mode 100644
index ad42dbc56b96a2ab02f419b38398789a5a1da26f..0000000000000000000000000000000000000000
Binary files a/img/help/publicplus.png and /dev/null differ
diff --git a/img/help/publicplus_generic.png b/img/help/publicplus_generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..23a7c042bf52ad74184a0f6194a4fe163055d6d2
Binary files /dev/null and b/img/help/publicplus_generic.png differ
diff --git a/img/help/select_contact.png b/img/help/select_contact.png
deleted file mode 100644
index a6727c813d12323aea54048b0e061861077b3947..0000000000000000000000000000000000000000
Binary files a/img/help/select_contact.png and /dev/null differ
diff --git a/img/help/select_settings.png b/img/help/select_settings.png
deleted file mode 100644
index b2a165fe361c0f2861e5d08c012022ca53523037..0000000000000000000000000000000000000000
Binary files a/img/help/select_settings.png and /dev/null differ
diff --git a/img/help/select_settings_generic.png b/img/help/select_settings_generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..2996ce8341133885329a0791502a33961bcb54d6
Binary files /dev/null and b/img/help/select_settings_generic.png differ
diff --git a/img/help/settings_logo.png b/img/help/settings_logo.png
deleted file mode 100644
index 86c5424fb67a514985a518262c535ed7fdb0126f..0000000000000000000000000000000000000000
Binary files a/img/help/settings_logo.png and /dev/null differ
diff --git a/img/help/switches.png b/img/help/switches.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e63429dad3898e9395d7b8da3e276031a783f41
Binary files /dev/null and b/img/help/switches.png differ