Wstęp:
Witam,
Poniżej chciałbym przedstawić nie wielki skrypt, który umożliwi nam wybór przygotowanych przez nas szablonów CSS na naszym forum.
Cel skryptu: Możliwość zmiany wyglądu forum z poziomu strony głównej
Poziom trudności: Średni
Wymagania: Przynajmniej dwa pliki .css oraz serwer z możliwością ich magazynowania
Informacje czerpałem ze strony: http://www.kurshtml.edu.pl/skrypty/skorki.html
Przygotowanie:
W celu zaoszczędzenia miejsca na stopce lub ogłoszeniu na naszym forum, skopiuj poniższy kod do Notatnika i zapisz jako plik skins.js:
/** * @author Sławomir Kokłowski {@link http://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();
Zapisany plik skopiuj na serwer tak, aby był pod łatwo dostępnym adresem, np. w lokalizacji: http://mojserwer.pl/skins.js
Oczywiście możemy cały skrypt wkleić bezpośrednio na forum (pomiędzy <script language="JavaScript" type="text/javascript">...</script>), ale odradzam ze względu na bałagan jaki powstanie.
Dodatkowo na serwer wrzucamy dwa pliczki .css, które będą służyły jako skórki
Plik 1 (domyślny): skin1.css
body {background: #FFFFFF;} #punwrap {background: #FFFFFF;}
Plik 2 (alternatywny): skin2.css
@import url('http://www.mojeforum.pun.pl/style/Test9.css'); body {background: #000000 !important;} #punwrap {background: #000000 !important;}
Przygotowane skórki będą na bazie stylu Test9, a więc w drugim pliku .css (alternatywnym) należy pamiętać o koniecznym dodaniu kodu @import url('http://www.mojeforum.pun.pl/style/Test9.css');.
Skórka pierwsza (podstawowa) będzie miała tło w kolorze białym, natomiast druga w kolorze czarnym.
Zwróć uwagę na atrybut !important (ważny), konieczny do wyświetlenia wybranego koloru.
Oba pliki podobnie jak skrypt skins.js, wrzucamy na serwer (przykładowa lokalizacja: http://mojserwer.pl/skin1.css oraz http://mojserwer.pl/skin2.css).
Menu wyboru:
Gdy mamy już wszystko przygotowane, zabieramy się za menu wyboru skórki.
Do stopki lub ogłoszenia na forum, wklej poniższy kod:
<style type="text/css"> @import url('http://mojserwer.pl/skin1.css'); </style>
Do ogłoszenia wklej to:
<link rel="Stylesheet" type="text/css" href="http://mojserwer.pl/skin1.css" /> <script type="text/javascript" charset="iso-8859-2" src="http://mojserwer.pl/skins.js"></script> Wybierz motyw: <a href="javascript:void(0)" onclick="skin.reset(); return false">Skórka 1</a> | <a href="javascript:void(0)" onclick="skin.set('http://mojserwer.pl/skin2.css'); return false">Skórka 2</a>
Takim oto sposobem, w ogłoszeniu pojawi nam się napis "Wybierz motyw: Skórka 1 | Skórka 2" z możliwością dostosowania wyglądu do swojego gustu.
Oczywiście jest możliwość wykorzystania większej ilości skórek:
<link rel="Stylesheet" type="text/css" href="http://mojserwer.pl/skin1.css" /> <script type="text/javascript" charset="iso-8859-2" src="http://wrocek.hostit.pl/temp/e2140/skins.js"></script> Wybierz motyw: <a href="javascript:void(0)" onclick="skin.reset(); return false">Skórka 1</a> | <a href="javascript:void(0)" onclick="skin.set('http://mojserwer.pl/skin2.css'); return false">Skórka 2</a> | <a href="javascript:void(0)" onclick="skin.set('http://mojserwer.pl/skin3.css'); return false">Skórka 3</a> | <a href="javascript:void(0)" onclick="skin.set('http://mojserwer.pl/skin4.css'); return false">Skórka 4</a>
Należy tylko pamiętać o przygotowaniu wcześniej odpowiednich pliczków .css.
Zakończenie:
Ogromną zaletą skryptu jest to, że podczas poruszania się po forum, zachowany jest aktualnie wybrany przez nas motyw, dzięki czemu nie wraca za każdym razem po wejściu na forum/post do stylu domyślnego.
Aktualnie działa na wszystkich przeglądarkach, oprócz IE8 i niżej.
Prezentacja działania skryptu na stronie: http://www.earth2140.pun.pl
Forum jeszcze nie ukończone, ale zmiana stylu działa (chorągiewki z ikonami w logo ED i UCS).
Uwagi mile widziane.
Powodzenia.
Ostatnio edytowany przez ffox (2011-12-03 10:04:48)
Offline