Witajcie! Postanowiłam wykorzystać propozycję, którą mi podaliście. Wybrałam najciekawszą oraz taką, której wiele osób poszukuje. Data posta w kółku - z pewnością pasuje ona bardziej na blogi lifestylowe, ale myślę, że wam też może się przydać. Zaczynamy!
Na sam początek powiem, że niepotrzebny nam jest HTML. Wchodzimy kolejno w Projekt >> Układ >> Projektant szablonów >> Zaawansowane >> Dodaj arkusz CSS. W białe pole wklejamy poniższy kod:
.date-header span {width: 47px; height: 47px; border-radius: 100%;}
Liczbę pikseli możemy zmieniać według własnych potrzeb. Liczba procentów odpowiada zaokrąglonym rogom kółeczka. W tego wynika, że 100% daje nam kształt koła.
Gdy chcemy zmienić kolor daty posługujemy się poniższym kodem.
.date-header span {background-color: #ffd9d9;}
Możemy wpisać inny kod koloru, który wybrać najlepiej z palety RGB dostępnej na tej stronie --> klik. Jeżeli chcecie uzyskać kolor przezroczysty, wpisujecie słowo transparent.
Położenie tekstu w dacie:
.date-header span {text-align: center;}
Aby zmienić położenie tekstu w dacie, w miejsce "center" możemy wpisać:
- center - wyśrodkowanie
- right - do prawej
- left - do lewej
Dokładniejsze ustawienie położenia daty:
.date-header span {margin: -11px -100px -85px -55px;}
Aby dokładnie ustawić położenie daty co do pixela, pogrubione wartości pisane kursywą możecie zmienić. Instrukcja pochodzi z TEGO bloga.
Instrukcja zostanie niedługo napisana na nowo, bo jest niekompletna i nieuniwersalna. - monika4451
To nie jest do końca dobra instrukcja. Wtedy tekst będzie tuż przy górnym brzegu kółka. Brakuje właściwości "padding-top". Wtedy trzeba by też zmienić wysokość lub szerokość, żeby się zgadzała.
OdpowiedzUsuńU mnie niestety ten kod nie działa;(
OdpowiedzUsuńKod dla Ciebie wygląda tak:
Usuń.date-header span {width: 60px;
height: 45px;
border-radius: 100%;
background-color: #000000;
text-align: center;
margin: -60px -60px 60px -60px;
position: absolute;
padding-top: 15px!important;}
Mam nadzieję, że teraz będzie w porządku. :)
u mnie działa, ale nie we wszystkich szablonach ;)
UsuńDziękuję Ci bardzo za chęci. Wkleiłam kod ale teraz w ogóle daty nie widać heh, zmieniłam kolor na szary,ale nadal nie widać ;/
OdpowiedzUsuńPodmieniłaś czy dokleiłaś?? Prawdopodobnie coś gdzieś nie zostało zamknięte i cała data sobie pojechała albo kompletnie znikła... Wystarczy do tego głupia literówka, brak średnika czy klamerki. Dopóki daty nie widać, nie jestem w stanie sprawdzić w czym problem, niestety.
UsuńPodmieniłam. Rozumiem, mimo wszystko bardzo dziękuje ;)
Usuńa co jak moja data jest za duża?
OdpowiedzUsuńDopóki ładnie się wyświetla na środku - nie jest chyba źle... Można kółeczko nieco powiększyć bawiąc się wysokością, szerokością i paddingiem. W najgorszym wypadku trzeba zmienić jej format...
UsuńMi się nie udaje, wgl :/ nie działa ehh
OdpowiedzUsuńTo tylko kod. Wystarczy kilka komend za dużo i następne nie zadziałają. Wiem, że nie bawi Cię rozumienie problemu i wolałabyś, żeby to magicznie zadziałało. Nie tylko Ty z resztą... Ale co ja mogę? :P
UsuńPotwierdzam. Niestety komendy nie działają (
OdpowiedzUsuń