PORADNIK - slider - indywidualna wysokość dla każdego modułu osobno

Kilka słów na temat slidera. W przypadku, gdy podzielimy naszą stronę odpowiednim modułem na 3 kolumny

[szczegóły - opis oraz film ---> https://forum.home.pl/threads/kurs-video-konfiguracja-i-dzialanie-modulu-kolumny.134/ ]

i chcemy np. w "bocznej" kolumnie umieścić niewielkiej wysokości slider do wyświetlania np. partnerów naszej firmy - kłopotem okazuje się domyślna wysokość owego elementu. Po dodaniu będzie wynosić aż 450 px i rozciągać się w pionie w nienaturalny sposób w stosunku do pozostałych kolumn, gdzie np. znajduje się sam tekst.

Rozwiązaniem w tym przypadku jest edycja dwóch klas CSS, które odpowiadają za sam "obrazek" oraz "pole do obrazka".

Klikamy kolejno: Podstrony->Ustawienia dla wybranej dla nas podstrony (koło zębate)->niebieski przycisk "Skrypty podstrony" (znajduje się w dolnej części ekranu). Tutaj przykład z print screenami: https://forum.home.pl/threads/data-w-blogu.32/

W sekcji "Skrypty dla całej strony" należy wkleić:

Code:

<style>
.image-wrapper {
height: 200px !important;
}
.slideshow-widget {
height: 200px !important;
}
</style>

Oczywiście 200px to przykładowa wartość. Minusem tego rozwiązania jest fakt, iż "przysłaniamy" całą klasę CSS, zatem w przypadku innych sliderów efekt zostanie "przeniesiony" (wysokość).

 

Czy wybrany moduł nie otrzymuje swojej indywidualnej nazwy aby zamknąć CSS tylko w jego obszarze?

 

Wydaje mi się, że masz rację:

Code:

<div id="page-zones__main-widgets__responsiveslideshow" class="widget responsiveslideshow">

Pojawia się konkretne ID. Przy następnym slajderze skrypt dopisuje "page-zones__main-widgets__responsiveslideshow1", a dalej jest już szereg "podklas" CSS. Pewnie da się to zrobić przy pomocy operatora ">". Potestuję jak znajdę czas.

 

Ok. Dzięki za zaangażowanie w temat

 

OK - użyłem operatorów hierarchii i teraz kod działa dla każdego pojedynczego slidera . Trzeba tylko znaleźć ID owego slidera - wygenerowane przez mechanizm kreatora. Dorzuciłem też jeszcze jedną klasę, która może okazać się pomocna/istotna przy niektórych "klockach" na witrynie.

Code:

<style>

#page-zones__main-widgets__responsivecolumns-zones__column-widgets__responsiveslideshow1 > div
{
height: 200px !important;
}

#page-zones__main-widgets__responsivecolumns-zones__column-widgets__responsiveslideshow1 > div > div
{
height: 200px !important;
}

#page-zones__main-widgets__responsivecolumns-zones__column-widgets__responsiveslideshow1 > div > div > ul > li > span > div 
{
height: 200px !important;
}

</style>