Zmiana tytułu gadżetów w kolumnie bocznej. Kody CSS na bloga.

Wygląd naszej kolumny bocznej zależy od wybranego szablonu. Jeśli chcemy spersonalizować stronę, konieczne są drobne zmiany. Dziś pokażę wam jak dodać obrazek w tle nazw gadżetów przy pomocy kodów CSS. Osiągniemy efekt jak na poniższym obrazku.

Przede wszystkim musimy wybrać interesującą grafikę, którą chcemy umieścić w tle. Najważniejszy jest dobór rozmiaru obrazka. Najłatwiejszym sposobem jest wykonanie zrzutu z ekranu (print screen, screenshot) i otworzenie go w programie graficznym. Obraz, który chcemy umieścić w tle otwieramy w nowej warstwie i dopasowujemy wielkość. Efekt zadowalający zapisujemy i umieszczamy w serwisie hostującym grafikę aby uzyskać kod URL.

Ważne aby zwrócić uwagę na tło naszej grafiki, które powinno być zgodne z tym na stronie.  Ja zapisuje obraz w formacie png z przezroczystym tłem. Ważne jeśli kiedyś, będziecie chcieli zmienić wygląd szablonu. Taki sposób najbardziej wam polecam.
Ostatni etap to wpisanie kodów.

Wchodzimy w Układ > Projektant Szablonów > Zaawansowane > Dodaj arkusz CSS: 

Tutaj możemy wpisać gotowe kody CSS. Pamiętajcie aby przy wklejaniu kodu zrobić spacje i ją zlikwidować, ewentualnie kliknąć Enter i backspace. Mówiąc prosto program musi "załapać" zmiany.

Selektorem definiującym tytuły gadżetów jest .sidebar h2. Nasz kod wygląda następująco:

.sidebar h2 {

background-image:url(KOD URL NASZEGO OBRAZKA);

background-position: top center;  /*pozycja obrazka*/

background-repeat: no-repeat; /*grafika nie będzie się powtarzała*/

height: 45px; /* wysokość obrazka podana w px*/}

Efekt końcowy prezentuje się w ten sposób: