Merch Styling

Brugerdefineret tema styling (CSS)

90 % af Merchs design er opnået med GeneratePress customizer og indbyggede moduler. De øvrige 10 % er via brugerdefinerede funktioner og CSS.

Alle de tilpassede CSS findes i Customizer > Additional CSS. Med omkring 400 linjer kan den sagtens blive der. Men jeg anbefaler generelt, at det finder et hjem i et stilark til et undertema. De fleste af de almindelige CSS-temaer er dækket her for de nysgerrige eller for dem, der ønsker at foretage ændringer. CSS for specifikke sider eller elementer er beskrevet i de relevante indlæg.

Det skal bemærkes, at brugerdefineret CSS kun vises i frontenden. Tilføjelse af editor-stilarter er (på nuværende tidspunkt) ikke muligt med et importeret websted.

Typografi

Langt de fleste af temaets styling, især typografi, afstand og farver, kan indstilles i customizer. Men der er noget brugerdefineret CSS i spil.

Stor H2-overskrift

Klassen stor overskrift kan tilføjes til en H2-titelblok for at øge dens størrelse.

Dette er den store H2-rubrik

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

Medmindre du er en fan af algebra, ser CSS kompliceret ud. Kort fortalt indstiller den skriftstørrelsen dynamisk baseret på den aktuelle skærmstørrelse. Vores skriftstørrelse er mellem 28px og 64px. Og vores skærmstørrelse er mellem 400px og 1600px. Prøv at justere din browsers bredde for at se effekten.
Hvis du vil have flere oplysninger om flydende typografi, kan du læse Responsive og flydende typografi med vh- og vw-enheder

Hover-link

Klassen loud-link tilføjer et ikon og en understregningseffekt ved svævning. Det bør kun anvendes på en tekstblok, der kun indeholder linket.

Knapper

Alle temaets knapfarver og typografi kan styres via brugerdefineringen. Happy Forms-knappen har sin egen stylingkontrol i indstillingerne for plugins. De ekstra afrundede hjørner og hover-styling anvendes ved hjælp af denne 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);
}

Overskrift

Understregning

I dette minimalistiske design syntes jeg, at det var bedst at skelne klart mellem sidens overskrift og sidens indhold. Dette opnås med en simpel nederste kant på vores sidehoved. Den findes i to varianter. Hvid for sider med et sammenlagt headerelement og sort for sider uden.

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

Primær navigation

Hover-effekt

En simpel understregning, der skalerer fra nul til menupunktets bredde ved hover. Den arver den aktuelle farve på menupunkterne.

.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