Bis zum nächsten Treffen sind es noch genau:


Dies ist lediglich unser Testboard - Unser Forum findest du hier: "Zum Forum"

Tutorial (ohne HTML im Beitrag)


GAIA Template - Globale Variable definieren (Farbauswahl unterer Bereich; ein-und ausschalten)

in Tutorial (ohne HTML im Beitrag) 31.01.2010 18:54
von achimth • Administrator | 113 Beiträge

1. wichtige Anmerkungen:
Diese Veränderungen sollten nur von Benutzern vorgenommen werden, die sich schon gut in der Forensoftware zurechtfinden.
Für den Einbau der Funktion sind Templateveränderungen nötig. Dieses kann insbesondere mit anderen schon vorgenommenen Veränderungen zu Fehlfunktionen führen.
Es wird dringend empfohlen, vor Beginn des Einbaus eine Sicherungskopie des Templates "Untere Leiste" und "CSS-Vorlage" anzulegen. Dies kann nach Aufruf des Templates unter Admin -> Template Entwicklung durch Kopieren des gesamten Inhalts in eine TXT-Datei, z. Bsp. den Editor geschehen.
Es wird seitens des Autors keine Garantie für die Funktionstüchtigkeit übernommen. Das Risiko einer Fehlfunktion trägt allein der Benutzer.

2. Aufgabenstellung
Die Schriftfarben im unteren Bereich des GAIA Templates (ab Aktive User) sollen veränderbar sein.
Lösungsansatz; mit "globalen Variablen" eine Abfrage in das Template einbauen, die sich später in Admin ->Layout
mit ja und nein schalten lässt und die Schriftfarbwahl für die Elmente zulässt.

3. Anlegen der "globalen Variablen"
Im Adminmenü -> Template Entwicklung das verwendete Template mit "edit" aufrufen.
Im 2. Fenster auf dieser Seite den Link "Globale Variabeln definieren" aufrufen.
Es öffnet sich die Seite auf der man globale Variablen anlegen kann, hier einmal ganz nach unten scrollen, denn wir legen ein "Neue Kategorie" an, um unsere eigenen Variablen dort unterzubringen.
In das Feld einen neuen Namen Eintragen, ich habe es "Eigene Variablen" genannt.
Danach "erstellen" und wir sind zurück auf der Hauptseite.
Wieder nach unten scrollen und "Neue globale Variable" wählen.
Im Feld "Bereich" die Option "Eigenen Variablen" auswählen
Im Feld "Variable (im Template)" tragen wir font_bottom ein,
Im Feld "Name" kannst du die Bezeichnung eintragen, die dir später angezeigt wird "Farben im unteren Bereich ändern ja/nein"
Im Feld "Beschreibung" könntest du dir noch etwas eintragen, was die Funktion erklärt, Ich lasse es leer.
Im Feld "Typ" die Option "Boolean (true,false)" auswählen.
Im Feld "Vorgabe-Wert (Default)" die Option "true" auswählen.
Jetzt noch speichern und die Neue Variable sollte in der Liste unter der Kategorie "Eigene Variablen" erscheinen.


