Merch Styling

Anpassad temastyrning (CSS)

90 % av Merchs design uppnås med GeneratePress customizer och inbyggda moduler. De övriga 10 procenten är anpassade funktioner och CSS.

All anpassad CSS finns i Customizer > Additional CSS. Vid cirka 400 linjer kan den gärna stanna där. Men jag rekommenderar i allmänhet att den placeras i ett stilblad för ett undertema. De flesta vanliga CSS-teman finns här för den som är nyfiken eller vill göra ändringar. CSS för specifika sidor eller element behandlas i respektive inlägg.

Det bör noteras att anpassad CSS endast visas på framsidan. Det går inte att lägga till redigeringsstilar (för närvarande) på en importerad webbplats.

Typografi

De allra flesta av temats stilar, särskilt typografi, avstånd och färger, kan du ställa in i anpassningsverktyget. Men det finns en del anpassad CSS som spelar in.

Stor H2-rubrik

Klassen stor rubrik kan läggas till i ett H2-titelblock för att öka dess storlek.

Detta är den stora H2-rubriken

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

Om du inte gillar algebra ser CSS komplicerat ut. I ett nötskal ställer den in teckensnittsstorleken dynamiskt baserat på den aktuella skärmstorleken. Vårt teckenstorleksintervall är 28px till 64px. Vår skärmstorlek är 400px till 1600px. Prova att justera webbläsarens bredd för att se effekten.
Om du vill ha mer information om flytande typografi kan du läsa Responsiv och flytande typografi med vh- och vw-enheter.

Länk med svävande muskulatur

Klassen loud-link lägger till en ikon och en understruken hover-effekt. Den ska endast tillämpas på ett textblock som endast innehåller länken.

Knappar

Alla färger på temaknapparna och typografin kontrolleras via anpassningsverktyget. Happy Forms-knappen har sina egna stylingkontroller i plugins inställningar. De extra rundade hörnen och stilen för svävande bilder används med hjälp av denna 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);
}

Rubrik

Understrykning

I den här minimalistiska designen tyckte jag att det var bäst att göra en tydlig åtskillnad mellan webbplatsens rubrik och sidans innehåll. Detta uppnås med en enkel nedre kant på vår webbplatsrubrik. Den finns i två varianter. Vit för sidor med ett sammanslaget rubrikelement och svart för sidor utan.

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

Primär navigering

Hover-effekt

En enkel understrykning som skalar från noll till menyalternativets bredd när du svävar över den. Den ärver den nuvarande färgen på menyalternativen.

.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