Listy z żółtym ptaszkiem

Jak przenieść na inną stronę

1. Skopiuj sekcję z modułem (prawy klik na sekcji › Kopiuj) i wklej na docelowej stronie, albo zapisz ją do Biblioteki Divi.
2. Skopiuj moduł Kod z tej strony i wklej na docelowej stronie — w nim siedzi cały CSS, więc moduł działa od razu.
3. Gdy moduł zostaje na stałe: przenieś CSS z modułu Kod do arkusza motywu, a moduł Kod skasuj.

Ustawienia w Divi

• Wpisz listę w treść modułu Tekst i nadaj klasę znacznikowi <ul>.
• W module Tekst ustaw Projekt › Lista nieuporządkowana › Wysokość linii na 1.7em.
• Nie usuwaj punktora ręcznie w edytorze — robi to CSS.

Pułapki i uwagi

• Ptaszek nie jest ikoną z Font Awesome, tylko dwoma krawędziami div obróconymi o 45°. Stara strona 4hand.net używała Font Awesome — tutaj nie ma zewnętrznej zależności.
• Warianty różnią się położeniem ptaszka: top: 0.9em dla wersji z kreską, top: 0.2em dla wersji bez. To nie pomyłka — kreska zmienia wysokość wiersza.
• Wymagane jest wyzerowanie list-style i padding-left, inaczej po ukryciu punktora cała lista zostaje przesunięta w prawo.
• Wariant list-checks-clean jest w tej chwili jedynym używanym na stronie. Wersja z kreską została odtworzona z historii projektu i nie ma jej w CSS witryny — działa wyłącznie dzięki modułowi Kod na tej stronie.

Kod CSS — do skopiowania

/* =====================================================
   LISTY Z PTASZKIEM — dwa warianty
   ===================================================== */

/* ----- Wariant Z KRESKĄ rozdzielającą ----- */
ul.list-checks,
.et_pb_text ul.list-checks {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1em !important;
  margin-left: 0 !important;
}

ul.list-checks li,
.et_pb_text ul.list-checks li {
  list-style: none !important;
  padding: 0.65em 0 0.65em 1.8em !important;
  margin: 0 !important;
  position: relative !important;
  border-bottom: 1px solid #e5e5e5;
}

ul.list-checks li:last-child {
  border-bottom: none;
}

ul.list-checks li::before {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 0.9em;
  width: 0.4em;
  height: 0.7em;
  border-right: 0.25em solid #F0C609;
  border-bottom: 0.25em solid #F0C609;
  transform: rotate(45deg);
}

ul.list-checks li::marker { display: none !important; }


/* ----- Wariant BEZ kreski (używany na stronie głównej) ----- */
ul.list-checks-clean,
.et_pb_text ul.list-checks-clean {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1em !important;
  margin-left: 0 !important;
}

ul.list-checks-clean li,
.et_pb_text ul.list-checks-clean li {
  list-style: none !important;
  padding: 0em 0 0em 1.8em !important;
  margin: 0 !important;
  position: relative !important;
}

ul.list-checks-clean li::before {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 0.2em;
  width: 0.4em;
  height: 0.7em;
  border-right: 0.25em solid #F0C609;
  border-bottom: 0.25em solid #F0C609;
  transform: rotate(45deg);
}

ul.list-checks-clean li::marker { display: none !important; }

Ten sam kod jest w module Kod poniżej (etykieta „CSS modułu”) — dlatego moduł działa na tej stronie samodzielnie. Drugi moduł Kod odpowiada tylko za wygląd tego opisu i nie należy go kopiować.