Pierwsze kroki

• MENU GŁÓWNE - to jest MENU DOMYŚLNE, które jest podpięte we wszystkich znacznikach.

  W przypadku świeżej instalacji to tutaj tworzymy MENU, ale pamiętaj aby to MENU GŁÓWNE uczynić domyślnym w Struktura - Lista menu. W przypadku instalacji na serwisie, który już istnieje należy pamiętać że do tego menu najlepiej przemigrować pozycje menu już istniejącego, lub pamiętać, żeby dotychczasowe menu podłączyć we wszystkich znacznikach XMS (numeracja między XMS:200 a XMS:600).

  Pamiętaj że po instalacji, zawsze znajduje się już `pierwotne` domyślne menu o nazwie `Menu`
• DODATKI - INNE - tutaj są strony dla LOGO, NAZWY, (ewentualnie grafika dla headera na tło), różne inne tła (domyślnie nie podpięte w standardzie), oraz teksty dla STOPKI (dla 3 kolumn, kolumny numerowane 1,2,3 licząc od lewej). Tutaj są strony zazwyczaj rzadko używane.
• DODATKI - INFO - strony do częstej edycji jak ALERTY, INFO PRZEWIJANE, Galerie, Strefa TV itd.
• AJAX - WCAG - POMOC - Uniwersalne itp - strony techniczne, automatycznie podpinane do XMSów, przeznaczone dla webmastera.
• UKRYTE POZYCJE (webmaster) - WIDOCZNE TYLKO DLA WEBMASTERA. Jeżeli jakiś klient chciałby użyć jakiegoś modułu jak sonda, adresy itd, to lepiej je przemigrować z tego menu (ponieważ niektóre mogą być automatycznie podpięte już do XMS), niż zakładać nowe i je podpinać ręcznie w znacznikach.
• NA SKRÓTY (webmaster) - to utworzone na zapas. Kiedyś się przyda.
• WEBMASTER NEW SYSTEM - tylko dla webmastera
• Menu - pamiętaj że na nowych instalacjach `świeżych`, tam zawsze jest domyślne Menu, które należy ignorować a MENU GŁÓWNE uczynić domyślnym w Struktura - Lista menu.

Istnieje 6 wariantów menu z podziałem na 2 główne systemy. Dymyślnie wybrany jest wariant nr 4.

• 1 - SmartMenu
• 2 - MegaMenu (Dystrybucja)
• 3 - MegaMenu (Normalne)
• 4 - SmartMenu - Generacja Kompletna
• 5 - MegaMenu - Generacja Kompletna (Dystrybucja)
• 6 - MegaMenu - Generacja Kompletna (Normalna)

Wariant 1,4 to silnik SmartMenu. Wykorzystuje on inny zestaw plików JS i CSS. SmartMenu generuje jeden HTML, który wykorzystywany jest zarówno w menu dla desktop jak i mobile.

Wariant 2,3,5,6 to silnik MegaMenu. MegaMenu generuje 2 różne HTMLe. Jeden dla desktop oraz drugi osobny dla mobile (tzw. Slide Nav). MegaMenu zawiera również dla dekstop 2 różne sposoby dystrybucji pozycji menu. Wariant z (Dystrybucja) automatycznie tak rozkłada pozycje podmenu oraz dalszego zagłębienia aby rozkład menu był równomierny w zależności od ustalonej liczby kolumn jak i ilości wyświetlanych pozycji level 3 zanim pojawi się link zobacz więcej. Wariant (Normalne) wyświetla podmenu w sposób bez analizowania równomiernego rozmieszczenia, priorytetowo traktuje kolejność występowania.

Konfiguracja i wybór wariantu menu odbywa się w PLIKI -> ____USTAWIENIA - Nadpisanie - Uniwersalne.

// --------------------------------------------------------------------------- // USTAWIENIA MENU // --------------------------------------------------------------------------- // TYP MENU // 1 - SmartMenu // 2 - MegaMenu (Dystrybucja) // 3 - MegaMenu (Normalne) // 4 - SmartMenu - Generacja Kompletna // 5 - MegaMenu - Generacja Kompletna (Dystrybucja) // 6 - MegaMenu - Generacja Kompletna (Normalna) MainSettingsCMSParam::setCMSParam_mainmenu_type(4);

