Styles & Templates

From EQdkp Plus
Jump to navigation Jump to search

Begriffsklärung

Template

Ein Template ist eine Datei, die den HTML-Code enthält, welcher dann im Browser dargestellt wird.

Style

Ein Style besteht aus Templates, und individuellen Farbeinstellungen.

Neuen Style erstellen

Siehe dazu das deutsche Tutorial Eigener Style.

Styles Aktivieren

Du hast 20 Styles im EQdkp, möchtest aber nicht, dass deine Benutzer auch alle auswählen können? Kein Problem, deaktiviere den Style einfach. Deaktivieren bedeutet nur, dass Benutzer ihn nicht auswählen können, ansonsten kannst du weiterhin alles mit dem Style machen wie mit aktivieren Styles. Nachdem du einen neuen Style hinzugefügt oder installiert hast, sind Styles standardmäßig deaktiviert.

Templates bearbeiten

Du willst eine Template-Datei eines Styles bearbeiten, ohne extra ein komplettes neues Template anzulegen? Dann hast du dafür zwei Möglichkeiten: den eingebauten Template-Editor und die Template-Dateien direkt bearbeiten.

Template-Editor

Geh dazu in die Style-Verwaltung, klicke auf den gewünschten Style, und wähle den Tab "Templates bearbeiten aus". Wähle nun das gewünschte File, bearbeite es mit dem Editor und klicke auf Speichern. Die gemachte Änderunge bezieht sich nur auf den von dir ausgewählten Style, betrifft also auch nicht andere Styles, die auf den gleichen Templates aufbauen. Die geänderten Template-Dateien werden im Ordner .../data/templates/dein_template gespeichert.

Template-Dateien direkt bearbeiten

Du kannst auch die Template-Dateien mit einem Editor, z.B. Notepad++ oder pspad direkt bearbeiten. Solltest du aber früher die gleiche Datei mit dem eingebauten Template-Editor bearbeitet haben, wird er dann diese Änderungen nicht erkennen. Dann musst du dazu erst die Datei(en) aus dem Ordner ../data/templates/dein_template_code löschen.

Achtung: Änderungen an Templates können dazu führen, dass dein EQdkp nicht mehr läuft. Sollte dies der Fall sein, lösche die geänderten Templates aus dem Ordner .../data/templates/dein_template und lösche den template-Cache, der im Ordner .../data/cache/templates zu finden ist.

Updatesichere Änderungen an CSS und JavaScript

CSS

Es gibt mehrere Möglichkeiten, über CSS den verwendeten Style updatesicher zu bearbeiten.

Globale Einstellungen

In den globalen Einstellungen im Administrationsbereich, Tab "Global" kannst du im Feld Globales CSS deinen eigenen CSS-Code hinterlegen. Der eingefügte Code wird jedem Style automatisch hinzugefügt.

custom.css

Wenn du CSS-Code hinzufügen willst, der auch einen Update-Vorgang übersteht, kannst du eine CSS-Datei mit dem Namen custom.css im jeweiligen Template-Ordner ablegen. Diese Datei wird automatisch eingebunden, und zwar nach allen anderen CSS-Dateien. Auch hier kannst du in der custom.css einfach deinen eigenen CSS-Code hinterlegen.

Template bearbeiten

Wenn du in der Erweiterungsverwaltung (Adminpanel > Erweiterungen verwalten) auf deinen Style klickst, kommst du in den Beartungsbereich. Dort kannst du allerlei Einstellungen vornehmen, Farben anpassen etc. Im Tab "Farbeinstellungen" im Feld Zusätzliche LESS-Definitionen kannst du deinen eigenen CSS-Code hinterlegen. Ansonsten kannst du im Tab "Templates bearbeiten" die custom.css bearbeiten. Alle anderen CSS-Dateien kannst du zwar auch bearbeiten, nur dann ist dies nicht mehr updatesicher, so dass hiervon abgeraten wird.

JS

Um eigenen JavaScript-Code updatesicher in das Template einzubinden, lege im Template-Ordner eine Datei mit dem Namen custom.js ab und füge dort deinen JavaScript-Code ein. Diese Datei wird automatisch eingebunden.

Style exportieren

Die einfachste Möglichkeit, einen Style mit allen gemachten Änderungen zu exportieren, damit ihn z.B. jemand anders benutzen kann, ist die eingebaute Export-Funktion zu benutzen. Geh dazu in die Style-Verwaltung und klicke auf das Download-Icon. Nun wird ein Archiv erstellt, dass einen Ordner mit dem Namen des Style-Codes enthält. Wenn du einen Style hast, der auf einem anderen Template aufbaut (also keine eigenen Template-Dateien hat), findest du einen weiteren Ordner im Archiv, nämlich den kompletten anderen Style. Dies ist ein Service, falls z.B. der Empfänger des Styles diesen noch nicht hat.

Styles importieren

Styles brauchen nur in den template-Ordner deines EQdkps abgelegt werden. Gehe dann in die Style-Verwaltung. Unten auf der Seite werden alle nicht installierten Styles angezeigt. Klicke beim gewünschten Style einfach auf "Installieren". Nachdem dies erledigt ist, musst du noch gegebenenfalls Farbeinstellungen vornehmen. Dies ist insbesondere bei Styles notwendig, die keine Installationsdatei mitbringen (eine Datei namenes index.php). Nachdem der Style aktiviert wurde, können die Benutzer ihn verwenden.

Style löschen

Wenn du einen Style löscht, werden damit auch alle gemachten Änderungen an den Farbeinstellungen als auch an den Template-Dateien (sofern sie über den eingebauten Template-Editor gemacht wurden) gelöscht. Zurück bleiben nur unbearbeitete Template-Dateien, sofern du dafür extra welche im templates-Ordner angelegt hast.

