Framework Gantry Less - dla początkujących.

[qrdziel]

Gantry framework jest to niezły szablon do tworzenia własnych templatek. Czasami konieczne jest edytowanie plików CSS lub LESS. Dlatego postanowiłem napisać krótki tutorial w którym opisuję jak za pomocą LESS dodać kolorowy pasek na samej górze strony. Jest to artykuł dla początkujących, dlatego jest prosty. Wdzięczny byłbym za komentarze. http://ictlaboratory.com/default/index.php/pl/artykuly/17-web-design/joomla/framework-gantry/5-pasek-na-gornej-krawedzi-strony

[Bazyl]

Cześć,

Artykuł dla początkujących, ale fajnie, że się dzielisz wiedzą... Nie wiem po co angielskie wstawki, skoro piszesz dla Polaków, a J! jest przetłumaczony.

p.s. Popatrz w adres swojej strony i pomyśl, jak go skrócić ;-)

[grzesiek_w]

Tylko że chłopaki z RT zalecają żeby tworzyć pliki custom.css i powtarzają to cały czas na forum do znudzenia. Ich szablony są dość często aktualizowane. Ingerencja bezpośrednio w less sprawi że po aktualizacji szablonu będzie trzeba wszystko od nowa robić.
Może przed końcem roku pojawi się Gantry 5 - chociaż pewnie już w styczniowym szablonie, nie mogę się doczekać.

[qrdziel]

Pewnie masz rację. Ale tu chciałem pokazać jak zmodyfikować LESS. Choćby po to aby wykorzystać zmienne (kolory linków).

[grzesiek2]

A ja mam takie pytanie? każdy plik less np. header-dark.less nadpisujemy header-dark-custom.less itd z wszystkimi edytowanymi plikami less? czy użycie jednego pliku np. gantry-custom.less i w nim nadpisania stylów jest nieprofesjonalne? jak to wygląda od strony twórców płatnych szablonów w oparciu o gantry? zależy mi na informacji jak powinno się to robić poprawnie, jeszcze nie dawno mówiło się że stron nie powinno budować się na tabelkach tylko na DIV-ach, dlatego pytam jak powinno się przygotowywać szablony w oparciu o Gantry?

[grzesiek_w]

Jeden plik nazwaszablonu-custom.css w katalogu css

Jeśli firma robi szablony na Gantry do dalszej odsprzedaży nie bawi się w custom.css. Pracują bezpośrednio na less. Ale już klient który szablon zakupi powinien edytować go w custom.css jeśli edycja wychodzi poza możliwości zaplecza szablonu.

custom.css jest dla takich jak ja którzy oczekują od producenta szablonu wsparcia, łatania błędów, aktualizacji a mimo to czasem są zmuszeni szablon trochę zmienić. Duża oszczędność czasu. Łatwo można kopiować całe style z innych stron.

Kiedy pojawiły się .less też grzebałem początkowo bezpośrednio - dobrze że nie szablonach stron dla klientów

[grzesiek2]

Daje ci punkt:) to co napisałeś utwierdza mnie w tym co do tej pory robiłem. Zapytam jeszcze o dwie istotne sprawy:
1.wspomniałeś że jeżeli taka firma x odsprzedaje szablony (pracując bezpośrednio na less) jeżeli nie nadpisują less, to co po aktualizacji do nowszej wersji?

2.Tworzysz szablon na Gantry np. dla klienta jednego (nie masowa sprzedaż) on nie będzie zmieniał kolumn itd zazwyczaj korzysta tylko do edytowania, dodawania informacji poprzez CMS. Natomiast ty powiedzmy pozycjonujesz tą stronę, aktualizujesz do nowszych wersji, robisz kopię zapasowa itd. W takim przypadku również korzystasz z custom.css dobrze zrozumiałem?

[grzesiek_w]

Czy korzystasz z less czy custom.css to wolny wybór, każdy zrobi jak woli
Wydaje mi się że jednak dużo zależy od tego w jakim miejscu produkcji strony jesteś.
Weźmy taki schemat w którym ja jestem webmasterem
Gantry >>> Producent szablonu (np Rockettheme) >>> Webmaster >>>> końcowy klient

Producent szablonu pracuje bezpośrednio na .less, kiedy wypuszcza poprawki szablon jest nadpisywany
Ja mam konto na RT i często po miesiącu szablon jest już w wersji 1.1 bo wynikły poprawki zauważone po wypuszczeniu szablonu. Czasem instaluję starsze szablony RT które mają wersje np 1.6 więc poprawek musiało trochę być
Nie patrzę nawet czego dotyczą te poprawki. Ale jeśli są w szablonie to pewnie w .less
Producent który chce dbać o klienta takie poprawki zapewnia.
Oczywiście mogę po wykupieniu szablonu pracować w .less ale jeśli pojawię się poprawki które sygnalizuje producent mam dwa wyjścia -
a) poszukać co poprawili i poprawić to samo - tylko ile z tym pracy, a co jeśli muszę to zrobić na kilku stronach klientów?
b) wgrać nową wersje szablonu i stracić to co zrobiłem w .less a później od nowa wprowadzić swoje zmiany
trzecie wyjście - można olać poprawki producenta może nie są ważne
Inna sprawa to czy webmaster zapewnia bezpłatne wsparcie dożywotnio ??? :)


