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;
			}
		}
	}
}

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

Themen-Optionen

Anzeige

Baum-Darstellung

Zwei kleine Designhacks (Webbies und Designer bitte reinschaun!)

Berechtigungen