Wszystko o css | Webinsider - Internet widziany od środka ™

Tag: css

Sterowanie zachowaniem segmentów w module akordeonu w motywie Divi za pomocą kodu CSS i JavaScript, czyli sam decydujesz, co ma być na początku otwarte, a co zamknięte

Napisała do mnie z prośbą o pomoc i konsultację czytelniczka, która – jak to określiła – czuje się nabita w butelkę, bo „kobieta uwierzyła kobiecie”, że nie musi mieć żadnej wiedzy technicznej, by w jedno popołudnie wyklikać sobie stronę, a w weekend nawet i sklep internetowy. No cóż, temat „wyklikanych w stronę” (taka kontekstowa wersja nabitych w butelkę) mam na liście i prędzej czy później i nad nim się pochylę, ale to nie dziś. Dziś zajmiemy się z jednym z tematów, z którymi zwróciła się do mnie wspomniana czytelniczka i obecnie już też i klientka.

Divi AI Image Editor i Divi Code AI, czyli w Divi za pomocą AI już nie tylko wygenerujesz tekst i grafikę, ale też ją zmodyfikujesz, a nawet wygenerujesz kod CSS, HTML i JavaScript

Dziś w kontekście AI (Sztucznej Inteligencji, SI) pewnie wypadałoby napisać o nowym „produkcie” od OpenAI, czyli Sora, czyli nowym modelu do generowania filmów wideo, przy którym liczne serwisy do generowania wideo za pomocą AI wypadają… No średnio, ale to i tak będzie eufemizm. Ja jednak uznałem, że to dobry moment, by nadrobić zaległości w kontekście AI i motywu Divi do WordPressa.

Wymagane pole w formularzu HTML dostępne w trybie tylko do odczytu, czyli łączenie tego, czego łączyć się zazwyczaj nie powinno

Przy okazji prac nad nową wersją (web) aplikacji do zgłaszania lotów dronami, która powstała z powodu problemów z działaniem DroneRadar, pojawił się pomysł, by niektóre pola ustawić tylko do odczytu, bo w nich są prezentowane informacje, które są wynikiem działania różnych skryptów i nic tam nie powinno być ręcznie modyfikowane. Jest to dość prosta operacja, bo sprowadza się do dodania tagu „readonly” np. do pola typu „input” lub „textarea”. Sytuacja jednak skomplikowała się w przypadku jednego z pól formularza, które choć najlepiej, by było właśnie tylko do odczytu, to jednak koniecznie musiało też być polem wymaganym do wypełnienia. Pozornie się kłoci ze sobą, ale tylko pozornie… ;-)

Dodawanie własnych etykiet (odznak, badge), np. na zdjęciach produktów w sklepie internetowym na WooCommerce

Dostałem zapytanie od czytelniczki (i klientki naszego sklepu internetowego), jakiej wtyczki właśnie w naszym sklepie używamy do wyświetlania dodatkowych etykiet (po angielsku „badge”, więc tłumacząc dosłownie, będzie to odznaka) na zdjęciach produktów. I choć mógłbym zgodnie z prawdą podać nazwę wtyczki, to nic by to nie dało, bo jest to wtyczka napisana specjalnie na potrzeby naszego sklepu, specjalnie na potrzeby wyświetlania właśnie tych etykiet (odznak). Mogę jednak pokazać, jak szybko w prosty sposób, za pomocą kilku linijek kodu, wdrożyć coś takiego w swoim sklepie.

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.

DroneMap PANSA, czyli nowa oficjalna mapa ze strefami dla pilotów dronów, choć (jeszcze?) nie zastąpi aplikacji DroneRadar

Aplikacja DroneRadar – jak się zdaje – powoli umiera. Na telefonach z najnowszym Androidem w ogóle nie da się jej zainstalować z Google Play i trzeba kombinować „alternatywnym obiegiem”. Zresztą nawet jak aplikacja działa, to sporo odstaje od obecnych standardów. O ewentualnej aktualizacji coś tam słychać, ale nie bardzo wiadomo kiedy. Nie zdziwiłbym się, gdyby jej porządna aktualizacja w sensownych ramach (nakład pracy) w ogóle nie była możliwa. Widać w PAŻP/ULC mogą myśleć podobnie, bo właśnie zaprezentowano nowy system do przeglądania stref, dedykowany pilotom dronów.