2. Ja custom.css używam do tworzenia blacharki szablonu - czyli kolorów, gradientów, kształtów, proporcji, wielkości czcionek itp - czyli części wizualnej. Tworzę nowe style graficzne dla modułów, lub edytuję te dostarczone przez producenta szablonu. Nie ma to żadnego wpływu na działanie szablonu.
Klient jeśli chce po zapłaceniu za stronę ma pełny dostęp administracyjny. Jeśli chce może zmianiać sobie proporcje kolumn na zapleczu szablonu - w Gantry to łatwe bo są suwaki. Co prawda szkolenie które robię klientowi tego nie obejmuje.
custom.css nie ma też wpływu na pozycjonowanie czy wykonywanie kopii zapasowej.
Klient może także samodzielnie dokonać aktualizacji szablonu do nowszej wersji i moje poprawki nie zostaną nadpisane bo to co zrobię jest w pliku custom.css którego nie ma w oryginalnym szablonie i nie jest dlatego nadpisywany.
Ale żeby nadpisać szablon trzeba mieć aktywne konto na RT :)

Pewnie wielu rzeczy nie da się zrobić w custom.css ale je nie ingeruję bardzo w rozwiązania techniczne tylko wizualną stronę szablonu.

Myślę że bezpośrednio w .less nie opłaca się pracować jeśli nie chcę zajmować się samodzielnym wprawadzaniem technicznych poprawek które zapewnia producent. Jeśli tworzę szablon na Gantry samodzielnie - to inna sprawa.

[grzesiek2]

Pracowałem do tej pory na Gantry w ten sposób że tworzyłem plik custom-css i dokonywałem zmian - kolorów, rozmiarów itd. Plik ten stał się dla mnie podstawą do tworzenia np. innej strony - szybciej schodziło na dostosowaniu (wiedziałem już co za co odpowiada). Czasami nadpisywałem pliki less bo samym plikiem custom.css nie dało się wykonać pożądanej zmiany. Czytając napotkałem różne opinie i nie byłem pewny kto ma rację i czy ja to robię tak jak się powinno robić:) Ostatnio korzystam z Afterburner2 jest dużo lżejszy, pomimo że ma mniej pozycji po zainstalowaniu można je sobie dopisać w razie potrzeby. Dzięki za tak obszerne wyjaśnienie tematu, będę działał tak jak dotychczas.

[grzesiek_w]

jeśli nadpisywanie custom.css nie działa spróbuj wymusić zmiany: !important
Ja korzystam z komercyjenych szablonów RT ale czasem dla zabawy wykorzystuje plik custom tworzony dla jednego szablonu w innym - wychodzą śmieszne rzeczy
Po za tym zapoznaj się dobrze z dokumentacją - gantry ma wbudowane wiele styli- nie tylko dla modułów i tytułów

coraz częściej na RT słychać o nowej wersji Gantry 5 - więc pewnie pojawi się nowy szablon bazowy

[kacper1972]

Gantry 5 jak dobrze kojarze ma być kolo maja 2015. Wymagania dla serwera PHP 5.4. Uwaga joomla 3.4 . wg zapowiedzi gantry 5 nie będzie kontatybilne z 4. Ma być dużo zmian i kod ma być czysty, ale gantry 4 będzie jeszcze wspierane. Odsylam do bloga na stronie RT
http://www.rockettheme.com/blog/team/134-gantry5-requirements-and-details

[grzesiek_w]

Gantry 5 ma być już w lutowym komercyjnym szablonie
http://www.rockettheme.com/blog/team/163-rockettheme-s-10th-anniversary-interview-with-andy-miller
w komentarzach jest wypowiedź Andy'ego Millera, wcześniej planowali na grudzień ale nie wyszło

[szeryf75]

Wdzięczny byłbym za komentarze.

Mi się twoje artykuły bardzo się przydały, fajnie i prosto pokazane na konkretnych przykładach. Przy okazji mam pytanie, czy wiesz w którym pliku i w którym miejscu należałoby dokonać przeróbek, żeby zmienić tło pod samymi artykułami, żeby lepiej wyeksponować treść. Udało mi się na razie pozmieniać tytuły, dodać do nich jakieś ramki plus wykorzystanie twojego rozwiązania z informacjami o artykule, ale nie wiem jak dobrać się do modyfikacji pola pod treścią artykułu.

[qrdziel]

Musisz edytować plik:
/templates/gantry/less/variables.less
i tam do @bodybackground dopisujesz ścieżkę jakiegoś obrazka

[szeryf75]

Dzięki za odpowiedź. Zrobiłem tak jak napisałeś, tzn w linii 10 tego pliku dopisałem url(../images/patterns/obrazek.png), ale efekt jest taki, że mam teraz zmienione tło prawie na całej stronie, zresztą wcześniej już sprawdzałem to miejsce modyfikując sam kolor. Chciałbym zmodyfikować tylko obszar bezpośrednio pod treścią artykułu.

[qrdziel]

Nie jestem 100 % pewien, ale dopisz styl
article {url (.../images/patterns/obrazek.png);}

[qrdziel]

sprawdziłem.
Dopisałem w

gantry-core.less

// Core
article {
background-color: yellow;
}
i tło artykułu zmieniło się na żółty

[szeryf75]

Tak, to jest to, dzięki za podpowiedź, mi udało się to samo przez modyfikację pliku joomla-core.less w kilku różnych miejscach, ale twoja wskazówka jest lepsza, bo załatwiam wszystkie zmiany w jednym miejscu.