Wenn Sie jemals mehr Stylesheets in die Liste aufnehmen möchten, ist dies der vollständige Ablauf:

• ein Skript startet (z.B. /user_portal.php)

• es enthält global.inc.php

• global.inc.php nennt die Methode Display::display_header() (in main/inc/lib/display.lib.php)

• display_header ruft das Template auf። set_css_files() methos

• setcss_files () bereitet ein Array mit dem CSS zum Laden vor und bereitet es als_css_file_to_string

• Das anfängliche Skript lädt eine Vorlage (.tpl) von main/template/default/

• Die Vorlage enthält die Vorlage main/template/default/layout/main_header.tpl

• Der Hauptladen_header.tpl head.tpl (im selben Ordner)

• head.tpl lädt das Array css_file_to_string um das CSS im

Wenn Sie ein neues Stylesheet global konfigurieren oder die Reihenfolge ändern möchten, in der es geladen wird, und wenn Sie den vorherigen Flow verfolgt haben, wissen Sie jetzt, dass der beste Ort dafür die Methode Template::setCssFiles() ist.

Dies ist die bisher beste Methode in Chamilo 1.10, aber in 2.0 mit der vollen Fähigkeit, Vorlagen zu entfesseln, sollten Sie in der Lage sein, das neue CSS direkt zu Ihrer Vorlage hinzuzufügen.

Wie unter dem Abschnitt „Seite' Illegale HTML“ -Tag entfernt: einer beliebigen Chamilo-Seite verstanden werden kann, werden CSS-Dateien wie folgt geladen (wir haben den Domainnamen absichtlich durch den Marker „ [.] ** zur besseren Lesbarkeit ersetzt und den standardmäßigen aktiven Stil von main/css/chamilo/ verwendet):

Oder, kurz gesagt, wir laden sie in dieser Reihenfolge:

1. web/assets/bootstrap/dist/css/bootstrap.min.css

2. web/assets/bootstrap-daterangepicker/daterangepicker-bs3.css

3. web/assets/fontawesome/css/font-awesome.min.css

4. jquery-Zeug

5. (CSS mit minderwertiger Bedeutung hier)

6. web/css/base.css (der Kern des Chamilo Stils oben auf Bootstrap)

7. web/css/themes/chamilo/default.css (Anpassung des CSS-Themas, veränderbar in Chamilo)

8. web/css/themes/chamilo/print.css (eine spezielle Version des Stils, wenn Sie ihn drucken)

Wir werden uns hier nicht mit den weniger wichtigen CSS-Dateien befassen, aber Sie sollten beachten, dass sie im Allgemeinen funktionsspezifisch sind, wie gewählt (eine JS-, durchsuchbare Dropdown-Menüleiste).

Wie CSS diktiert, wird zuerst ein CSS geladen, das zuerst in der Liste erscheint, dann werden die folgenden bei Bedarf die vorherigen Einstellungen « overwrite » geben.

Frühere Versionen

Sie sollten auch wissen, dass wir in einigen Fällen in früheren Versionen von Chamilo die @import url() -Funktion von CSS verwendet haben, um mehr « default » CSS zu laden. Zum Beispiel hätten Sie für alle Stile vom Typ Chamilo am Anfang einen Block wie diesen gefunden:

/* Adding default style for the chamilo_X themes */

@import url('../base_chamilo.css');

Dies wurde seit 1.10.0 aus den Stilen entfernt, daher sollten Sie (noch nicht mehr) finden.

Mit all diesen Informationen sind wir bereit, den nächsten Abschnitt anzugehen: den Zweck jeder Datei zu analysieren.

Ähnlich wie die im vorherigen Abschnitt beschriebene Standardersetzung für Symbole kann das Standardbild für den Kurs, das im Katalog oder in der Ansicht des Kursrasters angezeigt wird, ersetzt werden.

Um dies zu tun, müssen Sie die Abmessungen main/img/session_default.png (400x224 in v1.11.10) und main/img/session_default_small.png (85x48 in v1.11.10) als Ausgangspunkt für Bilder verwenden und ein neues Bild entwickeln, das in diese passt.

Anstatt die Bilder dann direkt in main/img/ zu ersetzen (wodurch die Anpassung bei jedem hinteren Chamilo-Upgrade entfernt wurde), können Sie diese beiden neuen Bilder einfach in den Stammordner Ihres benutzerdefinierten CSS legen.

Wenn Sie beispielsweise (wie in den vorherigen Abschnitten vorgeschlagen) Ihr CSS in einem Ordner namens "myCustomCSS/" platziert haben, werden die beiden Bilder jeweils in "myCustomCSS/session_default.png" und "myCustomCSS/session_default_small.png" abgelegt.

Die bootstrap.min.css Datei

Bootstrap ist das berüchtigte offene CSS-Stylesheet von Twitter. Es ist ein Behälter für die Best Practices für das Styling und verleiht Ihrer Website ein schönes Aussehen, wenn Sie sie nur einbeziehen.

Die bootstrap.min.css Datei ist eine minimierte (komprimierte) Version der Bibliothek.

Sie dürfen die Datei bootstrap.css NICHT ändern, da dies das Original ist, wie es von Twitter bereitgestellt wird, und da wir sie möglicherweise in Zukunft mit neueren Versionen von Twitter aktualisieren.

Die base.css Datei

Die Datei base.css definiert eine Reihe von CSS-Elementen, die die eigentliche Grundlage für den Rest sind (obwohl sie selbst auf Bootstrap 3 basiert). Alles, was einem Portal bietet, dass « Chamilo touch » hier konzentriert ist, daher ist es eine gute Idee, diese Datei (import) aus einem spezifischeren CSS zu beziehen.

