Merch Styling

Własne stylizacje motywu (CSS)

90% projektu Mercha jest osiągana za pomocą customizera GeneratePress i wbudowanych modułów. Pozostałe 10% jest przez niestandardowe funkcje i CSS.

Wszystkie niestandardowe CSS można znaleźć w Customizerze > Additional CSS. Przy około 400 liniach może tam szczęśliwie pozostać. Ale ogólnie polecam, aby znalazł dom w arkuszu stylów motywu dziecka. Większość typowego CSS motywu jest tutaj omówiona dla dociekliwych lub tych, którzy chcą dokonać zmian. CSS dla konkretnych stron lub elementów jest omówiony w odpowiednich postach.

Należy zauważyć, że Custom CSS jest wyświetlany tylko na Front End. Dodanie stylów edytora (w tym momencie) nie jest osiągalne w przypadku importowanej strony.

Typografia

Zdecydowana większość stylizacji motywu, w szczególności Typografia, Spacja i Kolory są ustawiane w customizerze. Ale w grę wchodzi jakiś niestandardowy CSS.

Duży nagłówek H2

Klasa large-heading może być dodana do bloku tytułowego H2, aby zwiększyć jego rozmiar.

To jest duży nagłówek H2

h2.large-heading {
    font-size: calc(28px + (64 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

O ile nie jesteś fanem algebry to CSS wygląda skomplikowanie. W skorupie orzecha ustawia rozmiar czcionki dynamicznie w oparciu o bieżący rozmiar ekranu. Zakres wielkości naszych czcionek to 28px do 64px. A nasz zakres wielkości ekranu to 400px do 1600px. Spróbuj dostosować szerokość przeglądarki, aby zobaczyć efekt.
Jeśli chcesz uzyskać więcej informacji na temat płynnej typografii to sprawdź Responsive And Fluid Typography With vh And vw Units.

Link Hover

Klasa loud-link doda ikonę i efekt podkreślenia hover. Powinien być stosowany tylko do Bloku tekstowego, który zawiera tylko link.

Przyciski

Wszystkie kolory przycisków Theme i typografia są kontrolowane za pośrednictwem konfiguratora. Przycisk Happy Forms ma swoje własne kontrolki stylizacji w ustawieniach wtyczki. Dodatkowe zaokrąglone rogi i stylizacja hover są stosowane przy użyciu tego CSS:

a.button,
.wp-block-button__link,
.happyforms-submit,
.woocommerce button.button {
    -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    border-radius: 4px !important;
}

a.button:hover,
a.wp-block-button__link:hover,
.happyforms-submit:hover,
.woocommerce button.button:hover {
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

Nagłówek

Podkreślenie

W przypadku tego minimalistycznego projektu uznałem, że najlepiej będzie, jeśli wyraźnie odróżnimy nagłówek strony od jej treści. Osiąga się to za pomocą prostego dolnego obramowania na naszym nagłówku strony. Występuje w dwóch odmianach. Kolor biały dla stron z elementem Merged Header, a czarny dla tych bez.

.header-wrap .site-header {
    border-bottom: 1px solid #fff;
}
.site-header {
    border-bottom: 1px solid #ccc;
}

Nawigacja podstawowa

Efekt Hover

Proste podkreślenie, które skaluje się od zera do szerokości elementu menu na hover. Dziedziczy on aktualny kolor pozycji menu.

.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 1em;
    width: 0%;
    height: 2px;
    background-color: currentColor;
    -webkit-transition: 0.3s width ease;
    transition: 0.3s width ease;
}

.main-navigation .menu>.menu-item>a:hover:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:hover:before {
    width: calc(100% - 40px);
}

Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00