baner

Po JA T3 przyszedł czas na przybliżenie kolejnego mojego ulubionego Frameworka Gantry ale w wersji 5 na bazie którego buduję szablony dla Joomla 3. Może za dużo powiedziane bo bardzo lubiłem Gantry 4, a Gantry 5 to zupełna nowość i uwaga nie jest w żaden sposób zgodna z Gantry 4. Tak wszystko jest inne, Gantry 5 został napisany zupełnie od nowa i niestety ale trzeba poznać go od nowa, choć filozofia się nie zmieniła ma być łatwo i przyjemnie.

W poprzednim wpisie pokazałem Państwu JA T3, w tym wpisie pokaże Państwu to samo ale na przykładzie właśnie Gantry 5. Czyli do panelu administracyjnego dodamy możliwość łatwej zmiany koloru jakiegoś elementu bez potrzeby grzebania w kodzie. Czyli użytkownik klika wybiera kolor zapisuje i już ma ten kolor zmieniony. Tak wiem piszę o bardzo złożonej rzeczy w ogóle nie przybliżając Gantry 5. Wcześniej wspomniałem, chcę odejść trochę od tych prostych rzeczy i pokazać coś ciekawego, dla ludzi z chęcią zrobienia czegoś więcej.

Pokażę Państwu jak sprawić aby z poziomu panelu administracyjnego zmienić kolor tła tego przycisku

01 co zmieniamy

 

 

A kolor tła będziemy zmieniać w tym Panelu szablonu dla Joomla 3 Gantry 5

02 gdzie dodajemy

Oczywiście analogicznie będzie można zrobić to z kolorami innych części szablonu, ale nie tylko kolorami również z marginesami czyli ze wszystkim co jest opisane w SCSS tak nie szukajmy w Gantry 5 css tego nie ma.

Uwaga – tutaj opisuje przypadek kiedy robimy swój szablon n a bazie domyślnego szablonu Gantry 5 i zmienimy jego nazwę, dlaczego – bo wtedy powinniśmy pójść inną drogą. Ja jednak założyłem, że tworzymy swój projekt na bazie tego co jest dostarczane z Gantry 5.

Teraz zastanówmy się nad wyborem elementu którym chcemy sterować, ja wybrałem przycisk menu.

Jest on opisany tutaj w pliku _nav.scss i tak wygląda ten kod:

.g-toplevel {
        > li {
            > .g-menu-item-container {
                color: $section-text-color;
            }
            &:not(.g-menu-item-type-particle):not(.g-menu-item-type-module) {
                &:hover {
                    background: darken($section-background, 6%);
                }
                &.active {
                    background: $section-active-background;
                    > .g-menu-item-container {
                        color: $section-active-text-color;
                    }
                    &.g-selected {
                        background: darken($section-background, 6%);
                        > .g-menu-item-container {
                            color: $section-text-color;
                        }
                    }
                }
            }
        }
    }


Mnie interesuje dokładnie ten fragment:

.g-menu-item-container {                                                            color: $section-text-color;                                             }

Dopiszemy do niego coś takiego

> .g-menu-item-container {                                                            color: $section-text-color;                                                            background: $navigation-background-but;                                             }

 

A więc dodaliśmy zapis, który mówi tło background: ma wartość $navigation-background-but, oczywiście jak widać nie jest to zapis do jakiego jesteśmy przyzwyczajeni czyli #ff0000 dla czerwonego. My spowodowaliśmy, że ta wartość będzie pobrana z panelu administracyjnego szablonu a więc gdzieś zapiszemy mniej więcej coś takiego $navigation-background-but = default: "#FF0000", gdzie ta wartość będzie wartością domyślną, jeśli ta wartość się zmieni zrobi to user w panelu – wiadomo zmieni się kolor tła przycisku – proste nie.

W Gantry5 mamy taki folder style w folderze blueprints – tam jest kilka plików z rozszerzeniem .yaml, każdy plik odpowiada obszarowi w panelu administracyjnym styli gantry, nas interesuje ten plik navigation.yaml otwórzmy go

I dopiszmy taki kod

   background-but:      type: input.colorpicker     label: Tło przycisku    default: "#FF0000"

proszę uważać każdy błąd we wpisie może spowodować zawieszenia szablonu, najlepiej skopiować zapis już istniejący na początek i poprawić tylko to co chcemy

Po kolei opisze znaczenie

background-but: - to jest nasza nazwa elementu który zmieniamy ale tylko część proszę zobaczyć co wpisaliśmy do pliku scss $navigation-background-but navigation to nazwa pliku zaś druga część jest już znana. Nazwa pliku plus background-but tworzy nazwę wpisaną do pliku scss.

Dalej sposób zmiany wartości przez użytkownika type: input.colorpicker – robimy to za pomoca wyboru koloru.

Dalej opis który się pojawi przy przycisku label: Tło przycisku

No na koniec wartość domyślna.

Tak to wygląda

03 w panelu szablonu

Tak oto zmieniony plik wgrywamy na serwer i już działa zmieniamy w panelu kolor tła to zmieni się nam kolor tła przycisku w menu.

04 efekt

Tak łatwe prawda – nie do końca kluczowym problemem dla nowicjuszy w gantry 5 będzie poznanie co gdzie jest opisane w scss. Ja prawie zawsze korzystam z furtki jaką jest poprawna personalizacja szablonu kiedy modyfikuje szablon. Natomiast jeśli tworzę swój projekt niestety ale duuuużo z tym pracy.


Ebook Joomla 3

ebook 2 okladka

Tutaj jest drugie wydanie ebooka o Joomla 3, dopisane jest kilka rozdziałów, jest ponad 270 stron