Wstęp
Od 2013 roku na większości stron pojawia się nam informacja o wykorzystywaniu plików "cookies" na stronie. Przyjęcie procedury pozyskiwania zgody na stosowanie "cookies" wynika z przepisów znowelizowanej ustawy Prawa Telekomunikacyjnego, która weszła w życie 22 marca 2013 roku. Nowelizacja ta bazuje na ogólnych wytycznych Parlamentu Europejskiego, jednak poszczególne kraje Unii Europejskiej samodzielnie wypracowują przepisy szczegółowe. Jak więc dodać na swoją stronę taka informację i dostosować ją do swoich potrzeb żeby wyglądała ładnie.
Zaczynamy
Zaczniemy od ściągnięcia i dodania wtyczki: Cookie Notice by dFactory. Wtyczka ta jest darmowa i spolszczona więc nikt nie będzie miał z nią żadnych problemów. Jej konfiguracja jest banalnie prosta. W menu admina wchodzimy w Ustawienia i następnie Ciasteczka.
Ustawiamy ogólnie komentarz, guziki i jeśli chcemy to fajną i przydatna opcję która automatycznie zamyka powiadomienie po zjechaniu na stronie o zdefiniowaną liczbę pixeli.
Stylowanie
Teraz pokażemy, jak w kilku prostych krokach dopasować wygląd do naszych potrzeb. Zaczniemy od zmiany koloru paska głównego, dodaniu cienia i przeźroczystości oraz ostylowaniu guzika "OK". Wszystko znajdziemy w kilku linijkach kodu CSS który znajdziecie poniżej. Kod wklejamy najlepiej do pliku style.css naszego szablonu potomnego (Child Theme).
#cookie-notice {
box-shadow: 0 0 18px -5px rgba(0,0,0,0.1);
background-color: rgba(255, 255, 255, 0.97) !important;
font-size: 14px !important;
font-family: "Roboto", sans-serif !important;
color: #4f5459 !important;
}
#cookie-notice .button.bootstrap {
font-family: "Roboto", sans-serif !important;
font-weight: 300 !important;
background-color: #0074BE !important;
color: #fff !important;
font-size: 14px;
line-height: 14px;
padding: 7px 12px;
text-transform: uppercase;
position: relative;
border-radius: 3px;
border: none !important;
text-shadow: none !important;
box-shadow: none !important;
background-image: none !important;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
display: inline-block !important;
margin-left: 5px !important;
}
#cookie-notice .button.bootstrap:hover {
background-color: #0094E0 !important;
}
Dzięki temu nasz pasek i guzik zaczną wyglądać dużo ładniej i nowocześniej niż w oryginale. Dodatkowo jeśli chcemy jeszcze bardziej ubarwić nasz pasek możemy dodać obrazek z ciasteczkiem. My taki obrazek przygotowaliśmy w programie Affinity Designer, który polecamy do tworzenia wszelakich grafik wektorowych. Program możecie przetestować za darmo tutaj: https://affinity.serif.com/en-us/designer/. Niestety program jest tylko dla użytkowników OSX, więc użytkownikom Windows pozostaje skorzystanie z Corela lub Illustratora od Adobe.
Przygotowanie takiego pliku dla wprawionej osoby jest stosunkowo bardzo proste i zajmuje kilka min. Dla tych którym nie chce się bawić w rysowanie przygotowaliśmy gotową paczkę zip z plikiem w formacie SVG oraz EPS: cookie.zip
Skoro mamy przygotowany nasz plik cookie.svg to wgrywamy go do biblioteki mediów. Pamietamy również o tym, żeby w naszej informacji o plikach cookies znalazł się kod odpowiedzialny za wyświetlanie obrazka.
Teraz pozostaje nam już tylko ostylowanie obrazka:
.cookie-icon {
width: 80px;
height: 79px;
display: inline-block;
background-image: url(/content/images/2016/02/cookie.svg);
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 3em;
}
@media only screen and (max-width: 780px) {
.cookie-icon {
display: none !important;
}
}
Dzięki temu nasz obrazek pokaże się zawsze w rogu i nie będzie wyświetlany na wyświetlaczach z mniejszą rozdzielczością.
A poniżej efekt finalny na naszej stronie firmowej www.nayma.pl:
A może wy macie jeszcze jakieś inne doświadczenia i ciekawe pomysły na informację o "cookies" ?? Zapraszamy do komentowania.