Brak akceptacji nowego regulaminu w przeciągu 3 dni, będzie skutkowało nałożeniem tymczasowej blokady konta Allegro, czyli kolejna próba wyłudzenia danych logowania

O próbach oszustwa piszę dość rzadko. Nie tylko dlatego, że większość jest do siebie podobna i właściwie nie ma co w koło powielać tematu „w nowych szatach”. Ale również dlatego, że mało kiedy jakieś wiadomości tego typu przebiją się – przynajmniej jak ta, cześciowo – przez filtry, a tylko takim, którym się to uda – przynajmniej częściowo, ewentualnie warto poświęcić uwagę, bo to oznacza, że mogą uniknąć filtrów również w skrzynkach innych. I tak na jedną za „ze skrzynek kontrolnych” zawitał e-mail „od Allegro”, z informacją o tym, że „muszę zaakceptować nowy regulamin w ciągu 3 dni, by uniknąć blokady konta”. Klasyka, która jednak czasem działa, jak trafi na podatny grunt.

Wyrównywanie wyglądu zdjęć produktów w widoku archiwum produktów w WooCommerce na przykładzie CSSa i object-fit

Ostatnio odbyłem kolejną rozmowę z cyklu „mamy 2023 i CSSem zrobisz wszystko, więc po co…”. Tym razem (znowu) poszło o nierówne miniatury zdjęć produktów w widoku archiwum WooCommerce (choć w widoku strony produktu też ten problem występuje, choć trudniej pokazać porównanie). Ja pomimo tego, że faktycznie mamy 2023, oraz faktycznie CSSem można zrobić cuda, nadal uważam, że jeśli tylko można, lepiej już na etapie przygotowania zdjęć zadbać nie tylko o ich rozmiar, ale i proporcje. Mój (kolejny) oponent pełen wiary w CSS w 2023 roku twierdził, że nie ma takiej potrzeby, bo mamy przecież object-fit…

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…

Wyrównanie wysokości wierszy w widoku katalogu produktów na przykładzie sklepu internetowego na WooCommerce

Jednym z częstszych tematów, z jakimi zwracają się do mnie „osoby z zewnątrz” w kontekście WooCommerce, jest wyrównanie wysokości, na jakiej znajdują się przyciski „dodaj do koszyka” i „wybierz opcje” w widoku listy produktów, czyli archiwum, w przypadku, gdy produkty mają różnej długości tytuły. I choć jest to właściwie tylko kwestia wizualna, niemająca żadnego przełożenia na działanie sklepu, to rozumiem problem, bo sam też tak preferuję. I choć są to łatwe i szybkie pieniądze, do tego z łatwym do osiągnięcia efektem zadowolenia po stronie klienta, to zamykam ten „kran z pieniędzmi” i pokażę, jak taki efekt uzyskać samodzielnie. Do tego w bardzo prosty sposób, bo za pomocą odrobiny CSSa…

Zmiana kolejności wyświetlania kolumn w widoku mobilnym za pomocą CSSa na przykładzie WordPressa, WooCommerce i Divi

Trafiłem dziś na pytanie na temat zmiany kolejności wyświetlania paska bocznego (sidebar) i listy produktów w widoku archiwum WooCommerce (sklep internetowy na WordPressie) dla urządzeń mobilnych, gdzie w standardzie wyświetlają się najpierw produkty, a potem zawartość paska bocznego (widżety), niezależnie od tego, czy będzie on standardowo po lewej, czy prawej stronie. Co ma zresztą sens, bo nawet jeśli w bocznej sekcji – tak jak w tym przypadku było – są filtry produktów, to jednak produktami będą zainteresowani raczej wszyscy odwiedzający sklep, a filtrami tylko niektórzy.

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.