W linijce MainSettingsCMSParam::setCMSParam_mainmenu_type(4); wstawiamy numer wariantu.

O ilości wyświetlanych pozycji podmenu kolejnych zagłębień dla wszystkich wariantów menu decydują te linijki.

//Ile zagłębienie w poszczególnych poziomach podmenu ma być generowane zanim pojawi sie link zobacz więcej MainSettingsCMSParam::setCMSParam_number_of_links_level_2(3); MainSettingsCMSParam::setCMSParam_number_of_links_level_3(3); MainSettingsCMSParam::setCMSParam_number_of_links_level_4(10); MainSettingsCMSParam::setCMSParam_number_of_links_level_5(10);

Strona do edycji linków zjaduje się w DODATKI - INFO -> HEADER - Linki - Edit. Przykładowy kod znajduje się poniżej. Należy przestrzegać składni.

<nav id="top-nav-list--links" class="header-top-nav-list-wrp top-nav-list--links animate__fadeInDown" aria-label="Menu narzędziowe"> <ul class="header-top-nav-list"> <li> <a href="" class="btn-link-header btn-link-header--theme" itemprop="url" target="_self">Deklaracja dostępności</a> </li> <li> <a href="" class="btn-link-header btn-link-header--theme" itemprop="url" target="_self">Mapa serwisu</a> </li> <li> <a href="" class="btn-link-header btn-link-header--theme" itemprop="url" target="_self">Statystyki</a> </li> </ul> </nav>

Edycja linków odbywa się w PLIKI -> ____USTAWIENIA - Nadpisanie - Uniwersalne.

// ------------------------------------------------------------------------ // USTAWIENIA LINKÓW DO SOCIAL MEDIA itd - jeżeli wartość będzie '', to linki (ikonki) nie pojawią się w header i footer SocialSettingsCMSParams::setSocialCMSParam_visible_header(true); SocialSettingsCMSParams::setSocialCMSParam_visible_footer(true); SocialSettingsCMSParams::setSocialCMSParam_epuap('/'); SocialSettingsCMSParams::setSocialCMSParam_bip('/'); SocialSettingsCMSParams::setSocialCMSParam_rss(''); SocialSettingsCMSParams::setSocialCMSParam_x(''); SocialSettingsCMSParams::setSocialCMSParam_tiktok(''); SocialSettingsCMSParams::setSocialCMSParam_discord(''); SocialSettingsCMSParams::setSocialCMSParam_facebook(''); SocialSettingsCMSParams::setSocialCMSParam_youtube(''); SocialSettingsCMSParams::setSocialCMSParam_instagram(''); SocialSettingsCMSParams::setSocialCMSParam_linkedin(''); SocialSettingsCMSParams::setSocialCMSParam_github(''); SocialSettingsCMSParams::setSocialCMSParam_gg('');

Domyślnie przygotowałem szereg ikon do pokazania. Ikony mogą pojawić się zarówno w Nagłówku jak i Stopce. Ikony w nagłówku i stopce pokazują się domyślnie. Możemy włączyć lub wyłączyć pokazywanie ikon w nagłówku i stopce osobno zmieniając wartości true lub false w z kodzie SocialSettingsCMSParams::setSocialCMSParam_visible_header(true); oraz SocialSettingsCMSParams::setSocialCMSParam_visible_footer(true);. W miejscu np. SocialSettingsCMSParams::setSocialCMSParam_epuap('/'); jak wpiszemu jakikolwiek znak, to ta ikona się pojawi. Ten schemat działania dotyczy pozostałych ikon.

Kod odpowiedzialny za wyświetlanie znajduje się w PLIKI -> HEADER - UKŁAD Uniwersalny - ELEMENTY. Tam można wtedy wstawić inne ikony. To rozwiązanie dotyczy Plan Personalizowanego i Dedyka.

Stopka w standardzie posiada 3 kolumny. Każda kolumna ma możliwość edycji treści na 3 stronach.

• DODATKI - INNE -> FOOTER - Informacje - Kolumna 1 - znacznik XMS który wstawia tą treść to [XMS:1720] FOOTER - Informacje - Kolumna 1
• DODATKI - INNE -> FOOTER - Informacje - Kolumna 2 - znacznik XMS który wstawia tą treść to [XMS:1721] FOOTER - Informacje - Kolumna 2
• DODATKI - INNE -> FOOTER - Informacje - Kolumna 3 - znacznik XMS który wstawia tą treść to [XMS:1722] FOOTER - Informacje - Kolumna 3

