Zwei kleine Designhacks (Webbies und Designer bitte reinschaun!)

**DFYX** · 09.03.2009 01:40

Da sich ein paar Leute über die Avatarspiegelungen und schlecht sichtbare Ranggrafiken, die nun mit dem neuen Postbit in allen Designs auftauchen, beschwert haben, habe ich mal im Testforum etwas rumexperimentiert und für beides eine Lösung gefunden. Dieser Thread richtet sich somit hauptsächlich an diejenigen, die die Designs für die Unterforen basteln.

Avatarspiegelungen für einzele Styles deaktivieren
Im Template postbit_legacy die Passage onload="Reflection.add(this, {height: 0.33, width: 0.33});" entfernen. Das wars...

Vom Style abhängige Ranggrafiken
(Geht leider nur mit JS, das aber eh für alles mögliche gebraucht wird. Wer JS aus hat, muss halt doch mit den Standardsternen auskommen)

Code:

/*
 * Anleitung:
 * 1. $layoutname durch eigenen Layoutnamen ersetzen
 * 2. Diese Datei unter dem Namen stars.js in den Layoutordner hochladen
 * 3. Im Layoutordner einen Ordner ranks mit den gewünschten Sterngrafiken anlegen
 * 4. Für Posts und PNs ersetzen:
 *  a) Im Template headerinclude die Zeile "<script type="text/javascript" src="layouts/$layoutname/stars.js"></script>" hinzufügen ($layoutname ersetzen!)
 *  b) Im Template postbit_legacy die Zeile "<if condition="$post['rank']"><br /><div class="smallfont">$post[rank]</div></if>" durch "<if condition="$post['rank']"><br /><div class="smallfont rankstars">$post[rank]</div></if>" ersetzen
 *  c) In den Templates SHOWTHREAD, SHOWTHREAD_SHOWPOST, USERCP_SHELL die Funktion ReplaceStars() in den onload Handler von <body> eintragen
 * 5. Für das Profil ersetzen:
 *  a) Im Template MEMBERINFO die Zeile <script type="text/javascript" src="layouts/$layoutname/stars.js"></script> hinzufügen ($layoutname ersetzen!)
 *  b) Im Template MEMBERINFO die Zeile "<div id="rank">$prepared[rank]</div>" durch "<div id="rank" class="rankstars">$prepared[rank]</div>" ersetzen
 *  c) Im Template MEMBERINFO die Funktion ReplaceStars() in den onload Handler von <body> eintragen
 */

function ReplaceStars()
{
	var rankstars = document.myGetElementsByClassName('rankstars');
	for (i=0;i<rankstars.length;i++) {
		var images = rankstars[i].getElementsByTagName("img");		
		images[0].src = images[0].src.replace("/images/", "/layouts/$layoutname/");
	}
}

P.S.: Ich hätte das an sich ins Interne gepostet, aber momentan komm ich da nicht rein, also muss das L&K reichen.
P.P.S.: Eine kleine Demonstration gibts im Würfelorgie Style im Testforum. Die Spiegelungen sind aus und die GFs haben weiße Sterne.
P.P.P.S.: Ich werd wohl noch eine überarbeitete Fassung machen, bei der man im Script angeben kann, welche Grafiken ersetzt werden sollen, damit es bei neu hinzukommenden Rängen keine Probleme gibt.

Und noch ein Edit:
Sternchenscript in Variante B, die nur bestimmte Grafiken austauscht.

Code:

/*
 * Anleitung:
 * 1. $layoutname durch eigenen Layoutnamen ersetzen
 * 2. Werte im Array customstars anpassen
 * 3. Diese Datei unter dem Namen stars.js in den Layoutordner hochladen
 * 4. Im Layoutordner einen Ordner ranks mit allen Sterngrafiken anlegen
 * 5. Für Posts und PNs ersetzen:
 *  a) Im Template headerinclude die Zeile "<script type="text/javascript" src="layouts/$layoutname/stars.js"></script>" hinzufügen ($layoutname ersetzen!)
 *  b) Im Template postbit_legacy die Zeile "<if condition="$post['rank']"><br /><div class="smallfont">$post[rank]</div></if>" durch "<if condition="$post['rank']"><br /><div class="smallfont rankstars">$post[rank]</div></if>" ersetzen
 *  c) In den Templates SHOWTHREAD, SHOWTHREAD_SHOWPOST, USERCP_SHELL die Funktion ReplaceStars() in den onload Handler von <body> eintragen
 * 6. Für das Profil ersetzen:
 *  a) Im Template MEMBERINFO die Zeile <script type="text/javascript" src="layouts/$layoutname/stars.js"></script> hinzufügen ($layoutname ersetzen!)
 *  b) Im Template MEMBERINFO die Zeile "<div id="rank">$prepared[rank]</div>" durch "<div id="rank" class="rankstars">$prepared[rank]</div>" ersetzen
 *  c) Im Template MEMBERINFO die Funktion ReplaceStars() in den onload Handler von <body> eintragen
 */

