Wymagana wiedza:

• Konstruowanie ścieżek dostępu
• Podstawowe zasady tworzenia odsyłaczy
• Style CSS, a zwłaszcza zewnętrzne arkusze stylów

Niektóre serwisy pozwalają swoim użytkownikom zmienić wygląd stron, poprzez wybór jednego spośród przygotowanych specjalnych szablonów, które często nazywa się skórkami (ang. skins). Choć na pierwszy rzut oka operacja zmiany wyglądu wydaje się być dość skomplikowana, tak naprawdę absolutnie nie ma potrzeby budowania drugiej wersji strony dla każdej kolejnej skórki. Z pomocą przychodzą style CSS, które wręcz idealnie do tego się nadają. Do przygotowania nowej skórki wystarczy po prostu zaprojektować osobny arkusz stylów (plik *.css) i go podmienić za pomocą specjalnego skryptu.

Aby możliwa była jak najbardziej efektowna zmiana wyglądu, konieczne jest, aby serwis został zaprojektowany zgodnie z zasadą rozdzielenie struktury i prezentacji dokumentów. To oznacza m.in., że powinno się unikać znaczników i atrybutów formatujących takich jak <font color="...">...</font>, a także stylów inline, czyli atrybutu style="...". Dobrze jest zdefiniować odpowiedni zestaw klas CSS. Trzeba sobie uzmysłowić, że wszystko co będziemy mogli zmienić w nowej skórce, ogranicza się do zewnętrznego arkusza stylów, czyli pliku style.css. Jeżeli formatowanie ważnych elementów serwisu będzie przeniesione bezpośrednio do kodu źródłowego dokumentów HTML, z poziomu arkusza CSS niewiele będzie się dało zmienić. Z doświadczenia mogę poradzić, że semantyczny kod znacznie łatwiej się stylizuje, co jest kolejnym argumentem, aby zgłębić to zagadnienie. Ponadto warto dodać, że jeśli szkielet Twojej strony albo np. elementy menu będą zbudowane w oparciu o tabele, zmiana wyglądu będzie możliwa tylko w ograniczonym zakresie. Natomiast jeżeli strukturę oprzesz o elementy <div>...</div>, a przy budowaniu menu skorzystasz z wykazów (<ul>...</ul>) oraz list definicyjnych (<dl>...</dl>), to bez większego trudu będzie można totalnie odmienić wygląd serwisu tylko za pomocą podmiany arkusza CSS, np. przenosząc kolumnę menu z lewej na prawą stronę czy zmieniając układ menu z pionowego na poziomy (np. w formie zakładek), bez jakiejkolwiek ingerencji w kod źródłowy dokumentów HTML. Zobacz: Menu w CSS oraz Szablon strony na DIV-ach.

Aby wprowadzić do swojego serwisu system skórek, najpierw utwórz kolekcję arkuszy stylów - plików *.css - które będą stanowiły kolejne szablony do podmiany. Następnie utwórz w swoim edytorze nowy dokument, wklej do niego poniższy kod i zapisz w pliku skin.js:

/**
 * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl}
 * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
 */

function Skin(name, expires, path, message)
{
	this.expires = typeof expires != 'undefined' ? expires : 365;
	this.message = typeof message != 'undefined' ? message : 'Wymagana obsługa cookie';
	this.name = typeof name != 'undefined' ? name : 'skin';
	this.path = typeof path != 'undefined' ? path : '/';
	
	var link = null;
	var original = '';
	var css = '';
	
	this.get = function()
	{
		if (css != '') return css;
		var matches = document.cookie.match(new RegExp('(^|;\\s*)' + this.name + '=([^;]*)'));
		if (matches && matches.length == 3) css = matches[2];
		return css;
	}
	
	this.set = function(url)
	{
		document.cookie = this.name + '=' + url + (this.expires > 0 ? ';expires=' + new Date(new Date().getTime() + 86400000 * this.expires).toGMTString() : '') + ';path=' + this.path;
		css = url;
		if (this.message != '' && !navigator.cookieEnabled) window.alert(this.message);
		this.show();
	}
	
	this.reset = function()
	{
		css = '';
		document.cookie = this.name + '=;path=' + this.path;
		this.show();
	}
	
	this.show = function()
	{
		var url = this.get();
		if (url != '' || original != '')
		{
			if (link == null || original == '')
			{
				for (var i = 0; i < document.getElementsByTagName('link').length; i++)
				{
					if (document.getElementsByTagName('link')[i].getAttribute('rel').toLowerCase() == 'stylesheet')
					{
						link = document.getElementsByTagName('link')[i];
						original = link.getAttribute('href');
						break;
					}
				}
			}
			link.setAttribute('href', url != '' ? url : original);
		}
	}
	
	this.show();
}