Różne przykłady kodu HTML dla kolumn

<strong>Urząd Gminy Cyber City</strong> <br> ul. Nowoczesna 1, <br> 12-123 Gmina Cyber City <br> Tel: <a href="tel:+48121234567">+48 12 123 45 67</a> <br> E-mail: <a href="mailto:gmina@cybercity.pl">gmina@cybercity.pl</a> // ------------------------------------------ // przykład z czernica.pl <a href="/" class="cmp-footer-brand__logo" title="Link do Gmina Czernica Urząd Gminy Czernica"> <img class="cmp-footer-info-block--logo" src="https://czernica.pl/live/pub-img-czernica/logo-czernica-footer-trans.png" alt="Gmina Czernica Urząd Gminy Czernica"> </a> <strong>Urząd Gminy Czernica</strong> <br> ul. Kolejowa 3, 55-003 Czernica <br> Tel: <a href="tel:+48717265700">+48 71 726 57 00</a> <br> E-mail: <a href="mailto:czernica@czernica.pl">czernica@czernica.pl</a> <br> Redakcja WWW-tel: 880 670 617 // ------------------------------------------ // przykład z czernica.pl <p class="cmp-footer-address cmp-footer__column-abstract"> Konto bankowe:<br> Santander Bank Polska S.A.<br> Nr 62 1090 2398 0000 0001 4728 8989<br> </p> <!-- <h4>Numery NIP:</h4> --> <div class="cmp-footer-open-hours"> <div class="cmp-footer-open-hours-item"> <div class="cmp-footer-open-hours-day">NIP Urzędu Gm. Czernica</div> <div class="cmp-footer-open-hours-time">896-13-14-672</div> </div> <div class="cmp-footer-open-hours-item"> <div class="cmp-footer-open-hours-day">NIP Gminy Czernica</div> <div class="cmp-footer-open-hours-time">912-11-01-093</div> </div> </div> // ------------------------------------------ // przykład z czernica.pl <h4>Urząd Gminy Czernica</h4> <div class="cmp-footer-open-hours"> <div class="cmp-footer-open-hours-item"> <div class="cmp-footer-open-hours-day">Poniedziałek</div> <div class="cmp-footer-open-hours-time">7:30 - 15:15</div> </div> <div class="cmp-footer-open-hours-item"> <div class="cmp-footer-open-hours-day">Wtorek</div> <div class="cmp-footer-open-hours-time">7:30 - 15:15</div> </div> <div class="cmp-footer-open-hours-item"> <div class="cmp-footer-open-hours-day">Środa</div> <div class="cmp-footer-open-hours-time">8:00 - 17:00</div> </div> <div class="cmp-footer-open-hours-item"> <div class="cmp-footer-open-hours-day">Czwartek</div> <div class="cmp-footer-open-hours-time">7:30 - 15:15</div> </div> <div class="cmp-footer-open-hours-item"> <div class="cmp-footer-open-hours-day">Piątek</div> <div class="cmp-footer-open-hours-time">7:30 - 15:15</div> </div> </div>

Kod odpowiedzialny za wyświetlanie stopki znajduje się w Pliki -> FOOTER - UKŁAD 1 - 3 Kolumny (heredoc syntax)

