# Beispielvorgehensweise für neues Design Wie würden Sie mit all den Informationen, die Sie durchgemacht haben, jetzt vorankommen und ein neues Design (basierend auf einem bestehenden) mit neuen Farben erstellen, einschließlich neuer Kurswerkzeugsymbole, eines neuen Logos und eines Standardbilds für Kurse? Dies ist eine Checkliste, die Sie Schritt für Schritt tun müssen: 1. Verbinde dich mit Chamilo 2. Gehe zu Administration -> Plattform -> Konfigurationseinstellungen -> Stylesheets 3. Wählen Sie den Namen des Stils, den Sie als Basis verwenden möchten (dies ist *viel* einfacher als ein neues von Grund auf neu zu starten) 4. Klicken Sie auf `Download` 5. Entpacken Sie die Datei auf Ihrem Computer 6. Benennen Sie den Ordner um, da Sie ihn nicht erneut unter dem gleichen Namen hochladen können 7. Geben Sie den Ordner ein und bearbeiten Sie default.css 8. Verwenden Sie in Ihrem Browser (Firefox oder Chrome) die Entwickler-Symbolleiste und die "Inspect" -Funktion, um Elemente zu finden, deren Farben Sie ändern möchten 9. Notieren Sie sich den aktuellen Farbcode und die Farbe, in die Sie ihn ändern möchten (eine gute Idee könnte sein, eine Tabelle mit der Übereinstimmung zwischen der alten und der neuen Farbe zu erstellen) 10. Zurück zu default.css, suche nach den Farbcodes (suche nach Kleinbuchstaben und Großbuchstaben) und ersetze sie überall durch die neuen Farben 11. Speichern Sie default.css 12. Fügen Sie im `images/` Ihr Logo als header-logo.png hinzu. Dieses Bild kann transparent sein und *sein* eine maximale Höhe von 70px haben. In neueren Versionen können Sie auch ein SVG-Logo verwenden, dies wird jedoch hier nicht behandelt 13. Erstellen Sie im Ordner `icons/` eine Datei namens `session_default.png` mit genau 400x224 Pixeln, um das Standardbild der Kurse zu ersetzen 14. Erstellen Sie im Ordner `icons/` die Verzeichnisse `22` und `64`, um sich auf die Symbole für benutzerdefinierte Kurswerkzeuge vorzubereiten 15. Sie benötigen die folgenden Symbole in *exakt* 64x64 Pixel, um die Standardwerkzeuge von Chamilo zu ersetzen: `agenda.png`, `attendance.png`, `chat.png`, `course_progress.png`, `dropbox.png`, `folder_documents.png`, `forum.png`, `glossary.png`, SO `gradebook.png` `group.png` `info.png` `links.png` `members.png` `notebook.png` `quiz.png`, `scorms.png`, `survey.png`, `valves.png`, `wiki.png`, `works.png` 16. Da jedes Tool deaktiviert werden kann und eine ausgegrausame Version des Werkzeugsymbols angezeigt wird, müssen Sie für jedes der vorherigen Symbole auch eine ausgegrausgelassene Version mit demselben Namen hinzufügen, die von "\_na" (für "not available") angehängt wird: z. B. `agenda_na.png` Sie können dies in einer Software wie Gimp tun, indem Sie die Option `Image` -> #INLINECODE -> #INLINECODE verwenden und sie dann mit dem Namen \_na exportieren. Wenn Ihr Originalsymbol sehr dunkle Farben verwendet, müssen Sie möglicherweise die Helligkeit der Graustufenversion erhöhen (`Mode` ->'Helligkeit & Kontrast\`-> Helligkeit auf +50% einstellen) 17. Da diese Symbole (nur in der aktiven Farbversion) auf der Seite `Greyscale` verwendet werden, um den Benutzer zu benachrichtigen, wenn sich etwas geändert hat, benötigen Sie sie auch in einer 22x22 Pixel-Version. Kopieren Sie dazu alle Bilder (außer den Versionen von \_na.png) von 64/ auf 22/, bearbeiten Sie sie dann und ändern Sie die Größe auf 22 x 22 18. Verlassen Sie den Stylesheet-Ordner (den Sie in Schritt 6 umbenannt haben) 19. Generieren einer Zip-Datei 20. Gehe zu deinem Chamilo und lade die neue Zip-Datei im `Colors` Tab hoch 21. Wechseln Sie zurück zum Tab `My Courses` und wählen Sie das neue Stylesheet aus (Sie können die Schaltfläche `New stylesheet file` verwenden, damit sich nicht sofort auf alle Ihre Benutzer auswirkt) 22. Möglicherweise müssen Sie STRG+F5 verwenden, um etwas Cache-Speicher in Ihrem Browser zu aktualisieren, aber das sollte nicht der Fall sein Das ist es! ## Verbotene Dateiendungen Aus Sicherheitsgründen erlauben wir nur das Hochladen einer Reihe von Dateierweiterungen: * CSS * Reissverschluss * JPEG * jpg * png * gif * Ico * psd * xcf * Svg * webp * woff * woff2 * MD Diese Liste kann sich ändern. Sie finden es in der Funktion getAllowedFileTypes () um Wenn Sie diese Einschränkungen vermeiden möchten, können Sie den neuen Stil auch direkt über SFTP in `Update` hochladen, aber Sie müssen\* die `Preview` -Option auf der Administrationsseite verwenden (Block `app/Resources/public/css/themes/`), sonst wird das Stylesheet nicht auf den endgültigen öffentlichen Ordner `Cache clean-up` übertragen.