[CSS]Wybór stylu (skórki) z poziomu strony głównej

ffox - 2011-12-01 21:56:24

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:

Kod:

/**
 * @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

Kod:

body {background: #FFFFFF;}
#punwrap {background: #FFFFFF;}

Plik 2 (alternatywny): skin2.css

Kod:

@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:

Kod:

<style type="text/css">
@import url('http://mojserwer.pl/skin1.css');
</style>

Do ogłoszenia wklej to:

Kod:

<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:

Kod:

<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.