var skin = new Skin();

Następnie na każdej podstronie serwisu, zaraz pod znacznikiem <link>, dołączającym domyślny zewnętrzny arkusz stylów, dodaj odwołanie do utworzonego właśnie pliku skin.js - za pomocą znacznika <script>...</script>:

<link rel="stylesheet" href="style.css">
<script src="skin.js"></script>

Ostatnim krokiem będzie przygotowanie specjalnej podstrony, na której będą prezentowane wszystkie udostępnione dla użytkowników skórki z możliwością ich wyboru. Oczywiście wskazanym by było, aby dla każdej skórki przygotować specjalne miniaturki ze zrzutami ekranu (klawisz Print Screen), aby użytkownicy nie musieli wybierać w ciemno 🙂 Zmiana skórki będzie się sprowadzała do wstawienia specjalnego odsyłacza:

<a href="javascript:void(0)" onclick="skin.set('/style.css'); return false"><img src="zrzut ekranu" alt="Nazwa skórki" border="0"></a>

Jeżeli struktura katalogów serwisu nie jest płaska, tzn. poszczególne podstrony znajdują się w podkatalogach, konieczne będzie podanie bezwzględnej ścieżki dostępu do arkusza CSS, ponieważ wpisana tutaj ścieżka musi być poprawna na wszystkich podstronach serwisu, a nie tylko na tej jednej. Oczywiście w żadnym wypadku nie wolno wpisywać bezwzględnej ścieżki dostępu, tak jak ona wygląda na dysku lokalnym, czyli nie: C:\www\skin\style.css. Można wykorzystać dwie metody:

1. Rozpocząć ścieżkę od znaku ukośnika ("/"). W takim przypadku będzie ona konstruowana względem katalogu głównego konta WWW. Czyli przykładowo jeżeli serwis znajduje się pod adresem http://www.example.com, to podanie ścieżki /skin/style.css, będzie zawsze kierować do pliku http://www.example.com/skin/style.css, niezależnie od tego, czy będziemy się do niego odnosić z dokumentu http://www.example.com/index.html czy np. http://www.example.com/katalog/podstrona.html.
2. Podać pełny adres URL, np. http://www.example.com/skin/style.css.

W zasadzie pierwszy z omawianych sposobów jest bardziej elastyczny, ponieważ nie powoduje żadnych problemów przy ewentualnej zmianie adresu serwisu, choć w tym przypadku tak naprawdę i tak nie będzie to miało większego znaczenia.

Kolejna skórka to po prostu nowy plik *.css, do którego bezwzględną ścieżkę trzeba podać w kolejnym odsyłaczu. W ten sposób można stworzyć całą kolekcję.

Oczywiście prócz skórek, każdy serwis musi posiadać swój domyślny arkusz CSS, który dołącza się w tradycyjny sposób (znacznik <link>) - można go nazwać skórką domyślną. Będzie ona automatycznie ustawiona, jeżeli użytkownik nie wybierze innej. Dla skórki domyślnej nie ma sensu tworzyć odsyłacza ustawiającego, ale trzeba udostępnić użytkownikowi możliwość powrotu do niej, jeśli używana wcześniej skórka już się znudzi. W tym celu, najlepiej na stronie ze zbiorem skórek, należy wstawić następujący odsyłacz:

<a href="javascript:void(0)" onclick="skin.reset(); return false">Przywróć wygląd domyślny</a>

Alternatywnym sposobem wyboru skórki i przywracania wyglądu domyślnego może być lista rozwijalna:

<select id="skin" onchange="if (this.value == '') skin.reset(); else skin.set(this.value)">
<option value="">Wygląd domyślny</option>
<option value="/style1.css">Nazwa skórki 1</option>
<option value="/style2.css">Nazwa skórki 2</option>
<option value="/style3.css">Nazwa skórki 3</option>
(...)
</select>
<script>
document.getElementById('skin').value = skin.get();
</script>