Merch styling

Custom Theme Styling (CSS)

90 % av merchs-designen oppnås med GeneratePress-tilpasseren og innebygde moduler. De andre 10% er gjennom tilpassede funksjoner og CSS.

All tilpasset CSS finner du i Customizer> Ytterligere CSS . På rundt 400 linjer kan den gjerne forbli der. Men jeg anbefaler generelt at den finner et hjem i et stilark for barn. Det meste av det vanlige CSS-temaet er dekket her for nysgjerrige eller for de som ønsker å gjøre endringer. CSS for spesifikke sider eller elementer er dekket i deres relevante innlegg.

Det skal bemerkes at tilpasset CSS bare vises på grensesnittet. Å legge til redigeringsstiler (for øyeblikket) er ikke mulig med et importert nettsted.

Typografi

Det store flertallet av temastilen, spesielt typografi, mellomrom og farger, er satt i tilpasningen. Men det er noe tilpasset CSS på spill.

Stor H2-overskrift

Klassen med store overskrifter kan legges til en H2- tittelblokk for å øke størrelsen.

Dette er den store H2-overskriften

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

Med mindre du er en fan av algebra ser denne CSS komplisert ut. I et nøtteskall setter den skriftstørrelsen dynamisk basert på gjeldende skjermstørrelse. Vårt skriftstørrelsesområde er 28px til 64px. Og vårt skjermstørrelsesområde er 400px til 1600px. Prøv å justere nettleserens bredde for å se effekten.
Hvis du vil ha mer informasjon om flytende typografi, sjekk ut Responsive And Fluid Typography With vh And vw Units

hover link

Klassen med høyt koblinger vil legge til et ikon og understreke sveveeffekten. Den skal bare brukes på en tekstblokk som bare inneholder lenken.

knapper

Alle temaknappfarger og typografi styres via tilpasseren. Happy Forms-knappen har sine egne stylingkontroller i plugin-innstillingene. De ekstra avrundede hjørnene og svevestilen brukes ved å bruke 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);
}

overskrifter

understreke

For denne minimalistiske designen tenkte jeg at det var best at vi gjør et klart skille mellom sideoverskriften og sideinnholdet. Dette oppnås med en enkel bunnkant på sideoverskriften vår. Den kommer i to varianter. Hvit for sider med et sammenslått topptekstelement, og svart for de uten.

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

Primærnavigasjon

sveveeffekt

En enkel understreking som skalerer fra null til menyelementbredde ved sveving. Den arver gjeldende farge på menyelementene.

.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