Hvordan endre webshop styling / SCSS parametere

Stylingelementer kan justeres på din Sharefox nettbutikk for å matche retningslinjer for styling og merkevare som passer for din organisasjon. Flertallet av disse elementene kan endres fra Admin ▸ Innstillinger ▸ Stylingside.

Elementer som er dynamisk justerbare via administrasjonsstedet ditt er merket med ⟳ -symbolet nedenfor. Når du har endret verdien, må du huske å klikke på Publiser-knappen til høyre på skjermen
En fullstendig liste over SCSS -variabler som kan brukes for tilpasset styling av Sharefox Shop -nettstedstyling, er inkludert nedenfor ($ variabel: <eksempelverdi>).

1. GENERELT: FARGEINNSTILLINGER

  • ⟳ $primary: #55c27c
    • Primær / signaturfarge for: Knapper, søkegrense, prisfarge, uthevinger, Hjelp -menyelementer, Om oss menyelementer, etc.
  • ⟳ $blue: #414b5d;
    • En mørkeblå: Hovedtekst farge på alle sider, produkt på hover-bakgrunn.
  • $dark-blue: #262534;
    • Neste mørke farge: Meny farge på andre sider enn landing, bunntekst, kart +/- farge på ikoner.
  • $black: #000;
    • Høy kontrast / synlighet for: Tidsvalg for kalenderen (alternativer og beskrivelse)
  • $white: #fff;
    • Hvit referanse.
  • ⟳ $danger: #CD5C5C;
    • Farge med høy oppmerksomhet: Input valideringer, feil felt og grenser, manglende tilgjengelighet på tidsvalg-popup / produktside, også Google-påloggingsknapp.
  • $light-blue: #4568b2;
    • Bare for: Liten spinner / tynn laster på sidelast, også FB -registreringsknapp.

2. GENERELT: ANDRE INNSTILLINGER

  •  Avrundet knapp-verdi:
    • ⟳ $btn-round: 30px !important;
  • Vis/skjul menyens nedre kant på andre sider enn destinasjonssiden:
    • $header-no-border: false;

3. Innstillinger for tekst

3.1 FONT

  • $main-font-family: ufonts_com_freightsansbold;
    • På: overskrifter, titler og produktnavn.
  • $second-font-family: ProximaNovaReg;
    • På: normal tekst (andre steder).
  • $third-font-family: ProximaNovaReg;
    • Bare destinasjonsside: Kunngjørings overskrift / undertittel.
    • Skrifter aktivert/deaktivert. Hvis det er sant, bør denne skrifttypen finnes på kundens nettsted og vil bli lastet inn.

  • $helvetica: false;

    $futura: false; 

    $futura-book: false; 

    $geogrotesque: false; 

    $raleway: false;

    $old_standard_tt: false; 

    $nunito-sans: false; 

    $radikal: false; 

    $radikal-medium: false;

3.2 landingsside

  • $header_title_font_size: 44px;
    • Skriftstørrelse på overskriftstittel på destinasjonssiden.
  • $header_subtitle_font_size: 30px;
    • Tekststørrelse på overskriften på destinasjonssiden.
  • $title-color: $white;
    • Tittel farge på overskriften på destinasjonssiden.

4. Innstillinger for bilder

4.1 Logo

  • Logo størrelse
    • ⟳ $logo_scale: 1;
  • Størrelse for logoen på mobilvisning
    • ⟳ $logo_scale_mobile: 1;
  • Logo-posisjonering horisontal vertikal.
    • $logo_transform_origin: left center;

4.2 Toppen på mobilversjon

  • Landingsoverskrifts bakgrunnsbilde for mobilvisning.
    • $landing-header-bg: "../img/bg_mobile.png";
  • Produkt-overskrifts bakgrunnsbilde for mobilvisning.
    • $products-header-bg: '../';
  • Bakgrunnsbilde for bloggeroverskrift for mobilvisning.
    • $activities-header-bg: '../';

4.3 Andre overskrifter

  • Alternativer for overskrift på landingsside (gradering, topp og bunn) $ lineær-gradient-grad: 180deg;
    • $linear-gradient-top-color: rgba(135, 146, 157, 0);
    • $linear-gradient-bottom-color: rgba(104, 115, 125, 0);
  • Landingssidens topptekst i bakgrunnen
    • $header_bg_position: center center;
  • Bakgrunnsstørrelse på overskriften til landingssiden
    • $header_bg_size: cover;
  • Produkt posisjon for topptekst i bakgrunnen
    • $products-header-bg-position: center bottom;

4.4 Blogg

Still need help? Contact Us Contact Us