VGH: Modyfikacja narzędzi (przyciski)

Poradnik dotyczący modyfikacji narzędzi był moim pierwszym poradnikiem stworzonym dla stron założonych na vgh.pl. Na webmasterzy.org dodałam go dwa lata temu i opiera się na czystym kodzie CSS. Głównym celem jest zmiana przycisków odpowiedzialnych m.in za formatowanie tekstu z przycisków słownych na ich odpowiedniki graficzne. Na obrazie obok można zobaczyć końcowy efekt. Pełna instrukcja w rozwinięciu posta.

1. Utwórz nowy panel lub edytuj już istniejący (lewy lub prawy):
PA -> Zarządzanie stroną -> Zarządzanie panelami
2. Skopiuj poniższy kod i wklej do panelu:

<style type="text/css">
/*------Buttony narzędzi--------*/
/*--------Modyfikacja przygotowana przez Fantagiro || fantidesign.blogspot.com
-----*/

/*----bold---*/

.button[value=b] {
background-color:#fff!important;
background-image: url(http://cdn1.iconfinder.com/data/icons/discovery/16x16/actions/text_bold.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----italic ----*/

.button[value=i] {
background-color:#fff!important;
background-image: url(http://cdn1.iconfinder.com/data/icons/discovery/16x16/actions/format-text-italic.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----underline ----*/

.button[value=u] {
background-color:#fff!important;
background-image: url(http://cdn1.iconfinder.com/data/icons/tango/16x16/actions/format-text-underline.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----link ----*/

.button[value=url] {
background-color:#fff!important;
background-image: url(http://cdn2.iconfinder.com/data/icons/ledicons/link.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----mail ----*/

.button[value=mail] {
background-color:#fff!important;
background-image: url(http://cdn2.iconfinder.com/data/icons/tango/16x16/actions/mail-reply-sender.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----picture----*/

.button[value=img] {
background-color:#fff!important;
background-image: url(http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0700/picture.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----center----*/

.button[value=center] {
background-color:#fff!important;
background-image: url(http://cdn3.iconfinder.com/data/icons/fugue/icon/edit-alignment-center.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----small----*/

.button[value=small] {
background-color:#fff!important;
background-image: url(http://cdn1.iconfinder.com/data/icons/fugue/icon/external-small.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----code---*/

.button[value=code] {
background-color:#fff!important;
background-image: url(http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0640/page_white_code.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

/*----quote---*/

.button[value=quote] {
background-color:#fff!important;
background-image: url(http://cdn5.iconfinder.com/data/icons/bijou/10/Quote.png);
background-position:center center;
background-repeat:no-repeat;
border:1px solid #000;
font-size:0px;
width:25px!important;
height:25px!important
}

</style>

3. Pamiętaj aby panel był włączony!