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
• 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.

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.

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

• 1. typ:

  1. BLOG-BY-ID - wpisy z bloga po ID
  2. BLOG-BY-CAT - wpisy z bloga z wybranych kategorii
  3. S-PRODUKTY-BY-ID - produkty ze sklepu po ID
  4. S-PRODUKTY-BY-CAT - produkty ze sklepu z wybranych kategorii
  5. S-KAT-BY-ID - kategorie ze sklepu po ID
  6. GALLERY-BY-ID - zdjęcia z galerii o ID
  7. GALLERY-BY-ID-CAROUSEL - zdjęcia z galerii o ID, przewijane
  8. PAGES-BY-ID - treści z zakładek, wg kolejności wpisanych ID
  9. PAGES-BY-GLOWNA - treści z zakładek podrzędnych do ID, wg numeracji

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

  1. BLOG-BY-ID, wartość: nev (dla najnowszych)
  2. S-PRODUKTY-BY-ID, wartość: nev (dla najnowszych)
  3. S-KAT-BY-ID, wartość: nev (dla najnowszych)
  4. GALLERY-BY-ID, wartość: nev (najnowsze zdjęcia dodane do wszystkich galerii)
  5. 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. dla BLOG-BY-ID - w lub h (orientacja wpisu - pionowy lub poziomy)

  Przykłady:

  1. [ ADDON_GALLERY_NEV_4_4_w ] - najnowsze zdjęcia z galerii, zwróci tyle rekordów w tylu rzędach, ile ustawiono domyślnie
  2. [ ADDON_GALLERY_4_16_4_EMPTY ] - Zdjęcia z galerii o ID 4, zwróci 16 zdjęć po 4 w rzędzie
  3. [ ADDON_PAGES-BY-ID_1-2_1_1_EMPTY ] - Zakładka o ID 1 i 2, zwróci po 1 zakładce
  4. [ ADDON_PAGES-BY-GLOWNA_1_1_1_EMPTY ] - Zakładki, których główna to ID

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.

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.