Sie sollten diese Datei nicht ändern, da dies das Erscheinungsbild anderer in Chamilo verwendeter Stile verändern könnte.

Die Datei [theme] /default.css

Diese Datei ist spezifisch für Ihr CSS-Thema und definiert Elemente, die sehr spezifisch für das allgemeine Erscheinungsbild Ihres Portals sind.

Dies ist die Datei, die Sie aktualisieren müssen, um den Stil Ihrer Chamilo-Installation zu ändern.

Es enthält die Stile für die Kopfzeilenlogos, die Navigationsleiste, die Fußzeile usw. über das, was in base.css definiert wurde.

Die print.css Datei

Der Stil print.css wird in Chamilo selten verwendet. Es sollte** viel mehr benutzt werden, aber wir müssen zuerst noch ein paar andere Dinge nachholen.

Normalerweise enthält die Datei print.css alle Einzelheiten, um eine Webseite druckbar zu machen (wie... auf einem Drucker oder in einem PDF). Auf dieser Seite würden wir gerne Beiträge bekommen.

Andere Stylesheets in Ihrem Style-Ordner

Einige andere Dateien befinden sich im app/Resources/public/css/themes/[your-style]/ -Ordner, z. B. scorm.css, frames.css, dataTable.css und ähnliches. Diese werden nur für bestimmte Teile der Anwendung verwendet und tragen einen Namen, der für die von ihnen abgedeckelte Funktion relativ repräsentativ ist.

Feature-spezifische Stylesheets

Schließlich gibt es eine Reihe anderer Dateien, die außerhalb des app/Resources/public/css/ -Ordners verfügbar sind. Diese sind funktionsspezifisch und werden im Allgemeinen mit einer neuen kostenlosen Softwarebibliothek oder Funktion zusammengestellt, die wir in Chamilo aufgenommen haben.

Dies ist zum Beispiel bei markdown.css der Fall.

Diese Dateiensollte nicht aktualisiert werden, da wir sie in zukünftigen Versionen von Chamilo wahrscheinlich mit neueren Versionen überschreiben werden. Auf Systemebene muss jedoch noch etwas unternommen werden, damit ein benutzerdefinierter Stil danach geladen werden kann.

Cascading Stylesheets sind ein beeindruckendes Werkzeug für « brand » jedes Webportal. Seit Chamilo LMS 1.10.0 haben wir im Vergleich zu früheren Versionen erhebliche Fortschritte in Bezug auf die Wiederverwendung von CSS erzielt.

Insbesondere verwenden wir das Bootstrap-Framework (Version 3 in Chamilo < 2.0, dann Bootstrap Version 4), das als « mobile first » -Framework angepriesen wird. Das heißt, wenn Sie es schön erweitern (was insgesamt etwa 300 Stunden Arbeit gekostet hat, um auf zu migrieren), sollte Ihre Webanwendung sehr gut auf alle Arten von Gerätedimensionen reagieren.

Chamilo verwendet das « cascading » -Konzept ausgiebig. Für jedes verwendete Thema verwenden wir eine gemeinsame Basis und definieren bestimmte Elemente lokal neu.

Seit Version 1.9 enthält Chamilo eine wenig bekannte Funktion, mit der benutzerdefinierte Symbole, die in Ihrem CSS-Thema platziert sind, die vordefinierten Symbole von Chamilo ersetzen können.

Dies funktioniert jedoch nur für Icons, die normalerweise aus dem main/img/icons/ -Verzeichnis geladen werden. Nicht die, die an der Wurzel von main/img/. stehen

Um Icons zu ersetzen, müssen Sie in Ihrem eigenen CSS-Theme-Ordner (zum Beispiel app/Resources/public/css/themes/chamili/) einen Unterordner namens “icons/” erstellen, in dem die Struktur des normalen main/img/icons/ Ordners wiedergegeben wird.

Wenn Sie beispielsweise das Symbol edit_profile.png im linken Menü ersetzen möchten, das sich normalerweise in

• main/img/icons/22/edit_profile.png

du müsst schaffen

• app/Resources/public/css/themes/chamili/icons/22/edit_profile.png

Dies ist ein kurzes Beispiel dafür, welche Art von Stiländerung Sie einfach durch Erstellen eines neuen Ordners in Ihrem CSS generieren könnten.

Denken Sie daran, dass die neuen Symbole die gleiche Größe haben sollten wie die vorherigen. Dies wurde im obigen Beispiel nicht durchgeführt, weshalb die Inbox- und Compose-Icons auf der rechten Seite etwas getrimmt sind. Alternativ können Sie das Stylesheet auch aktualisieren, um sicherzustellen, dass das Trimmen nicht stattfindet, dies wird jedoch wahrscheinlich viel Zeit in Anspruch nehmen.

Denken Sie daran, dass Sie bei “flush” entweder einen neuen CSS-Ordner im ZIP-Format über das Admin-Panel hochladen oder direkt auf den Server hochladen müssen (in app/Resources/public/css/themes/[style]/). Wenn Sie jedoch Letzteres tun, müssen Sie die "Cache cleanup" -Option auf der Admin-Seite verwenden, andernfalls bleibt Ihr Stil in app/ und wird nicht nach web/css/ in “published” gesetzt, wie es benötigt wird.

Die tatsächliche Verwendung dieser Funktion besteht darin, zu vermeiden, dass Sie den main/img/ -Ordner in irgendeiner Weise ändern müssen, wenn Sie bedenken, dass dies mit jeder neuen Version der Software überschrieben wird.

Die Verwendung eines eigenen CSS-Ordners gewährleistet die Unabhängigkeit des wichtigsten Chamilo-Codes.

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 https://github.com/chamilo/chamilo-lms/blob/1.11.x/main/admin/settings.lib.php#L2072

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.