tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

wtorek, 11 sierpnia 2015

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!

17 komentarzy:

  1. Chyba pokombinuję dzisiaj sobie z tym szablonem <3

    OdpowiedzUsuń
  2. Kocham,kocham, kocham! Z pewnością spróbuję coś zmajstrować jak tylko wrócę do domu z gór. Tu w Tatrach też nic tylko bawić się w parówkę na grillu.

    OdpowiedzUsuń
  3. A ja stworzyłam coś takiego :D http://s2.ifotos.pl/img/podgladjp_wqwrshh.jpg Ale na razie szablon jest ukryty na niepublicznym blogu i tylko czeka na użycie. Świetna instrukcja!
    Pozdrawiam, Niah.

    OdpowiedzUsuń
  4. http://graphical-thoughts.blogspot.com/2014/05/relive-memory.html pobieram ten szablon :) x

    OdpowiedzUsuń
  5. Ooo, z pewnością mi się przyda w przyszłości! :)

    minimalistyczny.blogspot.com

    OdpowiedzUsuń
  6. cześć! pobrałam szablon immortals na bloga: wybrakowanyff.blogspot.com
    Pozdrawiam! :)

    OdpowiedzUsuń
  7. Na pewno coś pokombinuję, gdy wrócę do domu! Mam nadzieję, że mi się uda ;*

    OdpowiedzUsuń
  8. A ja mam problem. Pod postami wyświetlają mi się reakcje. Jak je usunąć?

    OdpowiedzUsuń
    Odpowiedzi
    1. Układ -> Edytuj w części "Main" -> Odznacz checkboxa "reakcji" :)

      Usuń
  9. Mogłabym poprosić o wysłanie szablonu Tomorrow (ze zdjęciem w stopce) na e-mail stylurbeanie@gmail.com? c:

    OdpowiedzUsuń
  10. Cześć! Ja piszę w pewnej delikatnej sprawie. Otóż, nie otrzymałam szablonu Dope, który podobno został wysłany na moją skrzynkę (so sad :c). Prawdopodobnie mejl zawieruszył się gdzieś po drodze, a więc zgłaszam się ponownie. Mój adres to orasey@o2.pl. Pozdrawiam! :)

    OdpowiedzUsuń
  11. A ja mam pytanie, jak to potem wyczyścić? Skąd mam to usunąć?

    OdpowiedzUsuń
  12. Świetny szablon, "pobrałam" go do siebie :) Mam tylko problem z etykietami i komentarzami, które u mnie znajdują się na dole posta, a nie u góry i nie wiem, jak to zmienić. Możesz mi pomóc?

    Pozdrawiam!

    OdpowiedzUsuń
  13. można prosić o wysłanie tego szablonu? c; mail: cathylambre@gmail.com

    OdpowiedzUsuń