Internet Forum / Hilfen für Einsteiger in HPM Foren

Änderung/Positionierung von Icons

#1 von BOo°m , 08.07.2009 22:25

Standard-Icons die Informationen über den Status des dazugehörigen Teils des Forums geben - die Information ist Benutzergruppenabhängig.

Forenübersicht:
Gelesen: ...........forum_read.gif

Ungelesen: ..........forum_unread.gif



Forenansicht (Themen):
Sticky-gelesen: .............sticky_read.gif

Sticky-ungelesen: ............sticky_unread.gif

Sticky-Gelesen-Verschlossen: .............sticky_read_locked.gif

Sticky-Ungelesen-Verschlossen: ............sticky_unread_locked.gif

Ungelesen: ............topic_unread.gif

Ungelesen-Hot: ............topic_unread_hot.gif

Gelesen: ............topic_read.gif

Gelesen-Hot: ............topic_read_hot.gif

Gelesen-Verschlossen: ............topic_read_locked.gif

Ungelesen-Verschlossen: ............topic_unread_locked.gif



Unterforen (dritte Ebene):
Gelesen: ............forum_read_subforum.gif

Ungelesen: .............forum_unread_subforum.gif



Wenn ich richtig gezählt habe gibt es 14 solcher Statusicons die anzupassen wären wenn man diese mit eigenen Grafiken ersetzen möchte.

Es gibt im Adminbereich bei den Grafiken eine Einstellungsmöglichkeit den kompletten Ordner zu ändern in dem solche Grafiken dann gespeichert sind. Man hätte somit die Möglichkeit sich selber einen Ordner auf einem Webserver zu definieren und dort jeweils passende Grafiken mit gleicher Namensgebung zu hinterlegen. Ein großer Vorteil es so zu machen wäre die Unabhängigkeit direkt ins Template oder die CSS eingreifen zu müssen, der Nachteil - man muss einen eigenen Webserver haben.


Soweit ich es bisher erkennen konnte werden diese Icons direkt im Template definiert, bei selbst kreierten sollte die Größe im Auge behalten werden.

Die Positionierung der Icons erfolgt über CSS - eine sichere Möglichkeit diese zu bearbeiten wird hier vorgestellt: Gezielte und sichere Farbanpassungen mit eigener CSS

/* Forum list column styles */

dl.icon {
min-height: 35px;
background-position: 10px 50%; /* Position of folder icon */
background-repeat: no-repeat;
}


Speziell background-position ist für die Positionierung interessant: 10px - ist der Abstand vom linken Rand in der Zelle gemessen in Pixeln. 50% - sorgt in für die vertikale Zentrierung; beim spielen mit den Werten wird schnell klar welcher Wert optimal ist.


 
BOo°m
Administrator
Beiträge: 1.991
Registriert am: 27.11.2005

zuletzt bearbeitet 25.02.2010 | Top

RE: Änderung/Positionierung von Icons

#2 von BOo°m , 09.07.2009 14:42

Einige grundsätzliche Grafikelemente sind bereits sehr leicht über ein passendes Menü im Adminbereich austauschbar.

Die kleinen Symbole oben in der Navigation ändert man in Admin - Layout - Farben & Einstellungen - Navigation, wie von anderen Bereichen gewohnt muss lediglich ein Grafiklink im jeweils passenden Eingabefeld angepasst werden. (leider ist bisher nur ausschliesslich das "Admin-Icon" leicht austauschbar welches für normale User gar nicht sichtbar ist.... Stand: 25.02.2010 - 10:54)

Andere elementare Grafiken wie beispielsweise die Buttongrafiken für die Anzeige im Flat oder Threaded Modus lassen sich in Admin - Layout - Farben & Einstellungen - Grafiken anpassen.



Nach wie vor sind die im ersten Beitrag angesprochenen Statusicons nicht einfach aus dem Adminbereich, durch Angabe eines eigenen Links, zu ändern. Man muss das derzeit noch direkt im Template oder in der CSS ändern.
Die Statusicons für die Forenübersicht findet man an dieser Stelle im Template:

1
2
3
			<li class="row">
<dl class="icon" style="background-image: url({{img_server_2}}forum_{{forum:new_messages==true.start}}un{{forum:new_messages==true.end}}read.gif); background-repeat: no-repeat;">



Man erkennt dass mit Variablen und der Namensgebung der Zieldateien ein kleines Puzzle veranstaltet wird, übernimmt man das muss man beide Grafiken in einem Ordner irgendwo ablegen und die Variable {{img_server_2}} übernimmt die weiter oben erwähnte Einstellung für den Grafikordner aus dem Adminbereich.
Da ich meine Grafiken entweder mit dem HPM-eigenen Bilderhochladendienst ins Web bringe oder wie es jetzt neuerdings möglich ist mit der Foreneigenen Bildergalerie ist es nicht so leicht bis hin zu unmöglich einen Ordner anzugeben, es muss also ein Direktlink her.
Meine Lösung - angepasste Zeilen die oben erwähnt wurden:

1
2
3
			<li class="row">
<dl class="icon" style="background-image: url({{forum:new_messages==true.start}}http://files.homepagemodules.de/b63724/pictures_u7.gif{{forum:new_messages==true.end}}{{forum:new_messages==false.start}}http://files.homepagemodules.de/b63724/pictures_u6.gif{{forum:new_messages==false.end}}); background-repeat: no-repeat;">


Ein wenig länger als der Originalcode weil ich mit True und False gelöst habe. Man könnte das ein bisschen kürzen indem man dann mit else arbeitet.

Vielleicht bringt ein weiteres Update ja noch auch diese Grafiken leicht erreichbar ins Adminmenü aber bis dahin geht es nur so.
Weitere Fundorte für Grafiken direkt im Template oder der CSS folgen......


 
BOo°m
Administrator
Beiträge: 1.991
Registriert am: 27.11.2005

zuletzt bearbeitet 25.02.2010 | Top

   

Smiliebar - Symbolbar
Forenvariabeln im PhpBB





Powered by Forum Hosting  
Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen