SZABLONY

  Przeczytasz w: 2 - 3 min
Prosta edycja plików LESS w szablonach JOOMLA Prosta edycja plików LESS w szablonach JOOMLA JOOMLA GURU
środa, 21 sierpień 2019 16:38

Prosta edycja plików LESS w szablonach Joomla


Edycja plików .less wcale nie musi być trudna. Jeśli potrafisz edytować pliki .css to i poradzisz sobie z .less. W Tym artykule pokaże Ci na przykładzie jak to zrobić. Twój poziom wiedzy jednak musi być większy niż nowicjusz, ponieważ niektóre zagadnienia mogą początkującemu sprawić trudność w rozumieniu.

CO TO JEST LESS

LESS jest  to dynamiczny język arkuszy stylów. To z niego generowane są pliki CSS. Dodatkowo LESS wprowadza zmienne, funkcję, zagnieżdżanie,  mapowanie czy proste funkcje matematyczne. W skrócie LESS to bliski kuzyn języków programowania. 

LESS cały czas ewoluuje i jeśli chcesz zgłębić temat bardziej to pod tym adresem możesz zacząć naukę. http://lesscss.org

Narzędzia do pisania kodu w LESS znajdziesz tutaj:

http://lesscss.org/tools/

https://magazine.joomla.org/issues/issue-may-2013/item/1289-tools-to-do-less

CASE

W naszym case zmierzymy się z czarnym polem podpowiedzi, które wygląda jak poniżej na obrazie.

czarny tooltips edycja less szablon joomla

Zacznijmy od tego, gdzie są pliki LESS w szablonach JOOMLA? Pliki LESS znajdują się w tej ścieżce: /public_html/domena.pl/templates/twoj_szablon/less/ <- Tutaj będziesz dokonywał operacji edycji plików LESS.

Skoro już wiesz gdzie są pliki LESS to przejdziemy do zdiagnozowania problemu i naprawy naszego czarnego okienka z podpowiedziami. Nie jest to najlepszy przykład, ponieważ jest bardziej złożony od zwykłego debugowania stylu naszego szablonu.
W większości przypadków da się zbadać element poprzez narzędzia developerskie wbudowane w przeglądarkę Chrome, Opera czy też Firefox. Uruchamiając skrót klawiaturowy CTRL+SHIFT+I jesteśmy w stanie zbadać jaki element nas interesuje i gdzie go możemy poprawić. Trzeba zwrócić uwagę, iż nie każdy szablon pozwala na mapowanie plików LESS. Więc w większość przypadków przeglądarka będzie man pokazywać CSS. Musisz sprawdzić, czy Twój szablon ma tryb na przykład development lub wspomniane wcześniej mapowanie plików LESS.

W tym wypadku narzędzia debugowania mogą nam tylko podpowiedzieć, że chodzi o klasę POPOVER. A więc skoro nie wiemy gdzie to szukamy w naszych plikach LESS wyrażenia "Tooltips lub popovers". 

Możemy pobrać wszystkie pliki LESS i je sprawnie przeszukać używając na przykład edytora tekstu Notepad ++ https://notepad-plus-plus.org/download/v7.7.1.html 

Wyrażenie popovers zostało znalezione w pliku bootstrap_variables.less Jest to plik, który zawiera zmienne między innymi kolorów.

edycja less zmienne

W naszym wypadku @tooltipBackgroud: @JMtooltipBackground oraz @popoverBackgroud: @tooltipBackground 

Wynika z tego, że potrzebujemy odnaleźć @JMtooltipBackground i zmienić wartość na naszą. Jeśli tej zmiennej w tym pliku niema to możemy pójść na skróty. Ponieważ LESS to tak naprawdę zaawansowany CSS nie będzie mu przeszkadzać jak w miejsce zmiennych wpiszemy stary dobry kolor w formacie HEX #FFFFFF

edycja less zmienne css

Jeśli bardzo się uprzemy i odszukamy nas interesującą zmienną, a owa zmienna znajduje się w template_variables.less to wówczas należałoby zmienić ją na @white

edycja less zmienne less

Po całym zabiegu nasz tooltips wrócił do pożądanego przez nas koloru białego.

tooltips bialy naprawiony

TIPSY

  • Nie używaj do edycji zwykłego windowsowego Notepad, Writer etc.
  • Używaj narzędzi do edycji, które są sprawdzone.
  • Notepad ++ użyj CTRL+F i opcji przeszukaj wszystkie otwarte dokumenty, gdy szukasz zmiennych.
  • Jeśli narzędzia developerskie Chrome zawodzą użyj Firefox (CTRL+SHIFT+C)
  • Większość szablonów pozwala nadpisywać pliki plikiem custom.less
  • Nie znasz się na LESS nadpisz wynikowy CSS plikiem custom.css
  • Odświeżaj stronę CTRL+F5 pominiesz wówczas CACHE przeglądarki.
  • Podczas edycji LESS wyłącz łączenie plików i wszelki CACHE.
 

Dodatkowe informacje

  • POZIOM TRUDNOŚCI 200:
Czytany 892 razy Ostatnio zmieniany środa, 21 sierpień 2019 18:50
Oceń ten artykuł
(0 głosów)
Marcin Równicki

Ekspert w dziedzinie Joomla! z długoletnim stażem. Pasjonata od czasów MAMBO, który naucza online o możliwościach Joomla! Piszę poradniki oraz prowadzi jedyny w Polsce cykl darmowego video "Joomla To Proste" w którym uczy o rozszerzonych możliwościach Joomla! Lubi optymalizować witryny, aby te działały jak najszybciej. 

Ponadto lubię dobre kino oraz seriale, dziele się recenzjami na https://cobejrzec.pl  

Spoglądam w chmury Public Cloud, gdzie staram się zgłębiać wiedzę na temat (Amazon Web Services, Azure, Google Cloud Computing)

"Jeśli coś jest niemożliwe do zrobienia, musi się znaleźć ktoś kto tego nie wie, przyjdzie i to zrobi." - A.E.

https://rownicki.pl
 

joomla guru logo small
Marcin Równicki
+48 505 892 678
Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.
Andrzeja Wajdy 5/11, Będzin 42-500
 NIP 6252158732

Fanpage Joomla Guru  youtube Joomla Guru