wtorek, 24 września 2013

Jak wyśrodkować nagłówek / datę posta / nagłówki widgetów

Ostatnio znów bawię się wyglądem swojego bloga (to w sumie dopiero początek, muszę tylko znaleźć chwilę...) i pomyślałam, że podzielę się z Wami swoją wiedzą - tym razem na temat wyśrodkowywania różnych elementów bloga.
1. Nagłówek bloga


a) jeśli obrazek w nagłówku wgrany jest jako "zamiast tytułu i opisu".
#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}


b) jeśli obrazek w nagłówku wgrany jest jako "za tytułem i opisem".
#header-inner {background-position: center !important; width: 100% !important;}

c) wyrównanie tekstu z obrazkiem:
#header-inner {text-align: center ;}

d) i jeszcze taki fikołek: po lewej tekst, po prawej obrazek (tu trzeba pamiętać, by obrazek wstawiany w nagłówku miał mniejszą szerokość, niż blog):
#header-inner {background-position: right !important; width: 100% !important;} .titlewrapper, .descriptionwrapper {padding-right: 100px !important;}

2. Data umieszczenia posta:
.date-header {text-align:center;}

3. Tytuł posta:
.post-title {text-align:center;}

4. Zawartość widgetów:
.widget {text-align: center;}

Tym razem nie każę Wam jednak grzebać po kodzie HTML i nic kasować ;) Teraz wystarczy wejść w projektanta szablonów (Ustawienia->szablon->dostosuj), a tam zaawansowane->dodaj arkusz css (na samym dole listy). W okienko wystarczy wrzucić wybrane kody, oddzielając je enterem. I już.


DHF, rumienię się @^^@
Leno, Barbaro, żyrafa w środku, zebra na wierzchu :D
Katrinko, w imieniu Panicza dziękuję :)
Bryzeido, nie da się zaprzeczyć :)
Gabrielo, to już prawie 3 lata. Co prawda nadal jest  rozmiaru dwulatka, ale śmiga za trzech ;)
A_psik - cieszę się, że kurs się przydaje. Mam nadzieję, że i dzisiejszy odcinek Ci w czymś pomoże :)
Thebestthing - dziękuję za zaproszenie, jednak programowo nie biorę udziału w candy :)
Unusual, Anno K, zapraszam częściej - staram się co jakiś czas wrzucić jakieś sekrety blogowe ;)

27 komentarzy :

Molly pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

To tez kiedys zrobie , ale własnie dzieki Tobie mam paseczki postepu prac!!!!!!
Jesteś BOSSSSKA !!!

a_psik pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Ha, a ja dzisiaj właśnie buszowałam w "zaawansowanych" i nie wiedziałam, po co to wszystko:D
Będę zaglądać częściej, to pewne:D

Katta pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Super - dziękuję, dzięki Twoim radom wyśrodkowałam tytuły i daty postów - od dawna miałam na to ochotę
:)

bean pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję :) Dla mnie komputer to czarna magia!

Iwonka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dzięki, działa. Jest jasno wytłumaczone, a przy dodatkowej znajomości programowania można zdziałać coś jeszcze, nie za dużo, ale zawsze. Zwłaszcza, że to moje początki HTML'a.

liwias pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

A u mnie nie zaskoczyło, pojęcia nie mam dlaczego?

dom za końcem świata pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Super, dzięki! Tylko wydaje mi się, że w nagłówku w punkcie "zamiast tytułu i opisu" brakuje średników: poprawiłam u siebie i zaczęło działać:
#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}

mosia pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

wszystko świetnie wyjaśnione!
dzięki bardzo!

rice and pepper blog pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

o matko! jesteś moim guru - obserwuję, bo piszesz w łatwy (babski?) sposób :P

Jola pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

bardzo pomocne! :)
http://beansjolanta-blog.blogspot.com/

Kobieta Ekstrawagancka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję! Dużo mi to pomogło :)

Anonimowy pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

O dzięki wielkie, męczyłam się z tym godzinę :P

MÓJ BLOG

Incisivi pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dzięki wielkie!

Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates
Ten komentarz został usunięty przez autora.
Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję, dziękuję, dziękuję!
All about loui/

Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

dziękujee <33

Chwytam Szczęście pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję :)

jestemgryzli pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo sie przydało! Dziękuję! ;)

Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

A dla mnie nie działa ! Ustawiałam aby ustawiło w prawo i nic...
POMÓŻ !

mis cien animales pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

bardzo, bardzo dziękuję! :)

Nowa w wielkim mieście pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dzięki za pomoc! Szukałam tego by poprawic mojego bloga. Mam nadzieję że teraz lepiej wygląda. Pozdrawiam!

Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Gdy dodałam .widget {text-align: center;} to wyśrodkowało mi też całą zawartość postu. Jak zrobić by tylko nagłówki były wyśrodkowane?

whiteberry pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Skorzystałam z Twoich rad i bardzo mi pomogły - dziękuję ! ; )

Lilianna Serafin pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

DZIĘKI WIELKIE PIĘKNE ZA RADĘ W KOŃCU UZYSKAŁAM TAKI EFEKT JAKI CHCIAŁAM :D

Patrycja pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Przydatny wpis, te kody trochę mi upiększyły bloga :). Dodatkowo jeszcze nie trzeba długo kombinować :)

Julia pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo przydatny post, dziękuję!
A wiesz może jak wyśrodkować tytuły stron w menu, które znajduje się na samej górze bloga?

Majstermania pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję bardzo. Tak długo się męczyłem. Bardzo fajny post. Chyba go skopiuję. Pozdrawiam. Daniel (Majstermaniak)

Step 7: Then click on the save template.