var customstars = new Array("stars_mod.png", "stars_gf.png");

function ReplaceStars()
{
	var rankstars = document.myGetElementsByClassName('rankstars');
	
	for(i = 0; i < rankstars.length; i++) {
		var images = rankstars[i].getElementsByTagName("img");
		var parts = images[0].src.split("/");
		var filename = parts[parts.length - 1];
		
		for(j = 0; j < customstars.length; j++)
		{
			if(customstars[j] == filename)
			{
				images[0].src = images[0].src.replace("/images/", "/layouts/$layoutname/");
				break;
			}
		}
	}
}

**Ranmaru** · 09.03.2009 12:51

Danke an DFYX für die Mühe an dieser Stelle.

Da die Sterne von mir sind, biete ich natürlich auch dem Design angepaßte Ersatzsterne an. Ich denke, es wäre am besten, wenn die Sterne in den jeweiligen Designs der wirklichen Farbe der Usernames entsprechen. So ist es im OO ja auch und so ist es eigentlich auch gedacht.

Wäre gut, wenn sich die Webmaster bzw. deren Designer hier melden könnten (oder meinetwegen auch per PM bei mir; oder im Jabber) und mir die Hex-Codes für die Farben der Usernames in ihrem Design durchgeben könnten, dann baue ich angepaßte Sternchen dafür. Das gilt natürlich auch, falls die Farben der Staffies geändert wurden, dann passe ich die Sterne auch gerne an. Und dann findet sich mit Sicherheit auch schnell ein Admin, der die einbaut.

Also einfach kurz die Farbcodes hier rein oder per Nachricht an mich.

**Sumbriva** · 09.03.2009 18:40

Zitat von Ranmaru

Danke an DFYX für die Mühe an dieser Stelle.

Da die Sterne von mir sind, biete ich natürlich auch dem Design angepaßte Ersatzsterne an. Ich denke, es wäre am besten, wenn die Sterne in den jeweiligen Designs der wirklichen Farbe der Usernames entsprechen. So ist es im OO ja auch und so ist es eigentlich auch gedacht.

Wäre gut, wenn sich die Webmaster bzw. deren Designer hier melden könnten (oder meinetwegen auch per PM bei mir; oder im Jabber) und mir die Hex-Codes für die Farben der Usernames in ihrem Design durchgeben könnten, dann baue ich angepaßte Sternchen dafür. Das gilt natürlich auch, falls die Farben der Staffies geändert wurden, dann passe ich die Sterne auch gerne an. Und dann findet sich mit Sicherheit auch schnell ein Admin, der die einbaut.

Also einfach kurz die Farbcodes hier rein oder per Nachricht an mich.

Danke Ran... Wir Netzwerkseitenuser wissen das wirklich zu schätzen...

**Lukas** · 10.03.2009 18:38

...okay, besserer Weg: mit einem Template-Hack und 'ner Template-Variable kann man den Designs 'ne Möglichkeit geben, die Sterne einzeln einzustellen, ohne JS zu benutzen, und das Template bleibt trotzdem überall gleich (sprich: wenn ich's verändere, kann ich's weiterhin in alle Styles copypasten). Ich werde das vermutlich später heute Abend einbauen.

**Lukas** · 14.03.2009 00:44

So, hab das ganze jetzt eingebaut, sprich: wenn ich neue Stern-Grafiken für einzelne Designs krieg, kann ich die einbauen. Wobei ich drum bitten würde, das wirklich nur zu verwenden, um die Standard-Sterne in der passenden Userfarbe, sowie schwer erkennbare Sterne (z.B. GF auf schwarzem Grund) umzufärben.

Thema: Zwei kleine Designhacks (Webbies und Designer bitte reinschaun!)

Themen-Optionen

Anzeige

Zwei kleine Designhacks (Webbies und Designer bitte reinschaun!)

Berechtigungen