Trzy style dla górnej części bloga (nad nagłówkiem)

sobota, 16 września 2017

Skoro możemy upiększać naszego bloga w każdym jego module, to czemu nie zadbać o górną część naszej strony, tą która zwykle nad nagłówkiem wieje pustką (no chyba, że ktoś ma menu na górze). Można dzięki niej nadać naszej stronie indywidualnego charakteru, a to wszystko za pomocą kodu CSS - no i w trzecim przypadku CSS+grafiki. Zaczynajmy!

Styl 1

1. Przechodzimy do motyw - dostosuj - zaawansowane- dodaj arkusz CSS i wklejamy kod:

body {border-top: solid 15px #f8d7dd;}

solid - rodzaj podkreślenia
15px - grubość
#f8d7dd - kolor

Styl 2

2. Może paseczki? Nie ma problemu! Powtarzamy kroki z punktu 1, tylko tym razem wklejamy taki kod: 

body {border-top: double 70px #f8d7dd;}

Analiza kodu, taka sama jak w punkcie 1.

Styl 3

3. Powtarzamy kroki z punktu 1, w tym wypadku będzie taki kod:

body { background: #ffffff url(link do grafiki) repeat-x scroll top left; bottom: -10px; }

background - kolor tła
url - link do grafiki
bottom - odstęp między grafiką, a nagłówkiem

Moja grafika ma wymiar 1600x240px (240 to wysokość, którą można dostosować do siebie, 1600 - szerokość, najniższa wartość, której przy tego typu grafice wypadałoby się trzymać)

Jeśli spodobał Ci się wpis, przekaż go dalej :)