Dodanie poziomej linii po obu stronach daty. Design bloga.

Dziś pokażę wam jak zmienić wygląd daty na blogu, dzięki kodom CSS. Dodamy po obu stronach ozdobnik w postaci poziomej kreski, a właściwie dwóch kresek. Zawsze podobał mi się taki subtelny efekt, po przeczytaniu tego wpisu łatwo odtworzycie go na swoim blogu.

Długo szukałam podobnego tutorialu, niestety nie znalazłam gotowego przepisu. Postanowiłam, więc stworzyć go dla was. Data w naszym szablonie najczęściej definiowana jest przez selektor .date-header. Linie w tle możemy dodać na kilka sposobów. Wybierzcie taki, który najlepiej sprawdzi się na waszej stronie.

SPOSÓB PIERWSZY:
Obrazek przedstawiający poziomą kreskę umieszczamy w dowolnym serwisie hostującym grafikę, aby uzyskać kod URL. W menu bloga wchodzimy w Układ> Projektant Szablonu>Zaawansowane>Dodaj kod CSS> Wklejamy poniższy kod, uzupełniając go własnymi danymi.

.date-header:before{content: url(Kod URL Obrazka);}
.date-header:after{content: url(Kod URL Obrazka);}

 Możecie oczywiście dodać inny ozdobnik, pasujący do waszego szablonu. Ten sposób świetnie sprawdzi się jeśli chcemy umieścić obok daty dowolny obraz. Zobaczcie jaki efekt uzyskałam:

SPOSÓB DRUGI:
Nieco bardziej skomplikowany, ale preferuję taką metodę. Wchodzimy w Szablon>Tworzymy kopię zapasową (przezorny zawsze ubezpieczony)>Edytujemy kod HTML. Klikamy w dowolne miejsce kodu, wciskamy klawisze Ctr+F i w oknie wyszukiwania wpisujemy:

<h2 class='date-header'>

W moim szablonie znalazłam taki fragment kodu:

 <h2 class='date-header'><span> <data:post.dateHeader/></span></h2>

Jeśli wasz kod HTML wygląda podobnie, nie musicie nic zmieniać. W przeciwnym wypadku wystarczy dodać <span> i </span>, jak w powyższym przykładzie.
Najtrudniejsze mamy już za sobą. Następny krok to dodanie kodu CSS. Wchodzimy w Układ> Projektant Szablonu>Zaawansowane>Dodaj kod CSS:

.date-header{
  position:relative;
  text-align: center; /*WYŚRODKOWANIE TEKSTU*/
  margin-right: 100px; /*MARGINES PRAWY*/
  margin-left: 100px; /*MARGINES LEWY*/
}
.date-header:before {
  content: "";
  position: absolute;
  display: block; 
  border-top: solid 1px black; /*RODZAJ, GRUBOŚĆ, KOLOR LINII*/
  width: 100%; /*SZEROKOŚĆ, DŁUGOŚĆ NASZEJ LINII*/
  top: 50%;/*PODNIESIENIE LINII*/
  z-index: 0;/*POZYCJA NA DOLE, POD TEKSTEM*/
}
.date-header span {
  position: relative;
  background: #fff; /*KOLOR TŁA POD TEKSTEM DATY*/
  padding: 5px;  /*ODSTĘP*/
  width: 50%;/*SZEROKOŚĆ*/
  z-index: 1;/*POZYCJA NA GÓRZE*/
}


Wszystkie wartości możecie dowolnie zmieniać. Udało mi się uzyskałać taki efekt:

Mała rzecz a cieszy;)