Seite 1 von 1

neuer Link - neues Icon

Verfasst: 04.01.2009 17:34
von STL
Hallo liebe Gemeinde,

nach längerer Suche im Forum zum Thema "Wie erstelle ich einen neuen Link" in der "overall_header.html" habe ich zwar einen neuen Link eingefügt, jedoch möchte ich davor auch ein eigenes Icon haben.

Bei der Rubrik FAQ steht ja das "icon_faq.gif" (../styles/prosilver/theme/images/icon_faq.gif) davor. Definiert ist das vor dem Link als:

Code: Alles auswählen

<li class="icon-faq"> ... link zur FAQ
Für meinen neuen Link hab ich bereits ein eigenes *.gif im richtigen Pfad abgelegt, jedoch weiß ich nicht, wie und wo ich eine neue "class" definiere.
Ich möchte das gern konform zu den anderen Links gestalten, also sollte mein neuer Link wie folgt aussehen:

Code: Alles auswählen

<li class="icon-portal"> ... link zum Portal
Kann mir eine(r) auf die Sprünge helfen?

Re: neuer Link - neues Icon

Verfasst: 05.01.2009 11:11
von JFooty
Einfach mal in die css-Dateien schauen... :wink:
Öffne die colours.css und suche:

Code: Alles auswählen

.icon-search	{ background-image: url("{T_THEME_PATH}/images/icon_search.gif"); }
Füge danach ein:

Code: Alles auswählen

.icon-portal	{ background-image: url("{T_THEME_PATH}/images/icon_portal.gif"); }
Ansonsten die üblichen Hinweise bei Arbeiten am Template/der Grafiksammlung befolgen.

Edit:
Ich würde die Schreibweise der Dateinamen an die anderen Dateien anpassen.
Also statt icon-portal.gif besser icon_portal.gif verwenden.

Re: neuer Link - neues Icon

Verfasst: 05.01.2009 17:11
von STL
erstmal vielen dank, das hilft mir schon mal weiter.
jedoch scheint es damit nicht getan zu sein, da das gif-bild nun mehrfach angezeigt wird, sozusagen rund um den neuen link.

folgende dinge hab ich abgeändert bzw. hinzugefügt in colours.css:

Code: Alles auswählen

.icon-portal					{ background-image: url("{T_THEME_PATH}/images/icon_portal.gif"); }
folgende dinge hab ich abgeändert bzw. hinzugefügt in overall_header.html:

Code: Alles auswählen

<li class="icon-portal"><a href="http://www.neuer_link.de" target="_blank">Portal</a></li>
nehme ich zum beispiel class="icon-faq", dann wird das faq-symbol vor dem portal-link richtig angezeigt.
irgendwie stehe ich auf dem schlauch, oder hab ich was übersehen?

Re: neuer Link - neues Icon

Verfasst: 05.01.2009 18:08
von JFooty
Ah, ein Veilchen aus dem schönen Lößnitz-Tal. :)
STL hat geschrieben:irgendwie stehe ich auf dem schlauch, oder hab ich was übersehen?
Nein. Ich habe zwei css-Einträge vergessen. :oops:
Öffne die buttons.css und 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;
}
Füge dort hinter .icon-search ein:

Code: Alles auswählen

, .icon-portal
öffne die bidi.css und suche:

Code: Alles auswählen

/* Icon images
---------------------------------------- */
.rtl .sitehome, .rtl .icon-faq, .rtl .icon-members, .rtl .icon-home, .rtl .icon-ucp, .rtl .icon-register, .rtl .icon-logout,
.rtl .icon-bookmark, .rtl .icon-bump, .rtl .icon-subscribe, .rtl .icon-unsubscribe, .rtl .icon-pages, .rtl .icon-search {
	background-position: 100% 50%;
	padding: 1px 17px 0 0;
}
Füge dort hinter .rtl .icon-search ein:

Code: Alles auswählen

, .rtl .icon-portal

Re: neuer Link - neues Icon

Verfasst: 05.01.2009 18:35
von STL
JFooty hat geschrieben:Ah, ein Veilchen aus dem schönen Lößnitz-Tal. :)

Rischtisch! 8)
JFooty hat geschrieben:Nein. Ich habe zwei css-Einträge vergessen ...
Kein Problem, dafür funzt es jetzt.
Vielen Dank für deine Hilfe und Glück Auf!