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 koloru zaznaczonego tekstu
Sam nawet nie pamiętam, kiedy i po co tak sobie to ustawiłem, ale pewnie jakiś powód miałem, nawet jeśli to był tylko kaprys. W końcu, dlaczego by nie? Zwłaszcza że do uzyskania takiego efektu wystarczy jedna linijka kodu CSS. Ale zanim do niego dojdziemy, szybki rzut oka na standardowy kolor oświetlania zaznaczonego tekstu:
Dramatu nie ma, ale w tym momencie sobie przypomniałem, dlaczego u mnie dokonałem niedużej, jednakże sporej zmiany:
Chyba dużo ciekawiej, zwłaszcza jeśli spojrzeć na to w szerszym kontekście całej strony. I jak już wspomniałem, taka zmiana wymaga małej porcji kodu CSS:
::selection {
background-color: #88b15b;
color: #fff;
}
Obecnie to wystarczy, ale jakby ktoś przejmował się starszymi wersjami najpopularniejszych przeglądarek, to moża, zamiast pierwszej linijki dać taki pakiecik:
::selection, ::-moz-selection, ::-ms-selection, ::-webkit-selection, ::-o-selection {
I choć uważam, że kolor zielony używany na potrzeby Webinsider.pl (88b15b) jest bardzo ładny, to oczywiście można w tym miejscu wstawić pożądany kolor podświetlenia (jeśli zajdzie taka potrzeba, to zamiast „fff” można dać kolor tekst, tak by zachować odpowiedni kontrast).
Z racji tego, że mamy tu do czynienia z WordPressem, to możemy kod dodać w pliku „style.css” naszego motywu potomnego, w ustawieniach motywu (jeśli posiada taką opcję), czy też samego WordPressa, na ekranie personalizacji (WP-Admin: Wygląd -> Dostosuj: Dodatkowy CSS).

Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.Patryk
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.
Dumny przyjaciel swoich psów :-)
Ostatnie artykuły: Patryk (zobacz wszystkie)
- Passive Origin Monitoring i Standalone Health Checks, czyli monitorowanie działania stron i usług w CloudFlare - 1970-01-01
- Prasówka: koniec rezerwacji domen .pl, zmiana właściciela .org, kolor roku 2020, Quora po polsku, Google i YouTube w 2019, Wasteland 2 za darmo i ciekawe Humble Bundle - 1970-01-01
- Dotarła do mnie grudniowa przesyłka Mikkeller Beer Mail, a w niej 9 piw – mniej „mocarzy” niż w wakacje (!), ale za to bardziej winnie - 1970-01-01
Czemu podwójny dwukropek?
Hm… Bo to pseudo-elemnt, i tak sobie ludzie od CSSa wymyślili, że przed takimi obiektami dajemy dwa dwukropki. W tej chwili (CSS3+) jest tego już tyle, że powoli z tego język programowania się robi.