Menü Icons ändern

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
Benutzeravatar
Velcra
Mitglied
Beiträge: 95
Registriert: 08.04.2012 22:09
Wohnort: Wehr, BaWü
Kontaktdaten:

Menü Icons ändern

Beitrag von Velcra »

Heyho

Ich würd gerne die Menü Icons im linken Menü ändern. Hab schonma rumgeschaut und dann bin ich eben bis zu einer css gekommen, wo es bloß irgendwie definiert wird. Ich versteh einfach nich, wie das bei phpbb funktionieren kann, dass da quasi ein Sammelbild is, wo alle "Icons" drauf sind und man sich deren einfach bedient bzw die da rauspicken kann oO Dementsprechend is das einzige Pic was ich mit diesen Symbolen find ein solches mit allen drauf.
Wie könnt ich jetze ein eigenes Bild als Icon benutzen, bzw wie muss ich das angeben?

Es geht um den Art Helion Style
http://www.phpbb.com/customise/db/style ... lion/demo/

Lieben Dank
hackepeter13
Valued Contributor
Beiträge: 3566
Registriert: 21.04.2004 12:22
Wohnort: Berlin
Kontaktdaten:

Re: Menü Icons ändern

Beitrag von hackepeter13 »

Ein Blick in die colors.css weißt bspw. folgendes auf:

Code: Alles auswählen

.phpbb .menu li.menu-item, .phpbb .menu li.menu-section {
	background-image: url("{T_THEME_PATH}/images/menu_left.png");
Diese Grafik hat mehrere Icons und die einzelnen Icons aus der Gesamt-Grafik werden durch die comon.css dann entsprechend positioniert, was dann bspw. für das PM-Icon folgendes ist:

Code: Alles auswählen

.phpbb .menu li.menu-pm {
	background-position: 0 -120px;
	padding-left: 28px;
	width: 172px;
}
Es ist also die Grafik: art_helion/theme/images/menu_left.png

Und wenn ich das jetzt richtig sehe, sind die png Grafiken mit transparenten Hintergrund (genauergesagt das eigentliche Symbol auf dem Icon ist transparent) und durch den hover (ale wenn man mit der Maus üder den Link fährt) würd der Hintergrund auf dem die Grafik liegt farbig, sodas am Ende die Hintergrundfarbe durch den transparenten Bereich der Grafik zu sehen ist.

Das erwegt zwar den Eindruck das eine Farbige Grafik geladen wird, tut es aber nicht - das ist alles ein feines css-Spielchen um es mal so zu sagen (und spart ladezeiten, da nur ein color-Wert geladen wird statt eine neue Grafik, bzw. ein anderer Grafikteil).

Wie du siehst ist das bei diesem Style etwas komplex gestalltet, da muss man sich erst einmal einen Überblick verschaffen.
Benutzeravatar
Velcra
Mitglied
Beiträge: 95
Registriert: 08.04.2012 22:09
Wohnort: Wehr, BaWü
Kontaktdaten:

Re: Menü Icons ändern

Beitrag von Velcra »

Ahhhh okay, so in etwa hab ich es mir vorgestellt, habs aber dennoch nich begriffen. Das hieße, ich nehme das eigentliche Bild und hänge einfach ein weiteres dran, oder die andren zu "bewegen". Und dann eben genauso wie die andren Bilder angewählt werden, mach ich das dann auch mit meinem Pic. Könnt das klappen? Blöd isses natürlich wenn das sagen wir von der Mitte des Bildes abgemessen wird, dann passt ja nix mehr weil ich Gesamtgröße ja veränder :/

Soweit schonma besten Dank
hackepeter13
Valued Contributor
Beiträge: 3566
Registriert: 21.04.2004 12:22
Wohnort: Berlin
Kontaktdaten:

Re: Menü Icons ändern

Beitrag von hackepeter13 »

Du kannst die vorhandene Grafikdatei "menu_left.png" bearbeiten und dort einfach die entsprechenden Icons mit den neuen ersetzen und je nachdem wie du sie machst eben wieder mit einem transparenten Farbwert abspeichern.

Wenn du nun aber die vorhandene Grafik ergänzen willst, sprich weitere Icons an diese einfügst (die Grafik damit erweiterst/verlängerst) musst du um in der css-Datei die background-position: Werte ändern/anpassen.

Bspw. background-position: 0 -120px; der erste Wert ist für die horizontale Position und der zweite Wert für die vertikale - heißt er läd die "menu_left.png" und zeigt den Teil der Grafik an, der erst 120px tiefer vom oberen Rand beginnt.

Und wie gesagt, die Farbe im Icon beim Maus-Hover kommt durch die Hintergrundfarbe die wiederrum glaube in der der colors.css definiert ist und schimmert dann durch die transparenten Stellen der png Grafik vor.
Wenn ich das richtig sehe, müsste das der Teil für die Hintergrund farbe sein:

Code: Alles auswählen

.phpbb .menu li.menu-item:hover {
	background-color: #2372bb;
}
(Hab mir die Style-Dateien nur so ohne Installation angeschaut.)

Wenn du jetzt bspw. das ganze durch eine Grafik ersetzen willst, wo einmal der normale Icon und ein Hover-Icon geladen werden soll, musst du ziemlich viel an den css-Dateien/Angaben ändern/anpassen.
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“