/* Theme Name: Motyw Viamed Theme URI: n/a Template: kadence Author: Olga Zawisza - Kempińska Author URI: n/a Description: Motyw stworzony w celu rozbudowania wyszukiwarki usług i lekarzy Version: 1.0 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* stylizacja obrazków np. w opisie poradni, stylów uywac samodzielnie */ .viamed-obrazek-sredni { overflow: hidden; border-radius: 10px; height: 400px; /* stała wysokość kontenera */ } .viamed-obrazek-sredni img { width: 100%; height: 100%; /* 100% z 400px rodzica */ object-fit: cover; /* wypełnia + kadruje */ object-position: center; /* kadr od środka */ } /* szersza strona — domyślnie Kadence daje 1290px */ :root { --global-content-width: 1500px; } /* ============================================= PASEK GÓRNY (top bar z telefonem i miastami) ============================================= */ /* WYJAŚNIENIE : display: flex → ustawia dzieci (kolumny) obok siebie w RZĘDZIE flex-direction: row → kierunek: od lewej do prawej align-items: center → wyrównuje elementy w PIONIE na środek justify-content: flex-start → elementy zaczynają od lewej strony gap: 20px → odstęp między kolumnami (20 pikseli) flex: 0 0 auto → trzy liczby oznaczają: 0 = nie rozciągaj się (flex-grow) 0 = nie kurcz się (flex-shrink) auto = szerokość dopasuj do zawartości (flex-basis) margin-left: auto → "wepchnij mnie i wszystko za mną na prawą stronę" (to jest SZTUCZKA flexboxa — auto margin zjada wolną przestrzeń) */ /* 1. Zamiana grida na flex w kontenerze kolumn ID paska na różnych stronach: 4887_4acc72-44 → viamed.pl (placówki) 3685_7fa6ff-c5 → czp2.viamed.pl 5366_438657-fb → lublin.viamed.pl */ .kb-row-layout-id4887_4acc72-44 > .kt-row-column-wrap, .kb-row-layout-id3685_7fa6ff-c5 > .kt-row-column-wrap, .kb-row-layout-id5366_438657-fb > .kt-row-column-wrap { display: flex; /* flexbox zamiast grid */ flex-direction: row; /* elementy w rzędzie */ align-items: center; /* wycentruj w pionie */ justify-content: flex-start; gap: 20px; padding: 8px 24px; max-width: none; /* bez limitu szerokości — pełna szerokość ekranu */ } /* 2. Każda kolumna: naturalny rozmiar, nie rozciągaj */ .kb-row-layout-id4887_4acc72-44 .wp-block-kadence-column, .kb-row-layout-id3685_7fa6ff-c5 .wp-block-kadence-column, .kb-row-layout-id5366_438657-fb .wp-block-kadence-column { flex: 0 0 auto; max-width: none; } /* 3. Trzecia kolumna (na produkcji: Lublin) — margin-left: auto pcha ją i pozostałe kolumny na PRAWĄ stronę. Jeśli zmienisz liczbę kolumn — zmień tu numer w nth-child() */ .kb-row-layout-id4887_4acc72-44 > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3), .kb-row-layout-id3685_7fa6ff-c5 > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3), .kb-row-layout-id5366_438657-fb > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3) { margin-left: auto; } /* 4. Tekst w pasku: nie łam na nowy wiersz */ .kb-row-layout-id4887_4acc72-44 .wp-block-kadence-advancedheading, .kb-row-layout-id3685_7fa6ff-c5 .wp-block-kadence-advancedheading, .kb-row-layout-id5366_438657-fb .wp-block-kadence-advancedheading { white-space: nowrap; font-size: 14px; } /* 5. Na telefonach: zawijaj elementy, pełna szerokość */ @media (max-width: 767px) { .kb-row-layout-id4887_4acc72-44 > .kt-row-column-wrap, .kb-row-layout-id3685_7fa6ff-c5 > .kt-row-column-wrap, .kb-row-layout-id5366_438657-fb > .kt-row-column-wrap { flex-wrap: wrap; /* pozwól zawijać na nowy wiersz */ justify-content: center; /* wycentruj na telefonie */ gap: 8px 16px; } .kb-row-layout-id4887_4acc72-44 > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3), .kb-row-layout-id3685_7fa6ff-c5 > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3), .kb-row-layout-id5366_438657-fb > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3) { margin-left: 0; /* wyłącz pchnięcie w prawo */ } } /* ============================================= MENU W STOPCE — klasa wielokrotnego użytku ============================================= Zastosowanie: - dla shortcode viamed_stopka_dynamiczna (Kadence Element → blok Nawigacja) - albo dla dowolnego innego menu w stopce/na stronie Jak użyć: w edytorze bloków Kadence wybierz blok Nawigacja → Zaawansowane → Dodatkowa klasa CSS → wpisz: viamed-menu-stopka */ /* Dwa selektory obok siebie (,) = "zastosuj to samo do obu przypadków": 1) .viamed-menu-stopka li a — dowolny w
  • , niezależnie od głębokości zagnieżdżenia. Działa dla klasycznych menu WordPressa (tam siedzi prosto w
  • ). 2) .viamed-menu-stopka a.kb-nav-link-content — specyficznie dla bloku Kadence Navigation, gdzie jest owinięte w
    i ma klasę .kb-nav-link-content. Ten selektor ma wyższą specyficzność (dwie klasy zamiast jednej), więc przebija własne style Kadence. */ /* Podwójna klasa .wp-block-kadence-navigation.viamed-menu-stopka to "kuloodporność": - DWIE klasy na tym samym elemencie = specyficzność (0,3,1) zamiast (0,2,1) - przebija wewnętrzne reguły Kadence niezależnie od kolejności ładowania CSS Drugi selektor (.viamed-menu-stopka li a) zachowujemy dla klasycznych menu WP, gdzie nie ma klasy .wp-block-kadence-navigation. */ .wp-block-kadence-navigation.viamed-menu-stopka a.kb-nav-link-content, .viamed-menu-stopka li a { padding: 1.7px 0; /* bez bocznego wcięcia; minimalny oddech góra/dół */ display: block; /* każdy link = osobna linia (jak
      klasycznego WP) */ /* UWAGA: tu NIE dajemy justify-content ani text-align — na desktopie linki mają być wyrównane do lewej (jak menu "Services"). Centrowanie uruchamia się tylko w @media (max-width: 767px) poniżej. */ } /* Mobile: wyśrodkuj menu tak jak inne menu w stopce (np. services) */ @media (max-width: 767px) { .wp-block-kadence-navigation.viamed-menu-stopka ul.kb-navigation { align-items: center; /* w flex-column: centruje elementy w poziomie */ } .wp-block-kadence-navigation.viamed-menu-stopka a.kb-nav-link-content, .viamed-menu-stopka li a { display: block; text-align: center; justify-content: center; } } /* ============================================= STRONA LEKARZA — wyrównanie treści do nagłówków ============================================= */ /* PROBLEM: Nagłówki h3 w Kadence Advanced Heading (Specjalizacja, Wykształcenie, Dostępność, itp.) mają padding-left: 16px → ich tekst zaczyna się 16 pikseli od lewej krawędzi kolumny. Treść pod nimi (paragrafy, listy) nie ma tego paddingu → zaczyna się od samej krawędzi kolumny, czyli 16px BARDZIEJ W LEWO niż nagłówek. Wizualnie wygląda to, jakby treść była "wysunięta" spod nagłówka. ROZWIĄZANIE: Dodajemy padding-left: 16px wszystkim bezpośrednim "dzieciom" kolumny które NIE są nagłówkami — żeby ich tekst startował z tej samej kolumny co tekst h3. SELEKTOR — rozbiór po kawałku: body.single-lekarz → tylko na stronach pojedynczego lekarza .kt-inside-inner-col → wewnętrzna kolumna Kadence :has(> h3) → TYLKO taka kolumna, która bezpośrednio zawiera nagłówek h3 (czyli sekcja "nagłówek + treść"). Inne kolumny Kadence na stronie nie są ruszane. > *:not(h3) → wszystkie bezpośrednie dzieci TEJ kolumny poza samym h3 (bo h3 już ma swój padding) */ body.single-lekarz .kt-inside-inner-col:has(> h3) > *:not(h3) { padding-left: 16px; }