Eigene Icons und CSS-Einbindung - kleines Problem

[Walter]

Ich baue in den Header Links zu eigenen Seiten ein, die Icons dazu sind ebenfalls keine Originale, werden von mir aber brav mit CSS eingebunden - dabei stosse ich auf das Problem mit der Zeilenhöhe, die anscheinend an die Schriftgrösse gebunden ist, die Icons werden abgeschnitten:

[ externes Bild ]

Wie/wo kann ich die Höhe der Zeilen an die Höhe der Icons anpassen?

[Walter]

Hab's inzwischen hinbekommen: In der buttons.css für die neuen Icons eine neue Definition reingefizelt (und diese in der colours.css mit den Bildern verknüpft), welche also in der overall_header.html angesprochen wird.

Ich habe noch viel zu wenig Ahnung von CSS und phpBB3 um hier eine perfekte Lösung zu präsentieren, aber ich zeige mal, wie ich vorgegangen bin - vielleicht kommen ja noch bessere Vorschläge.

Beispiel: Ich will für die Forenübersicht und für den neuen Link im Header jeweils ein neues Icon verwenden.

Dazu mache ich Folgendes:

In der buttons.css finde:

Code: Alles auswählen

/* Icon images
---------------------------------------- */

Darunter füge ein:

Code: Alles auswählen

.forenuebersicht, .teamstats{
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-image: none;
	padding: 10px 0 10px 35px;
}

In der colours.css finde:

Code: Alles auswählen

/* Icon images
---------------------------------------- */

Darunter füge ein:

Code: Alles auswählen

.teamstats						{ background-image: url("{T_THEME_PATH}/images/teamstats.gif"); }
.forenuebersicht						{ background-image: url("{T_THEME_PATH}/images/home.gif"); }

In der overall_header.html finde:

Code: Alles auswählen

				<li><a class="icon-home" href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>‹</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

Ersetze icon-home mit deiner neuen Definition forenuebersicht und füge eine Zeile darunter deinen neuen Link ein:

Code: Alles auswählen

				<li><a class="teamstats" href="stats.php">Teamstatistik</a></li>

Ich habe dann noch aus ästhetischen Gründen die Abstände zu den Links nach oben und unten vergrössert:
In der common.css finde:

Code: Alles auswählen

ul.navlinks {

Ersetze dort

Code: Alles auswählen

	padding-bottom: 1px;

mit

Code: Alles auswählen

	padding: 6px 0;

Wiegesagt, ich kenne mich mit CSS noch nicht wirklich gut aus, deswegen bitte ich um Nachsicht, falls es besser/einfacher ginge. Ich wollte aber die Bildchen jedenfalls mit CSS eingebunden haben, nicht wie früher mit html-Verweisen und Formatierungen (was sicher auch geht und einfacher gewesen wäre).
Komplizierter kann man es aber auf jeden Fall noch machen, wenn man auch noch die Sprachvariablen einbauen möchte in den neuen Links.



Hinweis: Ich arbeite mit einem Editor (PS-Pad) und nicht über das ACP, weswegen ich jede CSS-Datei hier extra anführe, was im ACP nicht nötig ist (kann ignoriert werden) - ein von phpBB unabhängige Editor hat den Vorteil, dass Änderungen schnell und einfach wieder zurückgenommen werden können, hat aber den Nachteil des Mehraufwandes (FTP-Verbindung, Dateien einzeln zu editieren,...).


Wie auch immer, jetzt sieht die Sache besser aus, wenn auch noch nicht ganz perfekt:

[ externes Bild ]

[Koopsta]

das muss ich mir merken, war schon gelangweilt von diesen altenbuttons.....

[Walter]

Nachtrag:

Es ist übersichtlicher und auch einfacher zu handhaben, wenn man eine eigene xyz.css im theme-Ordner erstellt, die eigenen CSS-Codes dort reinpackt und dann diese Datei in der stylsheet.css importieren lässt mit

Code: Alles auswählen

@import url("xyz.css");

. Das kann den eifrigen Coder eventuell auch vor ungewollten Fehlern bewahren und ist einfacher zu sichern.

[Walter]

Nachtrag 2:

Ich habe den Code für den eigenen Link in der overall_header.html ausgebessert, sonst führt das z.B. in der Viewtopic zu einem unerwünschten Ergebnis.

Wenn man recht viele Links nebeneinander platzieren möchte, ist es ratsam, eine neue Auflistung der Links darunter anzufangen, denn der Forenübersicht-Link expandiert ja immer weiter in dieser Zeile, wenn man in die Foren/Themen klickt. Also nach dem

Code: Alles auswählen

...{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul> 

eine neue Liste mit

Code: Alles auswählen

<ul class="linklist">
<li>Link</li>
<li>Link</li>
</ul> 

ansetzen.

[MaFa]

Hallo zusammen

ich habe noch zusätzlich folgendes Problem....

[ externes Bild ]

Der text soll aus dem Icon raus nach rechts verschoben werden.
Bislang hab ich das aber leider selbst nicht hinbekommen...

Kann mir da bitte einer von euch dabei helfen?
Besten Dank und Grüße
Martin

[Walter]

In der buttons.css suche:

Code: Alles auswählen

/* Icon images
---------------------------------------- */
.sitehome, .icon-faq, .icon-members, .icon-home, .icon-ucp, .icon-register, .icon-logout,
.icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search{
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-image: none;
	padding: 1px 0 0 17px;

Vergrössere den letzten Wert (17px) bei

Code: Alles auswählen

padding: 1px 0 0 17px;

auf etwas mehr als die Breite deiner Icons.

[MaFa]

Hallo Walter,


also das habe ich zwischenzeitlich auch gefunden(FF mit Firebug plugin),
aber leider werden meine Änderungen an der Buttons.css nicht verarbeitet.
Caches habe ich soweit wie meines Wisses nach gelöscht, aber auch ohne
Erfolg.


Vielen Dank und beste Grüße
Martin

[Walter]

Hast du den Cache auch abgeschaltet? (ACP-> Linkes Menü ganz unten: Serverlast -> Rekompilieren veralteter Style-Komponenten: Ja)

Eventuell musst du auch noch den Cache deines Browsers leeren.

Diese Cache-Sache sollte man irgendwann sticky machen imho.

[MaFa]

Hallo Walter,

erst mal vielen Dank für deine Mühe.

Ich habe eben nochmals alle kontrolliert und muss aber leider
feststellen das er immer noch die Position behält.
Wenn ich mit Firebug die Änderung vornehme klappt das klasse.
Die Stelle ist also die richtige nur bekomme ich den Cache nicht gelöscht.

Beste Grüße
Martin