Minimalistyczny szablon z Tyler

Element: HTML/JavaScript
Stopień trudności: xxxx
Czas wykonywania: ~20 minut

Naprawdę minimalistyczny i naprawdę prosty. Skupimy się tylko i wyłącznie na zmianach w projektancie, a jakiekolwiek zmiany w kodzie HTML szablonu mogą być tylko eleganckim dopracowaniem całej reszty. Ale o nie zadbacie sami i już z pomocą innych instrukcji.

Na samym początku ustawiamy szablon Prosty i przechodzimy do Układu, gdzie stworzymy gadżety, które następnie wypełnią nam całego bloga. Będzie to szablon z sidebarem, ale nie ma róznicy czy zdecydujemy się na lewą kolumnę czy prawą. Wszystkie przedstawione kody dobrze zaaplikują się dla obu opcji.
Prosty układ: pod nagłówkiem umieściłam strony, a w prawej kolumnie archiwum, etykiety i dwa gadżety HTML/JavaScript z przykładowym tekstem.
I do pracy!

Krok 1 - podgląd szablonu po pierwszych modyfikacjach 

Na razie zostawimy kody CSS i pozmieniamy to, co proponuje nam blogger. Starajcie się wszystkie kolory pozmieniać na neutrualne, a tła na przezroczyste, żeby nic nam później nie przeszkadzało.
Moje ustawienia:

• Tekst strony: Arial 11px #444444
• Tła: wszystkie przezroczyste
• Linki: Kolor linku - #444444, Kolor odwiedzonego/po wskazaniu kursorem - #000000
• Tytuł bloga: Times New Roman 36px, pochylony
• Opis bloga: #000000
• Tekst kart:Arial 11px, #000000, #000000
• Tło kart: transparent, transparent
• Tytuł posta: Times New Roman, 22px, pochylony
• Nagłówek z datą: #666666, transparent, Arial 11px
• Stopka posta: #666666, transparent, transparent
• Gadżety: Arial 11px, #000000, #999999
• Obrazy: przezroczyste, kolor tekstu podpisu- #444444
• Akcenty: przezroczyste

Krok 2

Jeśli korzystacie z szablonu Simple, przy stopce i przyciskach nowy/starszy post macie pewne "dodatki". Są zupełnie niepotrzebne, dlatego też już na początku je usuniemy.
Dodajemy arkusz CSS w projektancie i wpisujemy:

.blog-pager {
background: none;}
.footer-outer {
border:none;}

Dlaczego? W szablonie Prostym(Simple) mamy pewnien kod CSS, który znajdziemy po wejściu w edycje kodu HTML. A tam, w pakiecie z szablonem mamy ustawione tło dla starszych/nowszych postów i obramowanie górne dla stopki całego bloga.
Powyższe kody neutrualizują nam te efekty i sprawiają, że ich nie ma. Nawet jeśli nie usuwamy bezpośrednio "sprawców całego zamieszania" z kodu, to co napiszemy "pod" jest "ważniejsze" i wyższe komendy zostają zastąpione przez nowe - te, które my dodaliśmy.

Krok 3 - sidebar - podgląd szablonu

Teraz będziemy pracować nad sidebarem/kolumną boczną. Tutaj skorzystamy z dwóch selektorów: .sidebar ( który dotyczy całej kolumny bocznej ) i div.widget > h2, div.widget h2.title ( jest to selektor, który pozwala nam modyfikować tytuły postów - przyznaję, że jest to dla mnie nowy selektor, używam go po raz pierwszy - ale możecie dowolnie zmieniać wygląd tytułów gadżetów za jego pomocą, a o to chodzi ).

.sidebar {
border:1px solid #aaa; /* obramowanie kolumny */
padding:20px; /* odległość obramowania od tekstu w kolumnie/gadżetów */
text-align:justify; /* wyjustowanie tekstu */}
div.widget > h2,
div.widget h2.title  {
font-family:times new roman; /* czcionka tytułów */
font-style:italic; /* pochylenie tekstu */
font-size:14px; /* wielkość czcionki */
color:#666; /* kolor czcionki */
text-align:right; /* wyrównanie do prawej strony */
text-transform:lowercase; /* brak dużych liter */
border-bottom:1px solid #ddd; /* obramowanie dolne - można powiedzieć, że pewnego rodzaju podkreślenie */
line-height:8px; /* bardzo często używam tego razem z border-bottom. Jeśli chcecie, aby tekst "dotykał" podkreślenia to z pomocą line-height da się to zrobić! */
}

Krok 4 - post - podgląd szablonu

