Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

Data posta w kółeczku

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

11 komentarzy

  1. 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ń
  2. U mnie niestety ten kod nie działa;(

    OdpowiedzUsuń
    Odpowiedzi
    1. Kod dla Ciebie wygląda tak:
      .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. :)

      Usuń
    2. u mnie działa, ale nie we wszystkich szablonach ;)

      Usuń
  3. 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ń
    Odpowiedzi
    1. 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ń
    2. Podmieniłam. Rozumiem, mimo wszystko bardzo dziękuje ;)

      Usuń
  4. a co jak moja data jest za duża?

    OdpowiedzUsuń
    Odpowiedzi
    1. 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ń
  5. Mi się nie udaje, wgl :/ nie działa ehh

    OdpowiedzUsuń
    Odpowiedzi
    1. 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ń