Tag: style.css
Wszystkie
Najnowsze
W motywie brakuje arkusza stylów style.css, czyli jak (prawidłowo) zainstalować kupiony motyw w WordPressie
Jednym z relatywnie częstych, a zarazem dość zabawnych błędów, jaki wiąże się z WordPressem, zwłaszcza w kontekście osób zaczynających swoją przygodę z tym CMSem, jest błąd “w motywie brakuje arkusza stylów style.css”, jaki pojawia się podczas próby instalacji motywu pobranego z jakiegoś serwisu, często, o ile nie najczęściej, dotyczy to kupnych motywów tzw. premium, gdzie po zakupie otrzymujemy najczęściej dostęp archiwum ZIP z motywem.
Zmiana wyglądu zdjęcia produktu, którego nie ma na stanie, na przykładzie sklepu internetowego na w WooCommerce
Niedawno wyrównywaliśmy wysokości wierszy w widoku katalogu produktów na przykładzie sklepu internetowego na WooCommerce, za pomocą CSSa. Dziś na tapet bierzemy główną grafikę produktu i stany magazynowe, a konkretnie zmodyfikujemy wygląd grafiki (zdjęcia) produktów, których nie ma na stanie. I choć przykład będzie na bazie sklepu internetowego na WooCommerce, to po dostosowaniu selektorów (nazw klas), bez problemu można pokazane kody wykorzystać na innych stronach. Niekoniecznie nawet sklepach internetowych…
Kod CSS dla wybranych produktów w WooCommerce, czyli gdy strona produktu ma wyglądać trochę inaczej niż pozostałe
Kilka dni temu, na “skrzynkę redakcyjną” wpłynęło “zapytanie premium” o możliwość modyfikacji pewnych elementów graficznych na stronach poszczególnych produktów. Strona działa na dobrze znanym mi motywie Divi, więc teoretycznie można by skorzystać z opcji “theme builder”, by dla wybranych produktów przygotować inny wygląd. Jednak zmiany choć drobne – zmiana koloru dla kilku wybranych elementów, to miały docelowo dotyczyć wszystkich produktów w sklepie, a więc tworzenie dla każdego produktu oddzielnego szablonu choć możliwe, to w tym przypadku raczej nie byłoby najlepszym sposobem. Zwłaszcza że wszystko można było ogarnąć dosłownie 2-3 linijkami kodu CSS.
Wykorzystanie pliku PHP jako pliku CSS na przykładzie WordPressa
Dostałem pytanie o to, czy można by w pliku style.css w WordPressie wykonać kod PHP. Wbrew temu, co się na początku może wydawać, nie jest to takie głupie, bo poza np. obsługa zmiennych (co zresztą w CSS też jest), można wykonywać dodatkowe operacje, bazując na różnych elementach, nawet tych zewnętrznych. I choć nie da się w standardowej konfiguracji webserwera w pliku CSS wykonać kodu PHP, to można CSS upakować do pliku PHP.
Jednokolumnowy widok archiwum produktów w WooCommerce na urządzeniach mobilnych, przy korzystaniu z Divi Buildera
Strona na WordPressie, do tego wtyczka WooCoommerce dla funkcji sklepu internetowego, oraz motyw Divi od Elegant Themes, a więc i Divi Builder nie tylko dla standardowych stron, ale też – korzystając ze wsparcia Divi dla WooCommerce – dla stron związanych ze sklepem. Można by rzec, że kwartet całkiem udany, całkiem dopasowany, ale… No właśnie – jak to bywa w życiu, zawsze bywa jakieś “ale”. Zwłaszcza gdy do działającego układu dołożyć “piąte koło u wozu”. Problem tylko w tym, że tym piątym kołem w tym przypadku jest mobile, a konkretnie mobilne urządzenia. A tego zignorować nie można, nawet jeśli nie w każdej branży obowiązuje “mobile first”.
Brak punktorów w opisie kursów i lekcji we wtyczce Tutor LMS (WordPress), czyli prawdopodobny konflikt z… motywem Divi
Wczoraj, podczas jakby się zdawało w pewnym sensie już rutynowego wdrożenia wtyczki Tutor LMS (platforma kursowa do WordPressa), pojawił się problem, którego do tej pory nie byłem świadom. Problem objawił się przy próbie stworzenia listy wypunktowanej w opisie kursu. Konkretnie to samą listę udało się stworzyć, bo to nic specjalnie trudnego, ale zdecydowanie nie wyświetlała się prawidłowo. Właściwie to w ogóle jako lista się nie wyświetlała…
Force Dark Mode for Web contents w Google Chrome, czyli automatyczny tryb ciemny dla wszystkich stron internetowych
Nie da się ukryć, że moda na czarne interfejsy użytkownika (dark mode) rozkręca się coraz bardziej, i wchodzi w kolejne segmenty. O ile w telefonie zazwyczaj sam chętnie korzystam, to na komputerze raczej sporadycznie – ustawiłem w sumie tylko Windowsa, Firefoxa i jakieś pojedyncze aplikacje w tryb ciemny. Ale to może dlatego, że z komputera wieczorami i w nocy korzystam rzadko, co zresztą uważam za jeden z moich większych sukcesów, jeśli chodzi o prace i rozrywkę. Tymczasem Google prezentuje w najnowszej wersji swojej przeglądarki Chrome tryb ciemny dla… wszystkich stron.
Modyfikacja wyglądu menu zależnie od (rozmiaru) urządzenia za pomocą CSSa, na przykładzie WordPressa
Troszkę zmieniałem dziś strukturę menu na stronie, i podczas rutynowych testów wyszło, że przy pewnej szerokości ekranu menu główne po zmianach nie mieści się w jednej linii, tylko łamie się na 2 wiersze. Niby drobiazg, ale ja wolę, jak menu trzyma się razem. Wymagało to malutkiej modyfikacji wyglądu strony (w pewnych warunkach) za pomocą kodu CSS, i pomyślałem, że od razu też opublikuje artykuł na ten temat… Zwłaszcza że niedawno było m.in. jak zmodyfikować zawartość menu zależnie do wielkości ekranu (schować lub pokazać tekst/etykietę), czy jak zmienić wygląd linków, zależnie od adresu, na który wskazują.
Modyfikacja wyglądu linków na podstawie docelowego adresu URL za pomocą kodu CSS (nie tylko w WordPressie)
Wczoraj opublikowałem artykuł o tym, jak za pomocą kodu CSS ustawić kolor zaznaczonego tekstu (wybrany przez nas, zamiast standardowego niebieskiego). Jest to wręcz banalna sprawa, i wszystko sprowadza się do wykorzystania jedno z tzw. pseudo-elementów dostępnych w CSSie. Z tego, co widzę, artykuł wygenerował nawet jakieś odsłony, dlatego uznałem, że będę częściej publikował tego typu małe porady. I to niezależnie od tego, czy akurat jakaś koleżanka będzie o to pytać, czy po prostu przyjdzie mi do głowy taki pomysł… ;-)
Modyfikacja koloru zaznaczonego tekstu za pomocą kodu CSS, na przykładzie strony na WordPressie
Jedna z moich koleżanek (to chyba nie pierwszy artykuł, jaki powstał w związku jaj “perypetiami” ;-)) postanowiła, że będzie hakować sukces, i w ramach wyzwania przygotuje stronę pod “pasywne zarabianie w internecie na kursach online” (taki trochę oksymoron, ale pełno teraz takich kursów, zwłaszcza w mediach społecznościowych). Strona na WordPressie, motyw Divi, a więc nawet coś tam jej wyszło. Ale zamarzyło jej się, by zaznaczony tekst podświetlał się w wybranym przez nią kolorze. Nie wiem, po co jej to, ale postanowiłem jej pomóc. Nie tylko dlatego, że sam tak na Webinsider.pl mam… ;-)
Modyfikacja zawartości menu zależnie od (rozmiaru) urządzenia za pomocą CSSa, na przykładzie WordPressa
Koleżanka właśnie kończy jedną ze stron na WordPressie (landing page), którą od strony technicznej dla niej przygotowywałem. Ja odpowiadam za sprawy techniczne i co bardziej skomplikowane elementy na stronie, a ona zajmie się warstwą graficzną. Działa to całkiem sprawnie – ja lubię elementy techniczne, a koleżanka z chęcią “bawi się” wyglądem (zwłaszcza z motywem Divi, który bardzo, ale to bardzo jej w tym kontekście pasuje). Zainspirowana ikonami w menu, które zazwyczaj dodaje na stronach (np. w menu głównym na Webinsider.pl), postanowiła takie same ikony dodać u siebie…
Dodatkowe menu i pole na widżety (sidebar) w WordPressie
Wprawdzie większość motywów – zwłaszcza tych bardziej rozbudowanych – do WordPressa ma zazwyczaj przynajmniej kilka miejsc na widżety i 1-2 miejsca na menu (choć czasem dziwnie rozmieszczonych), to warto wiedzieć, że w kilku prostych krokach możemy dodać dodatkowe miejsca tego typu, właściwie w dowolnym miejscu naszego motywu.
Aktualizacja motywu Avada (WordPress) i brak przetwarzania arkusza stylów (style.css) z motywu potomnego (child theme)
Ostatnio na jednej ze stron którą się opiekuję zdecydowaliśmy się na aktualizację motywu Avada do najnowszej wersji (5.0.6). Zmiana została celowo trochę odroczona, bo dotyczy to strony która nie tylko działa i jest też tam sklep internetowy (WooCommerce), ale i miejscami konstrukcja niektórych “fragmentów” jest dość skompilowana, co w przypadku tak dużej migracji (nowy edytor stron, nowe podejście do tematu) może oznaczać problemy…
Własna zawartość w formularzu dodawania komentarza w WordPressie (kod i wtyczka)
Na początku miał to być krotki wpis o tym, jak za pomocą kilku linijek kodu zmienić standardowy tekst jaki w WordPressie wyświetlany jest w formularzu dodawania nowego komentarza (frontend). Notatki do wpisu cały czas się rozrastały o dodatkowe możliwości, a na koniec pojawiła się jeszcze wtyczka, dla tych co wolą gotowe rozwiązanie…
4 relatywnie proste, ale przydatne wtyczki do WordPressa, które czasem mogą się przydać
Dziś chciałbym Wam przedstawić kilka prostych wtyczek do WordPressa, które powstałyby wykonać kilka relatywnie drobnych, ale – przynajmniej dla mnie – istotnych zadań…
Tworzymy motyw potomny (Child Theme) w WordPressie
Jeśli ktoś z Was był na tej stronie choćby jeszcze kilka godzin temu, to zapewne zauważył radykalną zmianę w wyglądzie – nie była to operacja zaplanowana, tym razem poszliśmy na żywioł, czego osobiście nie polecam w środowiskach produkcyjnych. W każdym razie zmiana stała się faktem, choć zostało jeszcze troszkę roboty z poznawaniem nowego szablonu i jego dopasowywaniem do własnych potrzeb. Przy okazji uświadomiłem sobie, że o ile o samym WordPressie pisałem na tej stronie kilkukrotnie, to do tej pory nie było artykułu/wpisu o “szablonach potomnych” (Child Themes), które znacznie ułatwiają pracę choćby związaną z modyfikowaniem wyglądu strony/szablonu.
Wesprzyj nas!
Promocja własna
Najnowsze wpisy
Opcja “restore_from_flash”, czyli sposób na zapamiętywanie ustawień w ESPHome na układach ESP8266
Blokowe szablony powiadomień (block notice) w WooCommerce, nawet w klasycznych motywach
Poznaj aplikację DroneTower, czyli nowy (i teoretycznie obecnie jedyny) sposób zgłaszania lotów dronami
WordPress 6.5 i “Requires Plugins”, czyli autor wtyczki może teraz w prosty sposób określić, jakie wtyczki są niezbędne (wymagane), do działania jego wtyczki
Przegląd nowości w aktualizacji 01.03.1300 oprogramowania kontrolera DJI RC (RM330)
Promocja własna
Promocja własna
