Tworzymy własna strone Joomla + Gantry 5

Joomla to popularny system zarządzania treścią (CMS), który umożliwia tworzenie i zarządzanie stronami internetowymi. Gantry 5 natomiast to zaawansowany framework do tworzenia responsywnych i elastycznych szablonów dla stron internetowych opartych na Grav, Joomla i WordPress. Dzięki Gantry 5 można tworzyć złożone i nowoczesne projekty strony internetowej bez konieczności głębokiego poznawania kodowania.

Tworzenie ustawień stylów Gantry 5

Autor: pablop76 19 Sierpień 2023. Kategoria: Poradnik

Ustawienia wstępne stylów to świetny sposób na szybkie i łatwe przełączanie między schematami kolorów i innymi opcjami stylów. W naszym przypadku usuniemy możliwość wyboru i pozostawimy tylko nasz docelowy preset.

Własne style, tworzenie nadpisania ustawień wstępnych stylu motywu.
Po ustawieniu motywy Gantry jako domyślny, w zakładce Style mamy dostep do ustawień motywu.

Aktualne ustawienia:

Nasz cel:

Aby zastąpić domyślne ustawienia stylów motywu, musisz utworzyć nowy plik presets.yaml. Ten plik zastąpi dołączone ustawienia presets.yaml. Aby wprowadzić kilka modyfikacji w istniejących ustawieniach wstępnych, należy skopiować istniejący presets.yaml znajdujący się w katalogu templates/g5_heluim/gantry i zmodyfikować go przed zapisaniem w katalogu niestandardowym templates/g5_heluim/custom/gantry.

Do edycji plików używam Visual Studio Code

Zmodyfikowany plik presets.yaml:

Nie musisz modyfikować tego pliku. Jeżeli chcesz możesz po prostu zmienić ustawienia na zapleczu joomla w zakładce motywu "Styles". Pamiętaj aby globalne ustawienia konturu zmieniać w zakładce "Base Outline"

Pierwsza linijka ustawia miniaturkę naszego presetu, którą należy umieścić w katalogu "templates/g5_helium/admin/images"

Pobierz miniaturkę lub utwórz własną.

                                        
preset1:
  image: "gantry-admin://images/preset-house-invest.png"
  description: GANTRY5_PLATFORM_PRESET1
  colors:
    - "#272F42"
    - "#F93C2E"
  styles:
    base:
      background: "#ffffff"
      text-color: "#272F42"
    accent:
      color-1: "#FC3D2F"
      color-2: "#E5E5EE"
    link:
      regular: "#272F42"
      hover: "#FC3D2F"
    font:
      family-default: "Raleway, Helvetica, Tahoma, Geneva, Arial, sans-serif"
      family-title: "Lato, Helvetica, Tahoma, Geneva, Arial, sans-serif"
    navigation:
      background: "#ffffff"
      text-color: "#272F42"
    header:
      background: "#312f38"
      background-image: ""
      background-overlay: "disabled"
      text-color: "#eceeef"
    intro:
      background: "#ffffff"
      text-color: "#272F42"
    features:
      background: "#ffffff"
      text-color: "#272F42"
    utility:
      background: "#ffffff"
      text-color: "#272F42"
    above:
      background: "#ffffff"
      text-color: "#272F42"
    testimonials:
      background: "#ffffff"
      background-image: ""
      background-overlay: "disabled"
      text-color: "#272F42"
    expanded:
      background: "#ffffff"
      text-color: "#272F42"
    footer:
      background: "#ffffff"
      text-color: "#272F42"
    offcanvas:
      background: "#ffffff"
      text-color: "#272F42"
      toggle-color: "#FC3D2F"

Ustawienie fontów
W projekcie użyty jest font "Noto Sans". Ustaw ten font zarówno dla Title Font jak i dla Body Font w zakłace Style na karcie Font Families konturu Base Outline

Własna strona, CMS Joomla, Gantry 5

Tworzenie ustawień stylów Gantry 5