W tym artykule dowiesz się, jak nadpisywać i wykorzystać wartości zmiennych CSS do łatwej personalizacji widgetów w systemie Lockme.

    Nadpisywanie wartości zmiennych CSS dla widgetów

    Poniżej znajdziesz instrukcje krok po kroku, jak nadpisywać wartości zmiennych CSS w systemie Lockme. Jeśli nie czujesz się pewnie w CSS, warto przeczytać dalsze sekcje, które oferują praktyczne wskazówki i przykłady.

    1. Aby wprowadzić wartości zmiennych, należy wejść w panel firmowy Lockme, a następnie przejść do edycji oddziałów.image
    2. W zakładce "Ustawienia widgeta" znajduje się pole "Dodatkowe style CSS", w którym można nadpisać wartości opisane poniżej.image

    Jak działają zmienne CSS?

    Nadpisywanie wartości zmiennych CSS w widgetach umożliwia ich szybkie i intuicyjne dostosowywanie. Wszystkie zmienne znajdują się w jednym miejscu, a ich wartości można zmieniać w prosty sposób, co znacznie ułatwia personalizację.

    Każda zmienna CSS ma konstrukcję:

    --nazwa-zmiennej: wartość;
    

    Ważne jest, żeby zmienne były nadpisywane wewnątrz klasy .calwidget, pomiędzy nawiasami klamrowymi. Każda linijka ze zmienną musi też kończyć się średnikiem. Jak w przykładzie:

    .calwidget {
      --widget-color-main: deeppink;
    }
    

    Pełna lista zmiennych

    .calwidget {
      --hover-color: var(--widget-color-main);
    
      // GENERAL
      --widget-color-main: var(--primary);
      --widget-color-main-alt: var(--primary_light);
      --widget-color-background: var(--background);
      --widget-color-background-alt: var(--background_dark);
      --widget-color-text: var(--text);
      --widget-color-text-on-main: black;
      --loading-icon-color: var(--widget-color-main);
      --widget-border-radius: var(--radius);
    
      // NAVIGATION
      --navigation-color-background: transparent;
      --navigation-color-text: var(--widget-color-text);
      --navigation-color-icon: --navigation-color-text;
      --navigation-color-inactive-link: var(--secondary_dark);
      --navigation-color-inactive-icon: var(--navigation-color-inactive-icon);
      --navigation-color-border: var(--tertiary_light);
      --navigation-border-width: 2px;
      --navigation-border-radius: 0;
    
      // MESSAGES
      --message-custom-color-neutral-background: var(--widget-color-main);
      --message-custom-color-neutral-text: var(--widget-color-text-on-main);
      --message-custom-color-error-background: var(--red);
      --message-custom-color-error-text: white;
      --message-custom-color-success-background: var(--form_valid);
      --message-custom-color-success-text: white;
    
      // DAYS
      --special-offer-mark-color-background: var(--widget-color-main);
      --special-offer-mark-color-text: var(--widget-color-text);
    
      --active-day-color-background: var(--widget-color-text);
      --active-day-color-text: var(--widget-color-background);
    
      // HOUR SLOT
      --slot-color-background: var(--widget-color-background);
      --slot-color-text: var(--widget-color-text);
      --slot-color-border: var(--slot-color-text);
      --slot-color-background-hover: var(--widget-color-main-alt);
      --slot-color-border-hover: var(--slot-color-border);
    
      --slot-booked-color-background: transparent;
      --slot-booked-color-border: var(--widget-color-text);
      --slot-booked-opacity: 0.3;
    
      --slot-border-radius: var(--widget-border-radius);
      --slot-border-width: 1px;
    
      // FORMS
      --widget-form-section-color-text: var(--widget-color-text);
      --widget-form-section-color-label: var(--widget-form-section-color-text);
      --widget-form-section-color-icons: var(--widget-form-section-color-label);
    
      --widget-form-color-border: var(--secondary);
      --widget-form-color-background: var(--background);
      --widget-form-color-label: var(--widget-color-text);
      --widget-form-color-placeholder: var(--form-color-placeholder);
    
      --widget-form-focus-color-border: var(--widget-color-text);
      --widget-form-focus-color-background: var(--widget-form-color-background);
      --widget-form-focus-color-label: var(--widget-color-main);
      --widget-form-focus-color-placeholder: var(--form-color-placeholder);
    
      --widget-form-hover-color-border: var(--widget-form-color-border);
      --widget-form-hover-color-background: var(--widget-form-color-background);
      --widget-form-hover-color-label: var(--widget-form-color-label);
      --widget-form-hover-color-placeholder: var(--widget-form-color-placeholder);
    
      --widget-form-border-width: 5px;
      --widget-form-border-radius: var(--widget-border-radius);
    
      // SIDE BUTTONS
      --side-button-color-background: var(--widget-color-background-alt);
      --side-button-color-background-hover: var(--secondary);
      --side-button-color-text: var(--widget-color-text);
    
      --side-button-color-inactive-text: var(--secondary_dark);
      --side-button-color-inactive-background: var(--widget-color-background-alt);
      --side-button-height: 90px;
      --side-button-font-size: 2.985984rem;
      --side-button-border-radius: var(--widget-border-radius);
    
      // BOTTOM BUTTONS
      --widget-button-border-width: 1px;
      --widget-button-border-radius: var(--widget-border-radius);
    
      --widget-button-book-color-background: var(--widget-color-main);
      --widget-button-book-color-text: var(--widget-color-text-on-main);
      --widget-button-book-color-icon: var(--widget-color-text-on-main);
      --widget-button-book-color-border: var(--widget-color-main);
    
      --widget-button-book-hover-color-background: var(--widget-color-text-on-main);
      --widget-button-book-hover-color-text: var(--widget-color-main);
      --widget-button-book-hover-color-icon: var(--widget-color-main);
      --widget-button-book-hover-color-border: var(--widget-color-main);
    
      --widget-button-back-color-background: var(--widget-color-background);
      --widget-button-back-color-text: var(--widget-color-text);
      --widget-button-back-color-icon: var(--widget-button-secondary-color-text);
      --widget-button-back-color-border: var(--secondary);
    
      --widget-button-back-hover-color-background: var(--widget-color-background-alt);
      --widget-button-back-hover-color-text: var(--widget-button-back-color-text);
      --widget-button-back-hover-color-icon: var(--widget-button-back-color-icon);
      --widget-button-back-hover-color-border: var(--widget-button-back-color-border);
    }
    

    Przykłady użycia

    Poniżej znajdują się praktyczne przykłady zastosowania zmiennych CSS w widgetach:

    Zmiana koloru akcentów

    .calwidget {
      --widget-color-main: deeppink;
    }
    

    image

    Zmiana koloru tekstów

    .calwidget {
      --widget-color-text: deeppink;
    }
    

    image

    Dostosowanie ramek slotów

    .calwidget {
      --widget-color-text: deeppink;
      --slot-color-border: dodgerblue;
    }
    

    image

    Tworzenie unikalnych stylizacji

    .calwidget {
      --widget-color-text: deeppink;
      --slot-color-border: dodgerblue;
      --slot-color-background: gold;
      --slot-color-text: green;
      --slot-border-radius: 20px;
      --slot-border-width: 4px;
    }
    

    image

    Ważne uwagi

    Zmienne są głównie używane do modyfikacji kolorów i wymiarów. Zaawansowane zmiany mogą wymagać użycia bardziej złożonych selektorów CSS. Zmienne zostały stworzone, aby uprościć proces stylowania i zminimalizować konieczność pisania skomplikowanego kodu.

    Potrzebujesz pomocy?

    Napisz na [email protected].

    Hej, nasza strona wykorzystuje pliki cookies aby jej wszystkie funkcje mogły poprawnie działać.

    Poza tymi niezbędnymi, wykorzystujemy też pliki cookies podmitów trzecich abyśmy mogli korzystać z zewnętrznych narzędzi analitycznych, społecznościowych czy marketingowych. To oznacza że dane zbierane za ich pomocą są przetwarzane też przez dostawców tych narzędzi.

    Czy wyrażasz zgodę na używanie plików cookies innych niż niezbędne do działania strony, zgodnie z naszą polityką prywatności?

    Ustawienia plików cookie

    Tutaj możesz zmienić szczegółowe ustawienia dotyczące plików cookies stosowanych na naszej stronie. Jeżeli wyrażasz zgodę na pliki cookies określonego typu, oznacza to, że zgadzasz się, aby dane przez nie zebrane były wykorzystywane przez administratora tej strony, a także dostawcę konkretnego narzędzia, z którego korzystamy - zgodnie z opisem w naszej polityce prywatności.

    Ten rodzaj plików jest niezbędny do poprawnego funkcjonowania naszej strony. Wykorzystywane są między innymi przy takich funkcjach jak zapamiętywanie przez przeglądarkę wybranego przez użytkownika kraju, produktów w koszyku czy motywu kolorystycznego strony.

    Te pliki pozwalają nam zrozumieć, jak użytkownicy poruszają się po naszej stronie. Jednym z takich narzędzi jest Google Analytics, który pozwala nam zbierać anonimowe informacje o liczbie wejść, korzystaniu z konkretnych funkcji czy rodzaju urządzeń użytkowników. Dzięki nim jesteśmy w stanie dostosować stronę do potrzeb i możliwości różnorodnych użytkowników.

    Narzędzia Google, Facebook i Seznam.cz zbierające informacje o użytkownikach, które możemy wykorzystywać do celów marketingowych.