4. Das wiederholen wir jetzt zum Anlegen der Variablen für die einzelnen Farben. (Rot -> der Teil, der bei der Variablen eingetragen wird, Grün -> der Name

{{global_text_color_bottom}} allgemeine Textfarbe unterer Bereich (Aktive User...)
{{global_link_color_bottom}} Farbe der Links im Unteren Feld (Aktive + Mitglieder etc.)
{{global_link_vis_color_bottom}} Farbe des besuchten Links (unteres feld (Mitglieder etc.)
{{global_link_hover_color_bottom}} Schriftfarbe der Links beim überfahren mit der Maus (unten - Mitglieder etc.)
{{global_statbottom_color}} Schriftfarbe der Statistik im unteren Feld


Der Unterschied liegt im Punkt 3 (siehe oben) hier:

Im Feld "Typ" die Option "Farbwert" auswählen.
Im Feld "Vorgabe-Wert (Default)" die Auswahl leer lassen, oder eine Farben vorwählen Die Farben können später auch im Layout geändert werden..

jeweils abspeichern und Admin Layoutmenü sollte es jetzt eine Rubrik "Eigene Varaiblen" geben.

5. Einsetzen der neuen Variablen über das Template- Element "CSS-Vorlage"

Menü: Admin -> Templateentwicklung
Dort das Template über edit aufrufen
Das Template Element "CSS - Vorlage" auswählen

An das Ende des Templates fügen wir die neuen Styles für den unteren Bereich hinzu. Ich habe diese mal "abottom" genannt. Auch die Varianten für den Link, für mouseover etc. werden hier hinzugefügt. Hier finden sich auch die soeben erstellten Variablen wieder.

Der komplette Code sieht so aus (die erste Zeile ist ein Kommentar):

/*Schriftfarben Statistik Links Untere Leiste */
.statbottom {color: {{global_statbottom_color}}; font-weight: normal;}
.abottom {color: {{global_text_color_bottom}} }
.abottom a:link { color: {{global_link_color_bottom}} }
.abottom a:visited { color: {{global_link_vis_color_bottom}} }
.abottom a:hover { color: {{global_link_hover_color_bottom}} }


Danach speichern und fertig.

nun werden die Einstellungen aus dem "Layout" schon in die CSS übertragen.

6. Änderung des Template Elements "Untere Leiste" um die Farbänderung einzuschalten und die Veränderungen anzuzeigen.

In der Template Entwicklung rufen wir das Template Element "untere Leiste" auf. Dort finden wir am Anfang den folgenden Teil:

<br/>
</div>

{{global_under_image==true.start}}
<div style="background-image: url({{global_under_image}}); background-position: bottom; background-repeat: no-repeat;">
<br/><br/><br/>

{{global_under_image==true.else}}
<div class="c_r_cont3"><div class="c_r_top3"><div></div></div><div class="c_r_content3">
{{global_under_image==true.end}}



<div>
<center>


Danach fügen wir nun Folgendes ein:

{{global_font_bottom==false.start}}


zur Erklärung: hiermit wird die normale Farbgebung beibehalten, falls wir keine Änderung wollen.

nun suchen wir weiter bis zu diesem Teil im Template:

{{impressum==true.start}}
| <a href="{{link_faq}}" style="text-decoration: none;">{[footer_goto_impressum_style2]}</a>
{{impressum==true.end}}


Direkt dahinter fügen wir den folgenden Teil ein (das ist der Teil, der unsere Farbänderung bewirkt) :

{{global_font_bottom==false.else}}


<span class="abottom">
{{useronline==true.start}}<small><span class="abottom"><b>{[index_user_online]}</b></span></small>

{{useronline.startlist}}
{{useronline:invisible==false.start}} • <a href="{{useronline:link}}" style="text-decoration: none;"><small>{{useronline:name}}</small></a>{{useronline:invisible==false.end}}
{{useronline.end}}



{{useronline==true.end}}


<small class="abottom"><b>{[index_user_lastreg]}</b> <a href="{{newest_member_link}}" style="text-decoration: none;">{{newest_member}}</a></small><br/><br/>

{{global_show_currentonline==true.start}}

{{currentonline.startint}} ({{member_online}}+{{guests_online}}) {{currentonline.end}}

</span>
<small class="statbottom">{[index_memberNow]} <b>{{currentonline}} {[index_memberUser]}</b> {[index_memberOnline]}({{member_online==true.start}}<b>{{member_online}} {{member_online==1.start}}{[index_memberSl]}{{member_online==1.end}} {{member_online!==1.start}}{[index_memberPl]}{{member_online!==1.end}}</b>{{member_online==true.else}} 0 {[index_memberPl]}{{member_online==true.end}} | {{guests_online==true.start}}<b>{{guests_online}} {{guests_online==1.start}}{[index_guestSl]}{{guests_online==1.end}} {{guests_online!==1.start}}{[index_guestPl]}{{guests_online!==1.end}}</b>{{guests_online==true.else}} 0 {[index_guestPl]}{{guests_online==true.end}}).<br/></small> {{global_show_currentonline==true.end}}

{{topics_count==true.start}}<span class="statbottom">{{posts_count==true.start}}<small>{[forum_stat_has]} <b>{{topics_count}}</b> {{topics_count==1.start}} {[forum_topics_sl]} {{topics_count==1.end}} {{topics_count!==1.start}}{[forum_topics_pl]}{{topics_count!==1.end}} {[forum_and]} <b>{{posts_count}}</b> {{posts_count==1.start}} {[forum_thread_sl]}{{posts_count==1.end}} {{posts_count!==1.start}}{[forum_thread_pl]}{{posts_count!==1.end}}.</small>{{posts_count==true.end}}<br/></span>{{topics_count==true.end}}

{{global_on_useronline_max==true.start}}<small class="statbottom">
{{now1@dateformat.start}}{[time_other]}{{now1@dateformat.end}}
{{now@dateformat.start}}{[time_other]}{{now@dateformat.end}}
{{today@dateformat.start}}{[time_other]}{{today@dateformat.end}}
{{yesterday@dateformat.start}}{[time_other]}{{yesterday@dateformat.end}}
{{norm@dateformat.start}}{[time_other]}{{norm@dateformat.end}}
{[index_user_online_max]}</small>
{{global_on_useronline_max==true.end}}

<center><hr width="50%"/></center>
<span class="abottom">
{{global_on_userlist_link==true.start}} <span class="abottom"><a href="{{link_member}}" style="text-decoration: none !important;">{[header_goto_members]}</a> |</span> {{global_on_userlist_link==true.end}}
{{global_on_useronline_link==true.start}}<span class="abottom"> <a href="{{link_online}}" style="text-decoration: none !important;">{[header_who_is]} {[header_goto_online]}</a> |</span> {{global_on_useronline_link==true.end}}

<a href="{{link_faq}}#faq" style="text-decoration: none;">{[header_goto_faq]}</a>
{{impressum==true.start}}
| <a href="{{link_faq}}" style="text-decoration: none;">{[footer_goto_impressum_style2]}</a>
{{impressum==true.end}}
</span>

{{global_font_bottom==false.end}}


Dahinter steht dann wieder der Rest des Original-Templates:

</div>

{{global_under_image==true.start}}

<br/><br/></div>


usw.

Das Ganze speichern wir nun ab.

Danach sollten sich nach Einschalten der Funktion unter
Admin -> Layout -> Eigene Variablen
die gewählten Farben zeigen.

7. Ausprobieren und Spaß haben



Achim

Das Copyright des Beitrags und der enthaltenen Bilder liegt beim Autor und darf ohne dessen Zustimmung nicht kopiert oder ohne seine Zustimmung verwendet werden.
Kontakt siehe Impressum


-------------------------------------------------------------------

Bis zum nächsten Treffen sind es noch genau:





Infos zum Projekt 2009

Testboard


*this message is printed on 100% recycled electrons*

-------------------------------------------------------------------

zuletzt bearbeitet 31.01.2010 20:20 | nach oben scrollen






Neuestes Mitglied:

Im Moment sind 1 User online ( 0 Mitglieder | 1 Gast).
Das Forum hat 73 Themen und 141 Beiträge.
Der Rekord liegt bei 26 Benutzern am 01.11.2012 12:08 Uhr.
Mitglieder | Wer ist Online? | FAQ | Impressum


Xobor Einfach ein eigenes Forum erstellen | ©Xobor.de
Datenschutz