Styles updaten

Wenn ein Update deines Styles vorhanden ist, kopiere die neuen Dateien einfach in den Ordner template/stylename und überschreibe die alten Dateien. Keine Angst, die mit dem Template-Editor gemachten Änderungen gehen nicht verloren.

Du kannst dem Updater sagen, was er bezüglich von dir gemachten Änderungen machen soll:

Farbeinstellungen

  • Überschreiben: überschreibt alle von dir gemachten Farbeinstellungen und ersetzt sie durch die im Installationsscript angegebenen Farben
  • Nicht überschreiben: lässt deine gemachten Farbeinstellungen unangetastet und aktualisiert lediglich die Versionsnummer des Styles

Template-Dateien

Wenn du mit dem Teplate-Editor Dateien bearbeitet hast, bekommst du noch folgende Auswahlmöglichkeiten:

  • Überschreiben: löscht alle von dir geänderten Dateien und benutzt die neuen Dateien. Nachteil: alle deine Änderungen sind weg, Vorteil: du hast die aktuellesten Dateien
  • Nicht überschreiben: behält deine geänderten Dateien. Vorteil: deine Änderungen sind noch da, Nachteil: du hast keine aktuellen Dateien.

Beachte: ein Update kann nicht rückgängig gemacht werden, also vorher ein Backup des Styles anlegen (Exportieren-Funktion benutzen)!

Plugin-Templates

Für Plugins ist ja nur noch ein Template-Ordner notwendig, nämlich der Ordner namens "base_template" (siehe dazu das HelloWorld-Plugin). Was aber nicht heißt, dass du nicht für einen speziellen Style eigene Templates anlegen kannst. Dazu kannst du genauso vorgehen wie bei der Vererbung:

  • Lege im template-Ordner des Plugins einen neuen Ordner an, der so heißt wie der Style-Code des gewünschten Styles
  • Und lege dort die geänderten Template-Dateien ab

Und auch da brauchst du nur die Dateien ablegen, die wirklich geändert worden sind. Der Rest wird vom base_template übernommen.

Ab 2.0 können Plugin-Stylesheets und Plugin-Templates auch im eigenen Style angelegt und geändert werden. Um zum Beispiel eine eigene Version der chat.css (Originaler Ordner core\plugins\chat\templates\base_template\chat.css) mitzuliefern, füge die Datei in den Unterordner "plugins\chat\" deines Styles ein. Das selbe funktioniert auch mit Templates.

LESS

siehe auch Less

eqdkpGameClasses

Mit der Erweiterung in 2.3 können ClassID, ClassName und ClassColor als Parameter für CSS und LESS verwendet werden. Folgende Parameter müssen in Settings oder in der Css gesetzt werden:

@styleCalendarStateColor: true;
@styleCalenderGameStyle: true;

Auch spezifische Spiele können separat angesprochen werden. Ein ausführlich Dokumentiertes Beispiel ist hier zu finden: Asitaras Gist

Ein Allgemeineres ohne Games ist:

#viewraidcal_colapse when(@styleCalendarStateColor){
	@styleState_0: rgb(96, 255, 0);
	@styleState_1: rgb(255, 243, 0);
	@styleState_2: rgb(221, 54, 0);
	@styleState_3: rgb(212, 0, 255);
	.state_theme(@state:0){ @color: 'styleState_@{state}'; color:fade(@@color,60);text-transform:uppercase; font-size:1.2em; box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset,0px 0 0 2px rgba(255,255,255,.1) inset;
	text-shadow: 0px 0px 16px #000;}
	&_0 .state_header { .state_theme(0); }
	&_1 .state_header { .state_theme(1); }
	&_2 .state_header { .state_theme(2); }
	&_3 .state_header { .state_theme(3); }
}
.check_game_support() when(@styleCalenderGameStyle){
	//Member Box
	.change_attendee_box(@i:1) when(@i <= length(@eqdkpGameClasses)){
		@id		: extract(extract(@eqdkpGameClasses, @i), 1);
		@name	: extract(extract(@eqdkpGameClasses, @i), 2);
		@color	: extract(extract(@eqdkpGameClasses, @i), 3);
		.is_color() when(iscolor(@color)){
			
			.class_colorized .attendee_box[data-class-id="@{id}"] {
				border: 1px solid fade(@color, 100);
				box-shadow: 0px 0px 5px 5px fade(@color, 80) inset;
				transition: backround .2s ease-in;
			}
			.class_colorized .attendee_box[data-class-id="@{id}"] .attendee_name img { visibility: hidden; margin-left: -1em;}
		
		}.is_color();
		
		.change_attendee_box(@i + 1);
	}.change_attendee_box();
	

	//Guest Box
	.change_guest_box(@i:1) when(@i <= length(@eqdkpGameClasses)){
		@id		: extract(extract(@eqdkpGameClasses, @i), 1);
		@name	: extract(extract(@eqdkpGameClasses, @i), 2);
		@color	: extract(extract(@eqdkpGameClasses, @i), 3);
		.is_color() when(iscolor(@color)){
			
			.class_colorized .guest_box[data-class-id="@{id}"] {
				border: 1px solid fade(@color, 100);
				box-shadow: 0px 0px 5px 5px fade(@color, 40) inset;
				transition: backround .2s ease-in;
			}
			.class_colorized .guest_box[data-class-id="@{id}"] .guest_name img { visibility: hidden; margin-left: 0.8em;}
			
		}.is_color();
		
		.change_guest_box(@i + 1);
	}.change_guest_box();
	
}
.check_game_support();