Zrób szablon bloga z Nishką

Design bloga bywa ciężkim kawałkiem chleba. Czasami jest też nazywany przez niektórych "czarną magią". Jestem pewna, że każdy bloger chce, aby jego strona wyglądała jak najlepiej. Mam nadzieję, że z dniem dzisiejszym dzięki Sotiens będzie to prostsze do zrealizowania. Przygotowałam szablon, do którego wykonania potrzebne są jedynie chęci oraz podlinkowany nagłówek w formie graficznej. Moja instrukcja zawiera kilka niestandardowych kodów, które warto wykorzystać, bądź zapamiętać na przyszłość. 

Efekt pracy

Are you ready? Let`s go!

Naszą pracę zaczynamy od wybrania czarnego szablonu rewelacji. Wybrałam akurat ten kolor by zaoszczędzić pracy w usuwaniu cieniów z większości gadżetów.

Pierwszym podstawowym krokiem jest wgranie tła, dostosowanie szerokości kolumn (u mnie szerokość wynosi 1190px, a pasek boczny 350px) oraz układu treści. Ja wybrałam pasek boczny po lewej stronie. Gdy już zadbamy o szkielet bloga, w podstronie 'Zaawansowane' zmieniamy kolory na interesujące nas. Ja na wstępie zrobiłam wersję czarno-białą, a resztę zrobię przez CSS.

Z takim o to szablonem rozpoczynam kodowanie:)

Nagłówek

.header-outer {background-color : #ff7272; width: 100%; margin: 0; padding: 0; padding-bottom: 10px !important; text-align: center;}	Tło nagłówka
.Header {background-image: url(LINK DO NAGŁÓWKA); background-position: center !important; width: 100% !important; background-repeat: no-repeat;padding-top: 130px;}	Zdjęcie nagłówka

Strony

.tabs-outer {padding: 7px;}	Wysokość stron
.tabs-outer{text-align:center;position:relative;} .PageList li {display:inline !important; float:none !important;}	Wyśrodkowanie stron

Tytuł Posta

h3.post-title {border-bottom: 3px #877a7a dashed;}	Podkreślenie tytułu wpisu
h3.post-title { text-align:center;}	Wyśrodkowanie
h3.post-title { padding:3px;}	Wysokość
h3.post-title {text-transform:uppercase;}	Wszystkie litery wielkie

Data

.date-header span {width: 50px; height: 30px;}	Szerokość/Wysokość daty.
.date-header span {border-top: #ff7272 3px solid;border-bottom: #ff7272 5px solid;}	Obramowanie na górze/dole.
.date-header span {border-radius: 30px 30px 30px 40px;}	Zaokrąglenia
.date-header span{ margin: -0px -100px -90px 820px;}	Pozycja
.date-header span {background-color:  #fff ;}	Kolor tła daty
.date-header span {text-align: center ;}	Wyśrodkowanie tekstu

Pozycja komentarzy i etykiet POD TYTUŁEM

Przed dodaniem kodu musimy wykonać następującą czynność.
Układ -> Gadżet -> "Posty w blogu" Edytuj -> Przenosimy komentarze i etykiety nad posta.

.post-header {text-align:center;important!;}	Wyśrodkowanie
.post-header {padding: 5px; }	Wysokość

Usunięcie tła z gadżetów

Jeśli chcemy usunąć tło z danego gadżetu (w mojej instrukcji jest podany na Zdjęcie i text) musimy wyszukać ID gadżetu, które zasłuży nam jako selektor.

#Image1 {background: none; border: none;}	Spod zdjęcia
#Text1 {background: none; border: none;}	Spod tekstu

Pasek boczny

.column-left-inner {text-align:center;}	Wyśrodkowanie zawartości
.column-left-inner .widget {border-top: #ff7272 5px solid;}	Podkreślenie na górze gadżetu

Czytaj więcej

.jump-link a {background:#ff7272;}	Tło
.jump-link a {font-size: 18px;color: #fff;}	Wielkość/kolor czcionki
.jump-link a {text-align:center;}	Wyśrodkowanie czcionki
.jump-link a {padding: 8px;}	Wysokość
.jump-link a {display: block;}	Wyświetlanie w bloku (z góry do dołu)

Stopka bloga

.footer-outer {border-top: 4px solid #ff7272;}

Pozioma kreska u góry stopki

Jest to moja pierwsza instrukcja na tak dużą skalę, dlatego proszę o przychylność. Jeśli coś nie jest do końca zrozumiałe, zapraszam na mój email turkusove@gmail.com. Możecie również napisać w komentarzach o poszczególnym problemach. Chciałabym jednocześnie dodać, że zawartość tego posta jest moją, samodzielną pracą, dlatego zwracam się z prośbą o nie podpisywanie się pod nią i nie kopiowanie na swoje wpisy.

Do następnego, 

Nishka