Poniższa porada dotyczy oprogramowania Gridbox dla CMS Joomla! - jeśli masz stronę na tym systemie, to sprawdź też inne moje porady na easyblog.pl!
W aplikacji sklepu Gridbox mamy możliwość umieszczania plakietek na produktach - mogą to być krótkie oznaczenia produktu, na przykład: "promocja", "nowość", "bestseller" itp. Dzięki tym kolorowym wstawkom internauta szybko zwróci uwagę na produkt, który chcemy uwypuklić i te właśnie drobne elementy (o ile nie przesadzimy z ich ilością) mogą być skutecznym narzędziem promocji.
Standardowo plakietki są po prostu poziomym napisem z tłem, ale czasem zdarza się, że klient chce je nieco uatrakcyjnić i pokazać jako prostą "wstążkę" w narożniku zdjęcia. Czyli chcemy zmienić takie plakietki:
na takie:
Rzecz jest dość prosta i poniżej króciutko pokażę jak można to zrobić.
Wersja krótka - wejdź na stronę swojej kategorii i edytuj ją, nadaj klasę dla listy produktów (w tym przykładzie klasa będzie miała nazwę "ribbon") następnie skopiuj kod spod filmu i wklej do edytora CSS - czyli zrób tak:
Kod do wklejenia:
.ribbon span.ba-blog-post-badge {
height: 20px;
width: 130px;
position: relative;
top: -4px;
left: -60px;
box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
font-family:'Roboto';
font-weight:400!important;
text-align: center;
font-size: 11px;
letter-spacing:1px;
line-height: 20px;
transform: rotate(-45deg);
text-transform:uppercase;
}
/*CIEŃ POD WSTĄŻKĄ - OPCJONALNIE*/
.ribbon span.ba-blog-post-badge:after {
position: absolute;
content: '';
display: block;
height: 30px;
width: 140px;
top: 11px;
left: 5px;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1)!important;
}
.ribbon .ba-blog-post.ba-store-app-product .ba-blog-post-image a{margin:1px!important}Samodzielne zmiany
Jeśli jednak chcesz dokonać własnych zmian (wielkość czcionki itd.) - poniżej znajdziesz zwięzły opis powyższego kodu - dzięki temu, nawet osoba nie znająca się zbytnio na CSS, może dokonać własnych, drobnych modyfikacji.
.ribbon span.ba-blog-post-badge {
Poniżej ustalamy pozycję, szerokość i wysokość naszej "wstążki" (najlepiej zostaw bez zmian):
height: 20px;
width: 130px;
position: relative;
top: -4px;
left: -60px;
Ten element to dwa jasne paski na górze i dole wstążki (można usunąć tę linię jeśil nie pasuje ci ten efekt, jeśli chcesz mniejsze linie zamień 4px na wartość od 1 do 3):
box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
Tu ustalamy rodzinę czcionek (wpisz taką, jakiej używasz na stronie - czasem w takich drobnych elementach lepiej wypadają czcionki węższe typu Oswald, czy Roboto Condensed)
font-family:'Roboto', sans-serif;
Tu oczywiście kolejno: grubość czcionki, wyrównanie, wielkość czcionki, rozstaw liter, wysokość linii, transformacja na duże litery:
font-weight:400!important;
text-align: center;
font-size: 11px;
letter-spacing:1px;
line-height: 20px;
text-transform:uppercase;
Obrót o 45 stopni (zostaw bez zmian):
transform: rotate(-45deg);
}
/*CIEŃ POD WSTĄŻKĄ*/
Ponieważ powyżej wykorzystaliśmy box-shadow, to o cień pod wstążką zadbamy przez:
.ribbon span.ba-blog-post-badge:after {
position: absolute;
content: '';
display: block;
height: 30px;
width: 140px;
top: 11px;
left: 5px;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1)!important;
}
(najlepiej pozostaw powyższe bez zmian lub usuń całość jeśli nie chcesz tego efektu)
Na koniec ustalamy mały margines dzięki czemu wstążka nieco wychodzi poza obrazek, co daje, jak sądzę, lepszy efekt - jeśli sądzisz inaczej, po prostu usuń całość:
.ribbon .ba-blog-post.ba-store-app-product .ba-blog-post-image a{margin:1px!important}
Karuzela
Jeśli chcesz mieć te plakietki w takiej formie również w module "karuzeli", w którym rotacyjnie prezentujemy np. najnowsze produkty, to również nadaj mu klasę "ribbon" oraz dodaj do edytora css:
.ribbon ul.carousel-type li{
overflow:hidden
}Demo z powyższymi ustawieniami znajdziesz klikając przycisk poniżej: