Jak zrobić datę wpisu w chorągiewce

środa, 4 lutego 2015

Były już kody CSS, na to jak zrobić datę wpisu w kółku. Już prawie większość osób, kod na datę w kółku zna. Postanowiłam, że w dzisiejszym tutorialu zapoznam was z kodem, który dotyczyć będzie daty w tzw. chorągiewce. Myślę, że będzie to miła odmiana i może akurat ktoś się skusi na to aby zmienić swoje kółeczka na chorągiewkę.

Przechodzimy do: ustawienia - język i formatowanie - format nagłówka daty i zmieniamy na format pierwszy. Następnie przechodzimy do: szablon - dostosuj - zaawansowane - dodaj arkusz CSS.

Kiedy już dostaniemy się do naszego arkusza CSS wklejamy tam kod:

.date-header span {position: absolute;
border-top: solid 3px #ccc;
margin: -2px 0px 0px 849px !important;
background: #000;
height: 50px;
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important;
font-size: 10px !important;
padding: 5px;
line-height: 14px !important;
color: #fff !important;}

Analiza kodu:

position: absolute;
border-top: solid 3px #ccc;  - rodzaj, grubość i kolor paseczka na górze daty
margin: -2px 0px 0px 849px !important; - dopasowanie daty 
background: #000; - tło daty 
height: 50px; - długość naszej chorągiewki 
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important; - rodzaj czcionki 
font-size: 10px !important; - rozmiar czcionki 
padding: 5px; - marginesy wewnętrzne  
line-height: 14px !important; - położenie daty 
color: #fff !important - kolor daty 

Wszystko co zaznaczone na kolorowo jest wartościami zmiennymi, border-radius lepiej zostawić w spokoju, ponieważ, inaczej nie uzyskamy efektu chorągiewki.

Nasza data będzie po prawej stronie, jeżeli chcemy aby była po lewej wpisujemy ten kod:

.date-header span {position: absolute;
border-top: solid 3px #ccc; 
margin: 10px 900px  0px -50px !important; 
background: #000; 
height: 50px; 
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important; 
font-size: 10px !important; 
padding: 5px; 
line-height: 14px !important; 
color: #fff !important;}

Jeśli spodobał Ci się wpis, przekaż go dalej :)