Edycja pliku CSS (LESS) w Magento
Witaj.
Dziś kontynuujemy wątek związany z edycją popupu od Mageplaza. W związku z tym, że udało nam się zainstalować popup, teraz możemy zająć się jego edycją.
Wpierw należy połączyć się z serwerem za pomocą programu do przesyłania plików. W związku z tym, że używasz Magento, do połączenia się z serwerem użyjesz programu obsługującego protokół SFTP.
Ja używam Winscp.
Skonfiguruj go tak, abyś mógł połączyć się z serwerem.
Następnie odnajdź folder z instalacją Mageplaza Better Popup. Wyszukaj katalogu vendor, następnie mageplaza, w nim odnajdziesz module-better-popup.
Tam znajduje się kilka folderów.
Nas interesuje folder View, ponieważ tam znajdują się pliki graficzne. Wejdź do view/frontend/web/images. Tu mamy 3 pliki graficzne i trzy foldery. Otwórz folder o nazwie template 3. W nim jest plik img-content.png. Pobierz go i zacznijmy edytować.
Poprawiony plik należy teraz wgrać z powrotem do folderu, z którego pobraliśmy plik. Ścieżka u mnie wygląda następująco
html/vendor/mageplaza/module-better-popup/view/frontend/web/images/template3/img-content.png
Nadpisz plik.
Teraz musimy przeładować pamięć podręczną magento, zrobić setup upgrade oraz wygenerować pliki statyczne
bin/magento setup:upgrade bin/magento setup:static-content:deploy bin/magento cache:clean
Odśwież stronę, obrazek powinien być już podmieniony.
W moim przypadku wygląda to tak:
Spróbujmy teraz zmienić zawartość pliku CSS, w ten sposób dokonamy innych istotnych zmian na popupie. Plik CSS w rzeczywistości jest plikiem LESS.
LESS to unowocześniona wersja CSS, jego struktura jest podobna do CSS więc nie będzie problemu, żeby go edytować.
html/vendor/mageplaza/module-better-popup/view/frontend/web/css/source/_module.less
Od linii 167 zaczyna się interesująca dla nas część. To tutaj zdefiniowane są wszystkie informacje potrzebne do edycji popupu.
Zmieńmy zaokrąglone rogi w polu input, tam gdzie wprowadzany jest e-mail. Dokonajmy więc zmian:
.tmp3-input { border: none !important; border-radius: 2.5px !important; background-color: #e5e5e5 !important; height: 40px !important; font-family: sans-serif !important; width: 100%; }
Zmianę zaznaczyłem na czerwono, możesz oczywiście dokonać innej zmiany.
Ja zmieniłem rozmiar zaokrąglenia pola w którym wpisujemy e-mail oraz jego wysokość oraz dodałem width na 103%, dzięki czemu szerokość pola do wprowadzania e-maila zwiększyła się.
Co za tym idzie, nie mieści się już button, którym użytkownik potwierdza subskrypcję. Zatem przesuńmy go pod spód mniej więcej na środku szerokości pola input.
tmp3-button { position: absolute; top: 43px; right: 140px; border-radius: 17.5px; height: 35px; }
Ok. Teraz
bin/magento setup:upgrade
i na wszelki wypadek
bin/magento setup:static-content:deploy && bin/magento cache clean
Świetnie.
Odśwież stronę główną. Popup powinien już wyglądać trochę inaczej.
Poeksperymentuj z plikiem LESS i spróbuj dokonać innych zmian, jak np. zmiana czcionki czy podmiana obrazka przycisku zamykającego popup.
1 komentarz do “Mageplaza SMTP i edycja popupu z użyciem CSS (LESS) cz. II”
Możliwość komentowania została wyłączona.