Wszystko o wygląd | Webinsider - Internet widziany od środka ™

Tag: wygląd

Kilka wybranych nowości we wtyczce Tutor LMS 2.5.0 – głównie, jeśli chodzi o wiadomości e-mail, a więc raczej dla użytkowników wersji płatnej

Kilka dni temu pojawiła się aktualizacja 2.5.0 wtyczki Tutor LMS i Tutor LMS Pro (do kursów internetowych na WordPressie). Tym razem twórcy wzięli na tapet opcje związane z wiadomościami e-mail, bo co by nie mówić, to jest to element, który jest potraktowany chyba zbyt po macoszemu, by nie napisać, że jest mocno niedopracowany. Zresztą aktualizacja, choć sporo poprawiła, sporo wniosła nowego w tym zakresie, to jednocześnie pozostawiła bez zmian kilka elementów, które moim zdaniem zmienić (naprawić) koniecznie powinni…

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.

Drel Fire Stop to bezobsługowa kula gaśnicza, która w przypadku pożaru może uratować nie tylko dobytek, ale być może i życie

Kilka lat temu trafiłem na coś takiego jak kula gaśnicza, czyli kula wypełniona proszkiem gaśniczym, która w wyniku kontaktu z ogniem wybucha, rozrzucając proszek gaśniczy, a tym samym gasząc pożar. Od razu przy piwku ze znajomymi uznaliśmy, że to fajny gadżet i może warto zainwestować i zrobić testy. Szybko się okazało, że koszt kuli gaśniczej był sporo powyżej racjonalnego progu. I to nie tylko jako zakup, by od razu zniszczyć sprawdzić, czy faktycznie to działa. Lata minęły i ostatnio znowu trafiłem na kulę gaśniczą. Tym razem w zdecydowanie sensowniejszej cenie (link jest do innej oferty, bo „mojej” już nie ma), a do tego i „kieszeń inna”,  i cel inny, więc uznałem, że kupię. I tak oto zrealizowałem kolejne marzenie z młodości… ;-)

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…

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ć…

Strona ZTM w nowej odsłonie, do tego portal Warszawski Transport Publiczny na WordPressie, czyli kolejna medialna gównoburza

Wczoraj po internecie rozlała się informacja o tym, że Warszawski Transport Publiczny (strona WTP przejęła przy okazji część „zadań” od strony ZTM, która także się zmieniła) ma nową stronę. To akurat zapewne dostrzegł (prawie) każdy, kto w ostatnich dniach chciał choćby sprawdzić rozkład. No ładne to to nie jest, ale to nie wygląd czy nawet (okrojenie) funkcjonalności stoi za tym „rozgłosem” (a być może szkoda). Media – a za nimi niestety niektórzy politycy – podchwycili temat od absurdalnej strony, pokazując – moim zdaniem – swoją totalną niewiedzę w temacie, jak i to, że nieprzypadkowo mówi się, że dziennikarzy już właściwie nie ma, bo zastąpili ich pracownicy mediów…

Dropbox Transfer, czyli jakby Firefox Send, tylko z naciskiem na wersję płatną i chyba… kilka lat za późno

Od kilku dni ikona DropBoxa znajdująca się na pasku zadań domagała się mojej uwagi, ale z racji, że z tej usługi korzystam coraz rzadziej, to i o moją uwagę nie tak łatwo. W końcu spojrzałem, i okazało się, że to zaproszenie do nowej usługi działającej w ramach DropBoxa, czyli DropBox Transfer. Zaproszenie przyjąłem, choćby po to, by sprawdzić, jak wygląda w konfrontacji choćby z Firefox Send…

Dodawanie ikon do strony internetowej (np. do menu) na przykładzie Font Awesome 5 (i Dashicons) i WordPressa

Będzie o ikonach (nie tylko) w menu, czyli temacie trochę pochodnym ostatnich zmian na Webinsider.pl – ikony w menu były chyba od zawsze, ale niedawno dorobiły się ich wszystkie pozycje (w menu głównym), i od razu w statystykach widzę, że jest dużo większe zainteresowanie poszczególnymi pozycjami. Dostałem też kilka pytań, jak takie ikony wdrożyć, stąd ten artykuł…

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…

Statyczna strona główna, strona z wpisami i menu, czyli podstawy nawigacji po stronie internetowej w WordPressie

Ostatnio zapytała mnie koleżanka o dwie niby proste rzeczy związane z WordPressem – o to, jak zrobić, by po wejściu na stronę (domenę) wyświetlała się od razu konkretna strona – jako strona główna. Do tego chciałaby na stronie mieć bloga, coś tam nawet napisała, ale nie wie jak wyświetlić te wpisy na stronie, i co dodać do menu, by tam pojawiła się taka pozycja jak blog, z listą wpisów. No i by ogólnie coś z robić z menu, bo teraz są tam jakby przypadkowe strony, w przypadkowej kolejności…

Sierotki, wdowy i bękarty, czyli… o sierotkach w kontekście typografii i WordPressa słów kilka

Pomysł na ten wpis zrodził się trochę przypadkiem – konsultowałem jedną taką stronę, na której było kilka linijek tekstów, nic skomplikowanego, prosta „strona jednostronicowa”. Ale zwróciłem uwagę na to, że w kilku miejscach rażą sierotki i warto by je wyeliminować. Ale spokojnie, żadna sierota nie ucierpiała w trakcie pisania tego wpisu, i zdecydowanie z jego powodu nie ucierpi.

Loading

Pin It on Pinterest