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!
Moduł "Slider postów" nie posiada zbyt wielu wbudowanych opcji konfiguracji obrazka wprowadzającego, więc jeśli chcemy mieć na przykład okrągłe obrazki - musimy odwołać się do CSS. W tym przykładzie załóżmy, że chcemy właśnie coś takiego:
Wszystko co musimy zrobić, to nadać klasę do "Slajdera postów" (w tym przypadku będzie to "kar"), w opcjach ogólnych slajdera wybrać układ "Karta", w opcjach wyglądu dostowować tytuł (wyrównanie centralne będzie się prezentowało najlepiej), padding strzałek (w przykładzie 10px) i wyświetlane informacji pod tytułem.
Reszta to CSS - wklejamy więc do Edytora kodu lub pliku templates/grudbox/css/custom.css:
.kar .ba-slideshow-img {
width: 250px;
height: 250px!important;
max-width:100%;
max-height:100%!important;
overflow: hidden;
border-radius: 50%;
margin: 10px auto 0;
border:10px solid #fff;
box-shadow: 0 0px 20px 0 rgba(64, 64, 64, 0.17)!important;
transition: transform 1s;
}
.kar .ba-slideshow-img:hover {
-webkit-transform: rotate(15deg) scale(0.9);
transform: rotate(15deg) scale(0.9);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.kar .slideset-btn-prev {
left: 20px;
margin-top: -50px;
}
.kar .slideset-btn-next {
right: 20px;
margin-top: -50px;
}
.kar .ba-item-recent-posts-slider .carousel-type .ba-slideshow-caption > *{
max-height:90px;
overflow:hidden
}
.kar .ba-slideshow-caption > a{
bottom:100%;
z-index:0!important
}
To wszystko, "karuzela" będzie taka jak widzisz to na przykładzie powyżej.