Nadal trzymamy się minimalizmu, więc dużo pracy nie będzie, ale - tym razem - selektorów będzie troszkę więcej.
Zacznijmy od tytułu:

h3.post-title {
text-transform:uppercase; /* wszystkie litery będą duże */
margin-top:0px; /* dzięki temu przerwa pomiędzy datą, a tytułem powinna się zmniejszyć */
font-size:30px;
}
h3.post-title a {
color:#111;} /* tutaj ustawiłam kolor dla tytułu tylko jako linku. To znaczy, że po "wejściu" w post, kolor tytułu się zmieni na podstawowy ( tj. ten, który ustawiliśmy w kroku pierwszym */

Teraz post-header i post-footer, czyli wszystkie daty, etykiety i autorzy postów, które pojawiają się pod tytułem lub na samym końcu posta:

.post-header, .post-footer {
font-family:calibri;  /* czcionka */
font-size:8px; /* rozmiar czcionki */
text-transform:uppercase;
letter-spacing:3px; /* odległość między literami */} 

Tutaj specjalnie użyłam niewielkiej czcionki, bo jest to raczej element dodatkowy i nie chciałam, aby w jakikolwiek sposób "przytłaczał" tekst posta.

Cytat i treść posta:

blockquote {
margin:0px; /* początkowo cytat nie zajmuje całej długości kolumny, a margines pomaga nam "wyrównać jego długość, dzięki czemu może on się "zrównać" z tekstem. */
padding:20px; /* odległość tekstu od "pudełka" cytatów. dobrze widać jak działa padding, gdy użyjemy z nim background-color lub chociażby border. Pomaga on odczepić tekst od boków */
letter-spacing:2px; /* odległość między literami */
background: #f0f0f0; /* kolor tła */
text-align: justify;
font-family: calibri;
font-size:9px;
letter-spacing: 1px;
text-transform: uppercase;
color: #444;
}
.post-body {font-size:11px;} /* rozmiar czcionki w poście */

Przycisk "czytaj więcej"

.jump-link {
font-family:arial;
text-transform:uppercase;
font-weight:bold;
font-size:10px;
text-align:right /* najważniejszy kawałek kodu: to on sprawia, że przycisk przenosi się na prawą stronę */}
.jump-link a /* to jest dokładny selektor dla linku "więcej" - wyżej działamy nie na linku, a raczej na jego "przestrzeni" {
border-bottom:2px solid #111;
border-top:2px solid #111; /* obramowanie górne i dolne */
color:#111;
display:inline-block;
padding:5px 20px;} 

Krok 5 - karty/strony/menu - podgląd szablonu

Powoli zbliżamy się do końca. Ale jeszcze trochę przed nami. Teraz czas na nasze menu, które na początku ustawiliśmy pod nagłówkiem.

#PageList1 ul li {
float: none;
 display: inline;}

Ten kod pozwali nam na poźniejsze wyśrodkowanie linków. Bardzo ważny kod! Zapamiętajcie go!

#PageList1 {
text-align:center; /* tutaj nasze wyśrodkowanie w końcu się pojawi */
border-bottom:3px solid #111; /* obramowanie dolne dla kart */
padding:20px;
margin-left:-30px; /* margines pozwoli nam wyrównać karty z resztą bloga. po dodaniu paddingu i obramowania, niekiedy można zauważyć, że strony "nie pokrywają" się z resztą bloga. */}
#PageList1 a {
font-family:times;
font-style:italic;
text-transform:lowercase;
letter-spacing:2px;}

Krok 6 - tytuł bloga - podgląd szablonu

I krok ostatni, czyli tytuł bloga.

#Header1 {
text-align:center; /* wyśrodkowanie tekstu
}
.Header h1{
font-size:50px;
margin-bottom:-30px; /* zbliżenie tytuły do stron */
padding:40px;
font-style:normal;
text-transform:uppercase;
letter-spacing:30px; /* odległość między literami */}

Mam wrażenie, że instrukcja trochę taka nie moja, bo tłumaczeń jest bardzo mało ( a ja to lubię sobie pogadać ), ale jestem świadoma, że niewiele też tutaj do tłumaczenia było. Kod CSS napisany całkowicie na tym bazowym, więc jest parę "dodatkowych" kodów, ale mam nadzieję, że wyszło prosto i minimalistycznie!

W przypadku, gdy ktoś zdecyduje się skorzystać z instrukcji, prosiłabym o umieszczenie odpowiedniej informacji na blogu z czyją pomocą robiony był szablon

Coś screeny nie chciały za bardzo współpracować, dlatego podglądy w linkach, ale mam nadzieję, że dacie radę!

Proszę nie ugotować mi się tam w tych upałach!