Tworzymy menu strony Joomla, Gantry 5
Autor: pablop76 19 Sierpień 2023. Kategoria: Poradnik
Aby utworzyć menu przejdź do panelu Joomla i wybierz zakładkę Menu/Main Menu.
Utwórz pozycje menu - odnośniki do sekcji (O domkach, Galeria, Materiały, Karty lokali, Kontakt).
- w menu Joomla. Typ pozycji menu -> łacze systemowe -> łacze zewnetrzne i jako łacze* wpisz #. Później zamienimy go na id elementu, do którego będziemy się odnosić.
- natomiast istniejącą pozycję menu Home ustaw na typ pozycji menu* -> Gantry 5 Themes -> Custom Page oraz w zakładce Typ łącza ustaw Pokazuj w menu na nie
- Ustawiamy navbar
- Wracamy do naszego szablonu Gantry i zmieniamy w cząstce
Logo/Image
nasze logo.
Skopiuj kod svg i wklej do cząstki Logo/Image w miejsce SVG Code
edytuj cząstkę Logo/Image
zastąp/wklej kod svg w miejsce SVG Code i usuń klasy g-logo oraz g-logo-helium z zakładki CSS Classes oraz zwięsz szerokosć czastko do 25% przeciagając ja za prawą krawędź lub zmieniając wartość Block Size w zakładce Block czastki.
- W cząstce Social ikonki social zamieniamy na ikonkę telefon.
- Wracamy do naszego szablonu Gantry i zmieniamy w cząstce
Logo/Image
nasze logo.
-
Wynik dotychczasowej pracy
-
Wprowadzamy własne style
- Nasza nawigacja jest na naszym banerze więc musimy ją "odkleić". Aby to zrobić edytuj stworzony wcześniej plik header.scss i dodaj kod css
@media only all and (min-width: 48rem) { .g-home-particles.g-helium-style #g-header { margin-top: initial; } }
-
oraz w pliku navigation.scss
Klasa "logo" została dodana w zakładce "Block" cząstki Logo/Image w celu wyróżnienia interesującego nas elementu.
#g-navigation { .g-main-nav .g-toplevel { text-align: right; } .logo a { height: 50px; display: block; } a { font-weight: normal; } .fa-volume-control-phone:before { content: "\f2a0"; background-color: #fc3d2f; color: #fff; padding: 10px 12px; border-radius: 5px; } } @media only all and (max-width: 48rem) { #g-navigation { .logo a { width: 200px; margin: 0 auto; } } }
Na kocńcu zmniejszamy i centrujemy logo na urządzeniach mobilnych.
Ikonka telefonu to nie jest ikonka z projektu, ponieważ w projekcie jest użyta ikonka, której nie ma w joomla/Gantry, ale można ją łatwo zastapić wstawiając własna ikonkę do właściwości content jako url()
content: url(); //zamiast content: "\f2a0";
-
Ukrywamy ikonkę telefonu na urządzeniach mobilnych, korzystając z klasy Gantry "hidden-phone" dodając ją w zakładce "Particle" cząstki "Social" naszej nawigacji.
- Nasza nawigacja jest na naszym banerze więc musimy ją "odkleić". Aby to zrobić edytuj stworzony wcześniej plik header.scss i dodaj kod css
-
Wynik dotychczasowej pracy
Gantry posiada własne klasy, które ułatwiają szybkie konfigurowanie elementów. Znajdują sie one oczywiście w dokumentacji Gantry. Klasy użytkowe - dokumentacja