// poniżej musimy dodać clasę // page-layout--pos-relative // jeżeli chcemy aby obraz w div'ie powyżej .page-layotu--image-bg-picture-bottom był poniżej treści // dotyczy to każdego div'u który ma być powyżej $footer_html .= <<<HTML <div class=" page-layout page-layout-size-$settings_maxwidth_out_footer page-layout--pos-relative "> <div class=" page-layout page-layout-size-$settings_maxwidth_footer "> <div class="cmp-footer-flex-container"> <div class=" cmp-footer-flex-row cmp-flex-row-gap cmp-flex-cols-qty-3"> <div class="cmp-footer-flex-col"> <h3 class="cmp-footer-col-title" data-toggle="footer-column"> <!-- https://www.svgrepo.com/svg/361527/layers?edit=true --> <!-- layers --> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="height:20px; width:auto;" focusable="false" role="img" aria-hidden="true" viewBox="0 0 15 15"> <path stroke="none" fill-rule="evenodd" d="M7.754.82a.5.5 0 0 0-.508 0l-5.5 3.25a.5.5 0 0 0 0 .86l5.5 3.25a.5.5 0 0 0 .508 0l5.5-3.25a.5.5 0 0 0 0-.86L7.754.82ZM7.5 7.17 2.983 4.5 7.5 1.83l4.517 2.67L7.5 7.17Zm-5.93.326a.5.5 0 0 1 .684-.176l5.246 3.1 5.246-3.1a.5.5 0 1 1 .508.86l-5.5 3.25a.5.5 0 0 1-.508 0l-5.5-3.25a.5.5 0 0 1-.177-.684Zm0 3a.5.5 0 0 1 .684-.177l5.246 3.1 5.246-3.1a.5.5 0 0 1 .508.861l-5.5 3.25a.5.5 0 0 1-.508 0l-5.5-3.25a.5.5 0 0 1-.177-.684Z" clip-rule="evenodd"/> </svg> </span> Informacje </h3> <address class="cmp-footer-address cmp-footer__column-abstract" role="contentinfo" aria-label="Informacje kontaktowe {$footer_html_el_site_name}"> [XMS:1720] <!-- ///FOOTER - Informacje Adresowe - Edit --> </address> </div> <div class="cmp-footer-flex-col"> <h3 class="cmp-footer-col-title" data-toggle="footer-column"> <span class="icon"> <!-- <svg xmlns="http://www.w3.org/2000/svg" stroke="none" style="height:20px; width:auto;" focusable="false" role="img" aria-hidden="true" viewBox="0 0 60.14 46.89"> <path d="M16.86 10.17v38.06a6.83 6.83 0 1 1-13.65 0V16.89h13.65" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px" transform="translate(-2.21 -9.17)"></path> <path d="M16.86 10.17h44.49v38.06a6.83 6.83 0 0 1-6.83 6.83H10.77" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px" transform="translate(-2.21 -9.17)"></path> <path d="M22.43 8.83h14.64v14.64H22.43zM42.55 8.83h8.82M42.55 16.15h8.82M42.55 23.47h8.82M22.43 30.79h28.94M22.43 38.11h28.94" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"></path> </svg> --> <!-- https://www.svgrepo.com/svg/361498/file-text --> <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="height:20px; width:auto;" focusable="false" role="img" aria-hidden="true" viewBox="0 0 15 15"> <path stroke="none" fill-rule="evenodd" d="M3 2.5a.5.5 0 0 1 .5-.5h5.586a.5.5 0 0 1 .353.146l2.415 2.415a.5.5 0 0 1 .146.353V12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-10ZM3.5 1A1.5 1.5 0 0 0 2 2.5v10A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V4.914a1.5 1.5 0 0 0-.44-1.06l-2.414-2.415A1.5 1.5 0 0 0 9.086 1H3.5Zm1 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3Zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Z" clip-rule="evenodd"/> </svg> </span> Konto bankowe oraz NIPy </h3> <div class="cmp-footer-info cmp-footer__column-abstract"> [XMS:1721] <!-- ///FOOTER - Dodatkowe Informacje 1 - Edit --> </div> </div> <div class="cmp-footer-flex-col"> <h3 class="cmp-footer-col-title" data-toggle="footer-column"> <span class="icon"> <!-- https://www.svgrepo.com/svg/361429/clock?edit=true --> <!-- zegarek --> <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="height:20px; width:auto;" focusable="false" role="img" aria-hidden="true" viewBox="0 0 15 15"> <path stroke="none" fill-rule="evenodd" d="M7.5.877a6.623 6.623 0 1 0 0 13.246A6.623 6.623 0 0 0 7.5.877ZM1.827 7.5a5.673 5.673 0 1 1 11.346 0 5.673 5.673 0 0 1-11.346 0ZM8 4.5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 .146.354l2 2a.5.5 0 0 0 .708-.708L8 7.293V4.5Z" clip-rule="evenodd"/> </svg> </span> Godziny pracy </h3> <div class="cmp-footer-info cmp-footer__column-abstract"> <div> [XMS:1722] <!-- //FOOTER - Dodatkowe Informacje 2 - Edit --> </div> </div> </div> </div> </div> </div> </div> HTML;