Jak zrobić datę w kółku za pomocą CSS

04.02.2016


Jak zapewne wiecie, wygląd oraz położenie daty możemy modyfikować dowolnie za pomocą kodów CSS oraz HTML lub za pomocą samego CSS. Jakiś czas temu robiłam wpis o tym, jak zrobić datę wpisu w chorągiewce, więc teraz nadszedł czas na wpis, w którym dowiecie się jak zrobić datę wpisu w kółku za pomocą CSS i nie tylko w szablonie Awesome inc. (rewelacja), ale również w szablonie Simple (prostym) (Kody z jakimi miałam styczność na zrobienie daty w kółku, działały tylko na szablonie Rewelacja, w szablonie Prostym był z danym kodem problem i dużo osób zgłaszało błąd).

1. Wybieramy: Szablon - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy poniższy kod: (dla szablonu Simple (prosty))
.date-header span {
background-color: #ddd;
text-transform: uppercase;
text-align:center;
color: #ffffff;height:47px;
width:47px;
padding-top: 10px;padding-bottom: 2px;padding-right: 5px;padding-left: 5px;margin-right: 10px;margin-top: 10px;font-weight: 700;
float:left;
font-family: Arial;
font-size:17px;
letter-spacing: 1px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

2a. Wklejamy poniższy kod: (dla szablonu Awesome inc. (rewelacja))
.date-header span {
background-color: #000;
text-transform: uppercase;
text-align:center;
color: #ffffff;
height:47px;
width:47px;
margin: -30px 10px 10px -60px;font-weight: 700;
float:left;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;}

Czcionkę i wielkość daty w szablonie Awesome inc. ustawiamy w zakładce "Nagłówek z datą" 

Wszystkie wartości pogrubione i zaznaczone na kolorowo są zmienne. Analiza kodów:

Kolor tła daty
Kolor czcionki 
Wysokość 
Szerokość 
Górny margines wewnętrzny 
Dolny margines wewnętrzny 
Prawy margines wewnętrzny 
Lewy margines wewnętrzny 
Margines prawy
Margines górny
Marginesy 
Rodzaj czcionki 
Wielkość czcionki
Odstęp między literami/cyframi 

6 komentarzy:

  1. Fajnie, że robisz takie unikatowe tutoriale. Wiem, że jak do Ciebie wpadnę to na pewno nie uświadczę kolejnego wpisu z serii: "Darmowe czcionki" ;) Chociaż one są przydatne, w sieci ich stanowczo za dużo. W ogóle jestem pełna podziwu dla Twoich szablonów blogowych. Ja kiedyś też je lubiłam robić, ale to było w erze kenozoicznej, kiedy jeszcze wszyscy pisali na blog.pl :) Później blogger jakoś mnie zdemotywował: nie było tak łatwo i mi przeszło ;) Jednak lubię oglądać nadal twórczość szablonową innych.

    OdpowiedzUsuń
  2. Łał. Co prawda, nigdy nie próbowałam robić czegoś takiego i raczej nie zrobię, ale fajny pomysł :)

    OdpowiedzUsuń
  3. Eh szkoda, że mamy dwie lewe ręce do takich spraw. Zawsze kończy się to mega wkurzeniem xD

    OdpowiedzUsuń
  4. zlota-orchidea.blogspot.com8 lutego 2016 15:37

    Przydatne ! Pomyślę i może skorzystam ;)
    pozdrawiam
    www.zlota-orchidea.blogspot.com

    OdpowiedzUsuń
  5. Pamiętam, te czasy pisania na blog.pl i pamiętam jak się męczyłam, żeby zrobić jakiś ładny szablon, aby blog się prezentował w miarę przyzwoicie :D No, ale wtedy byłam gówniarz i w sumie nie chciało mi się nad tym tyle siedzieć, a teraz to nawet muszę :) W ogóle to jesteś drugą osobą, która pisze, że lubi moje szablony, a już zaczęłam się martwić :D
    Wiesz, dla mnie na początku Blogger również nie był jakiś przychylny, ale zaprałam się i stwierdziłam, że teraz albo nigdy ;)

    OdpowiedzUsuń
  6. Nie przesadzajmy :) Myślę, że byście sobie poradziły ;)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona