1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

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

Dyskusja w 'Kreator stron internetowych' rozpoczęta przez użytkownika Stau, 12 Sierpień 2015.

  1. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    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ć:
    Kod:
    <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ść).
     
  2. Grzesiek

    Grzesiek Centrum Pomocy home.pl Administrator forum

    Wiadomości:
    3 599
    Docenione treści:
    329
    Czy wybrany moduł nie otrzymuje swojej indywidualnej nazwy aby zamknąć CSS tylko w jego obszarze?
     
  3. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Wydaje mi się, że masz rację:
    Kod:
    <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.
     
    Grzesiek lubi to.
  4. Grzesiek

    Grzesiek Centrum Pomocy home.pl Administrator forum

    Wiadomości:
    3 599
    Docenione treści:
    329
    Ok. Dzięki za zaangażowanie w temat :)
     
  5. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    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.
    Kod:
    <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>
     

Poleć forum znajomym