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:

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

    OdpowiedzUsuń
  2. 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

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

    OdpowiedzUsuń
  4. Dziękuję :) Dla mnie komputer to czarna magia!

    OdpowiedzUsuń
  5. 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.

    OdpowiedzUsuń
  6. A u mnie nie zaskoczyło, pojęcia nie mam dlaczego?

    OdpowiedzUsuń
  7. 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;}

    OdpowiedzUsuń
  8. wszystko świetnie wyjaśnione!
    dzięki bardzo!

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

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

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

    MÓJ BLOG

    OdpowiedzUsuń
  12. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  13. Bardzo sie przydało! Dziękuję! ;)

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

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

    OdpowiedzUsuń
  16. 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?

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

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

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

    OdpowiedzUsuń
  20. 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?

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

    OdpowiedzUsuń