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 Mel 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!

izosik 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 m. pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

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

Beata Staniszewska pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

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

Jolanta Wiater pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

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

ekstrawagancja ekstrawaganckiej pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

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

Marta Karolina 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!

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

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

Monika Grochola pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

dziękujee <33

testolandia81 pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję :)

Kasia Seklecka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

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

Danielle Black 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ę! :)

Jadzia 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!

Noriko Park 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ę ! ; )

Nocny Anioł 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 Wiktoria 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?

Daniel Hydzik 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.