Jak to działa?

Głowna tabela ma klasę class="table_main".
Kliknij w tabelę poniżej, aby wyświetlić jej kod HTML
Jeśli chcesz dodać kolejne efekty, wystarczy, że do w.w. klasy dodasz kolejną klasę z listy poniżej. Klasy można łączyć.

• table_main - stanadrdowa tabela
• border-first i border-last - obramowania
• tr0 - usuwa margines góra dół na wierszami w tabeli
• rev - odwraca kolejność kolumn
• rev-mobile - odwraca kolejność kolumn na telefonie
• w30-70 - pierwsza kolumna ma 30%, druga 70%
• data-aos="fade-up" - animacje
• x1 small - wąska tabela, bez zdjęcia
• center - wyśrodkowuje elementy w tabeli względem osi Y
• center-x - wyśrodkowuje elementy w tabeli względem osi X
• shadow - dodaje cień do komórek w tabeli (tylko table_main)
• image-text - tekst na zdjęciu
• menu - tekst plus menu
• tabela w tabeli - możesz je łaczyć. Zobacz kilka przykładów
• cennik - różne wersje cennika
• w100p i inne - zmienia szerokość tabel
• Tabela może też mieć kilka zdjęć, jeśli jest wysoka. Dodaj zdjęcia nie używając entera.
• W tekście możesz umieszczać inne pliki używając [INCLUDE_nazwa-pliku.php]. Plik musi być w katalogu: $theme/include/

Kontentery

• Aby "wypośrodkować" tekst na stronie, umieść go w div
• Aby pod tekstem było tło na całą szerokość strony, umieść tabelę w section
  W section jest też klasa bg-image oraz dodatki: fixed cover contain
  w section dodaj też: style="background-image: url(photo/1980x10200007spurce-on-the-edge-during-the-sunrise-kwyersz.jpg);"
  W tabeli i w section możesz użyć tła:
  bg-grey bg-grey-light bg-grey-lighter bg-grey-dark bg-grey-darker bg-mark bg-mark-dark bg-mark2 bg-mark2-dark
  Dodając tło pamiętaj o paddingach:
  bg-05rem bg-1rem bg-1.5rem bg-2rem
• Jeśli chcesz umieścić na całą szerokość strony znaczniki [CODE] umieść je w aside
• Aby dodać link jako button umieść link w znaczniku nav i p, czyli nav > p > a lub dodaj do a klasę button
• Film z YouTube umieść w div class="yt-movie". Więcej przykładów jak dodawać filmy z YouTube tutaj

Dodatkowe informacje:

• Jeśli chcesz umieścić na całą szerokość strony znaczniki [CODE] umieść je w aside
• Zdjęcia do tabelki - min 800px
• Na stronie ustawiaj tabele tak, by na respo najpierw był tekst, później zdjęcie.
• Jeśli chcesz, aby tabela została zamieniona na div, użyj zamiast klasy "table_main" klasy "table_div". Uwaga, nie działa wtedy zagnieżdżanie tabel w tabeli. Używaj tylko u wybrańców.

• Dodaj do ul class = " check "

• Dodaj do ul class = " arrow "

Znaczniki [CODE]:

