experymenty

W standardowej skórce jego definicja wygląda tak:

{ background-image: url('/themes/1_default/images/kolo_pom.gif');
background-repeat: no-repeat;
background-position: top center;
background-color: #E56D38;
padding: 5px;
width: 710px;
margin-bottom: 5px
}

Jak ją modyfikować? Jeżeli interesujący nas obrazek załadujemy do "Zasobów", w pozycji "background-image: url" trzeba zmienić zawartość nawiasu wskazując jego adres, czyli wpisujemy ('../resource/nazwaobrazka.gif'). Dalsze parametry zależą od wyglądu obrazka. Jeśli jest mały i nadaje się do powtarzania, można usunąć wers "background-repeat: no-repeat;" - jak nietrudno się domyśleć, jego obecność powoduje nie powtarzanie obrazka, czyli tak jak u mnie - wyświetla się tylko raz. Gdybym usunęła ten wpis, obrazek powtarzałby się tyle razy ile zmieściłoby się w box'ie

"background-position: top center;" decyduje o wyrównaniu obrazka w pionie (pierwszy wpis) i poziomie (drugi). Możliwe pozycje to top, bottom i center - dla wyrównania pionowego i left, center, right - dla wyrównania poziomego. Ustalanie tych wartości ma sens w przypadku, gdy tło się nie powtarza. Jeśli wers "background-repeat: no-repeat" został usunięty, tło będzie wypełniało cały box, nie ma więc sensu stosować tych ustawień.

"background-color: #E56D38" to definicja koloru tła wokół naszego obrazka. Zmienianie jej w przypadku powtarzającego się obrazka również nie ma sensu, ponieważ całe tło jest zasłonięte.

"padding: 5px" określa odstęp jaki ma być zachowany wokół całego box'u. Można tą linijkę usunąć, wtedy nie będzie odstępu, można też 5 zamienić na 0 z takim samym efektem. Ilość pikseli można ustawić dowolną, ważne jednak, żeby nie przesadzić, bo strona się za mocno powiększy.

"width: 710px;" to szerokoć całego box'u. Można ją zmieniać, tak aby blog zajmował całą szerokość ekranu (ten wymiar zależy od rozdzielczości), jednak trzeba wówczas pamiętać o dostosowaniu do tej szerokości wszystkich elementów bloga (jeśli zmienisz tylko szerokość ramki tytułowej, wpisy do bloga nadal będą zachowywać dawną szerokość.

"margin-bottom: 5px" określa dolny margines naszego box'u (czyli odległość tytułu od dolnej krawędzi).

Co tu można jesze dodać?

• Nasz box z tytułem może mieć ramkę. By ją określić dodajemy wpis "3px border: solid #000;" Oczywiście może mieć dowolną grubość i kolor. Moze też nie być "solid" (ciągły) a "thin dotted". Możliwości jest bardzo wiele.
• Oprócz szerokości, możemy oczywiście określić wysokość box'u, wstawiając parametr "height 100px;" - jak zwykle wysokość możemy zmieniać w zależności od potrzeb.
• Podobnie z marginesami - możemy ustalić wielkość wszystkich marginesów, nie tylko dolnego, wpisując "Margin-top: 5px;" dla marginesu górnego, "Margin-left: 5px;" dla lewego i "Margin-right: 5px;" dla prawego.
  

Mamy już obrazek, a na nim wyświetla się tytuł. Jak go usunąć?
Odnajdujemy w CSS'ie pozycję "#BlogTytulText"

Jeżeli w pierwszej linijce, po znaku { wpiszemy "display: none;", pozostałe wartości nie będą już miały znaczenia, ponieważ wydaliśmy tym samym polecenie nie wyświetlania nazwy bloxa.
Ważne! Jeśli usuwasz tytuł bloga, a chcesz by widoczny był obrazek, pamiętaj o ustawieniu wysokości box'u!
Pamiętaj, by na końcu każdej wartości stawiać średnik!

Jeżeli wszystko poszło dobrze, obrazek powinien wyglądać tak jak u mnie.

W ten sam sposób można zmieniać tło we wszystkich box'ach. Wskazówki, który jest który znajdziesz tu.