Prispôsobenie vzhľadu odrážok v Joomla s využitím vlastného CSS

Ak chcete v CMS Joomla zmeniť odrážky v neusporiadanom zozname (`<ul>`) napríkad na zelené fajky, môžete to dosiahnuť pridaním vlastných CSS štýlov. Tu je postup, ako na to:

1. Vytvorte alebo upravte vlastný CSS súbor: Najprv budete potrebovať miesto, kam môžete pridať svoje vlastné CSS pravidlá. Môžete buď vytvoriť nový CSS súbor vo vašej šablóne alebo upraviť existujúci vlastný CSS súbor, ak už jeden máte. Pre účely tohto príkladu predpokladajme, že vytvárate nový súbor s názvom `custom.css`.

2. Pridajte CSS pravidlá: Otvorte váš `custom.css` súbor v textovom editore a pridajte nasledujúce CSS pravidlá. Tieto pravidlá zmenia odrážky na zelené fajky pre všetky `<ul>` zoznamy s triedou `.custom-checklist`:

   .custom-checklist ul {
     list-style: none; /* Odstráni predvolené odrážky */
     padding-left: 0; /* Odstráni predvolený odstup */
   }

   .custom-checklist ul li {
     position: relative; /* Umožní pozicionovanie fajky */
     padding-left: 1.5em; /* Vytvorí miesto pre fajku */
   }

   .custom-checklist ul li::before {
     content: "2713"; /* Unicode znak pre fajku */
     color: green; /* Farba fajky */
     position: absolute; /* Umožní presné pozicionovanie */
     left: 0; /* Pozícia vľavo */
     top: 0; /* Pozícia navrchu */
   }

3. Pridajte odkaz na váš CSS súbor: Aby sa vaše štýly aplikovali, musíte zabezpečiť, že Joomla načíta váš `custom.css` súbor. To môžete urobiť pridaním odkazu na tento súbor v súbore `index.php` vašej šablóny alebo cez administrátorské rozhranie Joomla, ak vaša šablóna podporuje pridávanie vlastných CSS súborov cez nastavenia šablóny. Ak pridávate odkaz ručne, pridajte nasledujúci kód do `<head>` sekcie súboru `index.php` vašej šablóny:

<link rel="stylesheet" href="/cesta/k/vašemu/custom.css">

Nezabudnite nahradit `/cesta/k/vašemu/custom.css` skutočnou cestou k vášmu CSS súboru.

4. Použite svoju novú triedu v obsahu: Teraz, keď máte všetko pripravené, jednoducho pridajte triedu `.custom-checklist` ku `<ul>` zoznamom, kde chcete mať zelené fajky ako odrážky. V Joomla článkoch alebo moduloch to môžete urobiť pridaním príslušnej triedy priamo do HTML kódu:

<div class="custom-checklist">
     <ul>
       <li>Odrážka 1</li>
       <li>Odrážka 2</li>
       <li>Odrážka 3</li>
     </ul>
</div>

Ďalšie vysvetľujúce informácie

Ako urobiť fajku boldom

Fajku môžete urobiť tučnou (bold) pridaním CSS vlastnosti `font-weight: bold;` do pravidla pre `::before` pseudoelement, ktorý zodpovedá za zobrazenie fajky. Vaše CSS pravidlo pre fajku by potom vyzeralo takto:

.custom-checklist ul li::before {
  content: "2713"; /* Unicode znak pre fajku */
  color: green; /* Farba fajky */
  position: absolute; /* Umožní presné pozicionovanie */
  left: 0; /* Pozícia vľavo */
  top: 0; /* Pozícia navrchu */
  font-weight: bold; /* Urobí fajku tučnou */
}

Pridaním `font-weight: bold;` do vašich CSS pravidiel sa tým zabezpečí, že fajka bude zobrazená tučne, čo zvýrazní jej výskyt v rámci zoznamu. Pamätajte, že vzhľad tučnej fajky môže závisieť aj od použitého fontu v rámci vašej stránky, pretože niektoré fonty môžu mať odlišné štýly pre normálnu a tučnú variantu znaku fajky.

Vysvetlenie čo znamená `li::before`

V CSS, `li::before` je tzv. pseudoelement, ktorý sa používa na vloženie obsahu pred obsahom vybraného elementu, v tomto prípade pred každou položkou zoznamu (`li`). Pseudoelement `::before` umožňuje tvorcom webových stránok pridať obsah, ikony, dekorácie alebo iné vizuálne prvky do HTML dokumentu bez potreby zmeny samotného HTML kódu. Pomocou `li::before` môžete napríklad vytvoriť vlastné odrážky pre položky zoznamu, pridať špeciálne ikony pred nadpisy, alebo zobraziť špecifické symboly pred odkazmi. V kombinácii s vlastnosťou `content` v CSS, `::before` umožňuje definovať, aký obsah sa má zobraziť pred vybraným elementom. Tento obsah môže byť text, Unicode znak, alebo dokonca iné CSS vlastnosti môžu byť použité na štýlovanie tohto obsahu (napríklad farba, veľkosť, typ písma). Príklad použitia `li::before` na vytvorenie vlastných odrážok vo forme zelených fajok by mohol vyzerať takto:

li::before {
  content: "\\2713"; /* Unicode znak pre fajku */
  color: green; /* Farba fajky */
  margin-right: 8px; /* Odstup od textu položky zoznamu */
  /* Ďalšie štýly na prispôsobenie vzhľadu */
}

V tomto prípade, `content: "\\2713";` určuje, že pred každou položkou zoznamu (`li`) sa zobrazí fajka. Farba fajky je nastavená na zelenú pomocou `color: green;`, a s `margin-right: 8px;` sa pridáva odstup medzi fajkou a textom položky zoznamu. Pseudoelementy ako `::before` a `::after` sú mocné nástroje v CSS, ktoré umožňujú webdesignérom efektívne prispôsobiť vzhľad webstránok bez zbytočného komplikovania HTML štruktúry.