Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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.
Ä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.
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:
web/assets/bootstrap/dist/css/bootstrap.min.css
web/assets/bootstrap-daterangepicker/daterangepicker-bs3.css
web/assets/fontawesome/css/font-awesome.min.css
jquery-Zeug
(CSS mit minderwertiger Bedeutung hier)
web/css/base.css (der Kern des Chamilo Stils oben auf Bootstrap)
web/css/themes/chamilo/default.css (Anpassung des CSS-Themas, veränderbar in Chamilo)
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.
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:
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.
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 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.
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.
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.
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.
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.
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:
Verbinde dich mit Chamilo
Gehe zu Administration -> Plattform -> Konfigurationseinstellungen -> Stylesheets
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)
Klicken Sie auf Download
Entpacken Sie die Datei auf Ihrem Computer
Benennen Sie den Ordner um, da Sie ihn nicht erneut unter dem gleichen Namen hochladen können
Geben Sie den Ordner ein und bearbeiten Sie default.css
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
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)
Zurück zu default.css, suche nach den Farbcodes (suche nach Kleinbuchstaben und Großbuchstaben) und ersetze sie überall durch die neuen Farben
Speichern Sie default.css
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
Erstellen Sie im Ordner icons/
eine Datei namens session_default.png
mit genau 400x224 Pixeln, um das Standardbild der Kurse zu ersetzen
Erstellen Sie im Ordner icons/
die Verzeichnisse 22
und 64
, um sich auf die Symbole für benutzerdefinierte Kurswerkzeuge vorzubereiten
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
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)
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
Verlassen Sie den Stylesheet-Ordner (den Sie in Schritt 6 umbenannt haben)
Generieren einer Zip-Datei
Gehe zu deinem Chamilo und lade die neue Zip-Datei im Colors
Tab hoch
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)
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!
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.
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.