• [ PHONE_NUMBER ] - bez spacji, dodaje klikalny numer telefonu zdefiniowany w adminie -> Ustawienia -> Ustawienia strony
• [ PAGE_EMAIL ] - bez spacji, dodaje klikalny e-mail zdefiniowany w adminie -> Ustawienia -> Ustawienia strony
• [ ADDRESS_STREET ] - ulica i numer domu zdefiniowany w adminie -> Ustawienia -> Ustawienia strony
• [ ADDRESS_CITY ] - kod pocztowy i miejscowość zdefiniowany w adminie -> Ustawienia -> Ustawienia strony
• [ PAGE_FORM_CONTACT ] - Formularz kontaktowy, dodaj w div
• [ PAGE_FORM_CTA ] - Formularz kontaktowy CTA
• [ ADDON_typ_id_limit_limit-row_opcje ] dodaj w div

  1. typ:

  1. FAQ
  2. BLOG-BY-ID - wpisy z bloga po ID
  3. BLOG-BY-CAT - wpisy z bloga z wybranych kategorii
  4. S-PRODUKTY-BY-ID - produkty ze sklepu po ID
  5. S-PRODUKTY-BY-CAT - produkty ze sklepu w kategorii
  6. S-PRODUKTY-CAROUSEL - produkty ze sklepu z wybranych kategorii
  7. S-PRODUKTY-BY-CAT-CAROUSEL - produkty ze sklepu z wybranych kategorii
  8. S-KAT-BY-ID - kategorie ze sklepu po ID
  9. S-KAT-BY-ID-CAROUSEL - kategorie ze sklepu po ID
  10. GALLERY-BY-ID - zdjęcia z galerii o ID
  11. GALLERY-BY-ID-CAROUSEL - zdjęcia z galerii o ID, przewijane
  12. PAGES-BY-ID - treści z zakładek, wg kolejności wpisanych ID
  13. PAGES-BY-GLOWNA - treści z zakładek podrzędnych do ID, wg numeracji
  14. NUMBERS-ANIMATION - ID zakładki, która ma podzakładki. W podzakładkach: `Nazwa wyświetlana w stopce` - opcjonalny tekst wyświetlany przed animowaną cyfrą; 'Tytuł strony' - animowana cyfra; 'Treść na stronie' - opcjonalny tekst po animowanej cyfrze; `Dodatkowa treść` - opis pod cyfrą; `Zdjęcie` lub `Treść na stronie (na dole)` - ikonka;
  15. COUNT-TO-DATE - odlicza czas do określonej daty, datę w formacie Y-m-d H:i:s wpisz opcje, po średniku wpisz tekst do wyświetlenia kiedy data upłynie;

  2. id: id, jeśli kilka, wpisz rozdziel - (np. 7-14). Możesz ustawić też inną wartość niektórych wyników:

  1. FAQ, wartość: id zakładki nadrzędnej
  2. BLOG-BY-ID, wartość: nev (dla najnowszych)
  3. S-PRODUKTY-BY-ID, wartość: nev (dla najnowszych)
  4. S-PRODUKTY-CAROUSEL, wartość: NEV (najnowsze, ustaw też opcje na idDesc), PROMOWANY, NOWOSC, PROMOCJA (niższa cena lub zaznaczony checbox Promocja), BESTSELLER, OSTATNIOOGLADANEBYUSER (ostatnio oglądane przez tego użytkownika)
  5. S-KAT-BY-ID, wartość: id lub EMPTY dla wszystkich
  6. S-KAT-BY-ID-CAROUSEL, wartość: id lub EMPTY dla wszystkich
  7. GALLERY-BY-ID, wartość: nev (najnowsze zdjęcia dodane do wszystkich galerii)
  8. GALLERY-BY-ID-CAROUSEL, wartość: nev (najnowsze zdjęcia dodane do wszystkich galerii)

  3. limit - ile danych pobrać?

  4. limit-row - ile danych w rzędzie?

  5. opcje - dodatkowe parametry. Jeśli brak lub domyślne, ustaw EMPTY

  1. BLOG-BY-ID, orientacja wpisu: w (poziomy) lub h (pionowy, kwadracik)
  2. BLOG-BY-CAT, orientacja wpisu: w (poziomy) lub h (pionowy, kwadracik). Wyświetlam najnowsze wpisy, a jeśli umieszczono w artykule to połowę nowszych, połowę starszych
  3. S-PRODUKTY-CAROUSEL, sortowanie: idDesc, idAsc, priceDesc, priceAsc, EMPTY (brak), NAJCZESCIEJOGLADANE (najczęściej oglądane), OSTATNIOOGLADANE (ostatnio oglądane - ogólnie), NAJCZESCIEJKUPOWANE (najczęsciej kupowane wg zamówień)
  4. S-KAT-BY-ID, sortowanie: idDesc, idAsc, numberDesc
  5. S-KAT-BY-ID-CAROUSEL, sortowanie: idDesc, idAsc, numberDesc
  6. S-PRODUKTY-BY-CAT-CAROUSEL, sortowanie: PROMOWANY, PROMOCJA (ptaszek Promocja), BESTSELLER, idDesc, idAsc, priceDesc, priceAsc, EMPTY (brak), NAJCZESCIEJOGLADANE (najczęściej oglądane), OSTATNIOOGLADANE (ostatnio oglądane - ogólnie), NAJCZESCIEJKUPOWANE (najczęsciej kupowane wg zamówień)
  7. COUNT-TO-DATE, np.: 2024-05-05 12:30:00;Czas minął:
     0 dni 0 godzin 0 minut 0 sekund

  Przykłady:

  1. [ ADDON_FAQ_226_1_1_EMPTY ] - FAQ
  2. [ ADDON_BLOG-BY-CAT_237_4_4_h ] - Blog
  3. [ ADDON_GALLERY-BY-ID_NEV_4_4_w ] - najnowsze zdjęcia z galerii, zwróci tyle rekordów w tylu rzędach, ile ustawiono domyślnie
  4. [ ADDON_GALLERY-BY-ID_4_16_4_EMPTY ] - Zdjęcia z galerii o ID 4, zwróci 16 zdjęć po 4 w rzędzie
  5. [ ADDON_PAGES-BY-ID_1-2_1_1_EMPTY ] - Zakładka o ID 1 i 2, zwróci po 1 zakładce
  6. [ ADDON_PAGES-BY-GLOWNA_1_1_1_EMPTY ] - Zakładki, których główna to ID
  7. [ ADDON_NUMBERS-ANIMATION_1_4_4_EMPTY ] - id zakładki nadrzędnej, pobieram 4 rekordy
  8. [ ADDON_S-PRODUKTY-BY-CAT-CAROUSEL_26_8_4_EMPTY ] - produkty z danej kategorii, 26 - id kategorii, 8 produktów, 4 widoczne

Tabela z 3 komórkami lub więcej

Dodaj klasę x3 lub x4 lub x5

Tabelka z cennikiem

Poniższa tabela ma klasę price-list. Na potrzeby tego przykładu podpiąłem ją pod tabelę table_main x3, ale można wykorzystywać w innych konfiguracjach.

Tabelka z cennikiem nie mieści się na respo? Daj ją w div style="overflow:hidden-x;min-width:900px;" - zamiast 900px wpisz optymalną szerokość

W niej znajduje się kolejna tabela z klasą price-list-details

A oto kolejny przykład tabelki z cennikiem. Tym razem tabelka bez klasy table_main ale z samą klasą cennik.

A oto kolejny przykład tabelki z cennikiem. Tym razem tabelka bez klasy table_main ale z samą klasą cennik2.