Ukrywanie lub modyfikacja wyglądu liczby produktów w tytule kategorii w WooCommerce

Trafiłem na pytanie, jak skasować (wyłączyć) liczby pojawiające się przy nazwach kategorii w sklepie działającym na WooCommerce (WordPress). Szybko udzieliłem odpowiedzi, ale od razu też pomyślałem, że chyba jeszcze nie pisałem o tym na Webisndier.pl, a więc pora to nadrobić…

Dodatkowa zawartość nad lub pod przyciskiem „dodaj do koszyka” w sklepie internetowym na WooCommerce

Dziś na warsztat bierzemy przycisk „dodaj do koszyka” w sklepie internetowym na WooCommerce. Z tym że nie będziemy banalnie zmieniać jego treści, a dodamy własny tekst nad lub pod ten przycisk, co – jak się zaraz okaże – jest zadaniem chyba równie banalnym… ;-)

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.

Prosty sposób na zapytania ofertowe w WooCommerce z podstawową obsługą wariantów na bazie wtyczki Contact Form 7

Kilka dni temu opublikowałem artykuł (poradnik) o tym, jak można za pomocą standardowe mechanizmy WooCommerce  (m.in. koszyk) wykorzystać do umożliwienia wysyłania zapytań ofertowych w ramach sklepu przerobionego na katalog. Choć to rozwiązanie ma wiele zalet (powinno zadziałać nawet z nietypowymi konfiguratorami produktu), to sprawdzi się tylko tam, gdzie nie ma „przy okazji” klasycznego sklepu, bo modyfikacje są nie tylko spore, ale też globalne (znika np. klasyczny koszyk, czy przyciski „dodaj do koszyka”). W wielu sytuacjach jednak nie tylko nie ma co wyciągać aż takich dział. Zwłaszcza gdy zapytanie o produkt, ma być tylko dodatkiem do sklepu internetowego.

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”.

Alternatywne wykorzystanie pola „ciąg dalszy adresu” w sklepie internetowym na WooCommerce, czyli kondygnacja głupcze! ;-)

W WooCommerce – tak, jak w wielu innych systemach – pole przeznaczone na wpisanie ulicy i numeru domu (oraz ewentualnie mieszkania) składa się z dwóch linijek – podstawowejm, oraz opcjonalnej, przeznaczonej na „ciąg dalszy adresu”. W większości przypadków jest to pole wręcz zbyteczne, stąd czasem jest nawet ukrywane, w ramach upraszczania formularza. Ostatnio jednak „konsultowałem” sytuację odwrotną – nie tylko go nie chowamy, ale wręcz „przywracamy” etykietę tego pola, oraz robimy, by było wymagane.

Ukrywanie znaczka Google reCAPTCHA v3 na stronie za pomocą CSSa i wynikający z tego dodatkowy obowiązek informacyjny

SPAM właściwie stał się naszą codziennością. I nie dotyczy to tylko skrzynek e-mail, ale również stron. SPAMerzy – zazwyczaj nie oni bezpośrednio, ale używane przez nich skrypty – nieustannie przeczesują internet w poszukiwaniu jakiegokolwiek miejsca, gdzie można by cokolwiek wypełnić. A nuż się uda i SPAM trafi na podatny grunt. Jednym z wektorów ataku są formularze na stronie internetowej. Sposobów ochrony jest sporo, a jednym z popularniejszych, a zarazem najskuteczniejszych jest mechanizm Google reCAPTCHA v3. Jego niewątpliwą zaletą jest też to, że choć zatrzymuje SPAM, to właściwie nie wpływa w żaden sposób na użytkownika, bo ten w większości przypadków może nawet nie wiedzieć, że reCAPCHA v3 chroni stronę.

Loading

Promocja własna

WordPress: Pierwsze kroki

Promocja własna

LUTy dla D-Cinelike (DJI Mini 3 Pro, DJI Avata, OSMO Pocket) od MiniFly

Promocja własna

WordPress: Pierwsze kroki

Pin It on Pinterest