Modyfikacje #4 - Statystyka

(c)Brill

Witajcie! Dziś mam dla was instrukcję związaną ze statystyką bloga. Często przy robieniu szablonów, może nam umknąć taki mały szczegół, jakim jest właśnie wygląd statystyki.

Przygotowałam dla was 4 gotowe kody, który przeanalizujemy razem i będziecie mogli skopiować. 

Nie patrzcie na numery, statystyk w podglądcie i omawiane w poście(musiałam je jakoś opisać, żeby nie zmieniać wszystkich tak samo. Dlatego przy kopiowaniu kodów zmieńcie 2,3,4 na 1 po prostu).


Powyżej macie podgląd na te 4 sposoby, którymi zapisałam styl statystyki.
Zacznijmy od pierwszego sposobu.

I. Tło pod licznikiem

#Stats1 h2 {
  text-align: center;
  color: red;
  padding: 0px !important;
  margin: -10px/*górny*/ 0px/*prawy*/ 0px/*dolny*/ 0px/*lewy*/;
}

#Stats1 .widget-content {
    text-align: center !important;
  background: #444;
  padding: 15px 0;
}

#Stats1 .counter-wrapper {
  padding: 0px !important;
  letter-spacing: 1px;
  font-family: georgia;
  font-size: 20px !important;
  font-weight: normal !important;
}

Omówmy selktory, którymi będziemy się posługiwać:
#Stats1 - cały widżet statystki
#Stats1 h2 - nagłówek statystki
#Stats1 .widget-content - zawartość gadżetu, bez jego nagłówka
#Stats1 .counter-wrapper - licznik statystyki (można używać same .counter-wrapper)

1. Pierwszy punkt to edycja nagłówka gadżetu, jak widzicie jedyne co tu zrobiłam to wyśrodkowanie tytuły, zmieniłam kolor oraz dodałam ujemny margin, żeby nagłówek gadżetu był delikatnie wyżej.

#Stats1 h2 {
  text-align: center;
  color: red; /*kolor czcionki nagłówka*/
  padding: 0px !important;
  margin: -10px 0px 0px 0px;
}

Wartości margin: np. 0px 0px -20px 0px; kolejno: góra, prawo, dół, lewo.

2. Następnie zajęłam się samym .widget-content, czyli zawartością gadżetu. Postawiłam na coś prostego, czyli wyśrodkowanie tekstu, zmienieni koloru tła i mały padding.

#Stats1 .widget-content {
  text-align: center !important;
  background: #444; /*kolor tła*/
  padding: 15px 0; /*padding z góry i z dołu*/
}

3. Ostatni krok z pierwszego punktu to edycja .conter-wrapper, czyli coś co zazwyczaj ciekawi najbardziej. Tutaj również postawiłam na proste rozwiązania: usunięcie paddingu, dodanie miejsc między cyframi, zmiana czcionki, zmiana rozmiaru czcionki oraz usunięcie pogrubienia czcionki.

#Stats1 .counter-wrapper {
  padding: 0px !important;
  letter-spacing: 1px;
  font-family: georgia;
  font-size: 20px !important;
  font-weight: normal !important;
}

II. Sam licznik

#Stats1 {
  background: transparent !important;
  text-align: center;
}

#Stats1 h2 {
  display: none !important;
}

#Stats1 .counter-wrapper {
  font-family: georgia;
  font-size: 30px !important;
  color: blue;
  letter-spacing: 2px;
}

1. Pierwsze co, to 'usuwamy' tło statystyki oraz wyśrodkowujemy tekst gadżetu.

#Stats1 {
  background: transparent !important; /*przezroczyste tło*/
  text-align: center;
}

2. Następnie 'usuwamy' nagłówek statystyki.

3. W tym punkcie możecie bawić się trochę bardziej. Ja jedyne co robiłam to zmieniłam czcionkę, rozmiar czcionki, kolor czcionki i odstępy między cyframi. Jednak wy możecie tu zrobić o wiele więcej.

#Stats1 .counter-wrapper {
  font-family: georgia;
  font-size: 30px !important;
  color: blue; /*kolor czcionki statystyki*/
  letter-spacing: 2px; /*odstępy między cyframi*/
}

III. Tło pod samym licznikiem

#Stats1 h2 {
  display: none !important;
}

#Stats1 {
  text-align: center;
}

#Stats1 .counter-wrapper {
  font-family: verdana;
  font-size: 32px;
  font-weight: bold;
  font-style: italic;
  color: purple;
  background: #fff;
  padding: 4px 0;
  display: block;
  width: 200px;
  margin: 15px 60px;
}

1. Do tego sposobu są właściwie, tylko dwa kroki. W pierwszym 'usuwamy ' nagłówek statystyki:

#Stats1 h2 {
  display: none !important;
}

następnie dodając kolejny kod, dzięki, któremu tekst w gadżecie będzie wyśrodkowany:

#Stats1 {
  text-align: center;
}

2. No i tutaj jest większa zabawa, możecie robić co wam się żywnie podoba z licznikiem. Tutaj pokazała tylko podstawę, ale wy możecie dodawać inne efekty.

#Stats1 .counter-wrapper {
  font-family: verdana;
  font-size: 32px;
  font-weight: bold;
  font-style: italic;
  color: purple; /*kolor tła*/
  background: #fff; /*kolor czcionki*/
  padding: 4px 0;
  display: block;
  width: 200px;
  margin: 15px 60px;
}

IV. Trochę zabawy

#Stats4 h2 {
  background: #2a2a2a;
  text-align: center;
  padding: 4px 0px !important;
  margin: 3px 0;
  color: green;
  text-shadow: .5px .5px 0px #000;
  border-radius: 20px 20px 0px 0px;
}

#Stats4 .counter-wrapper {
  background: green;
  display: block;
  margin: -3px 0;
  padding: 4px 0;
  text-align: center !important;
  letter-spacing: 2px;
border-radius: 0px 0px 20px 20px;
}

1. W tym sposobie również są tylko dwa punkty, ale tutaj można mieć jeszcze więcej zabawy niż w poprzednich sposobach. Pierwsze zabawa zaczyna się z nagłówkiem. Dodałam kolor tła, wyśrodkowałam tekst, dodałam padding, żeby tekst nie przylegał do krawędzi tła, zmieniłam kolor czcionki, dodałam do niej cień oraz zaokrągliłam prawy i lewy górny róg.

#Stats4 h2 {
  background: #2a2a2a;
  text-align: center;
  padding: 4px 0px !important;
  margin: 3px 0;
  color: green;
  text-shadow: .5px .5px 0px #000;
  border-radius: 20px 20px 0px 0px;
}

wartości border-radius po kolei: lewy górny róg, prawy górny róg, prawy dolny róg, lewy dolny róg

2. W drugiej kolejności dopasowałam licznik do nagłówka, pasującymi kolorami oraz zaokrąglonymi dolnymi rogami.

#Stats4 .counter-wrapper {
  background: green; /*tło licznika*/
  display: block;
  margin: -3px 0; /*podniosłam licznik, żeby stykał się krawędziami z nagłówkiem*/
  padding: 4px 0;
  text-align: center !important;
  letter-spacing: 2px;
border-radius: 0px 0px 20px 20px;
}

wartości border-radius po kolei: lewy górny róg, prawy górny róg, prawy dolny róg, lewy dolny róg 

Więc tak mają się moje cztery sposoby na wygląd statystyki. Mam nadzieję, że jest to coś pomocnego. W razie pytań kierujcie je w komentarzach, zakładce "Pytania".