Näin muokkaat widgetin ulkoasua CSS:llä

Sama tyyli sivun kaikkiin widgetteihin

Jos sivulla on useita widgettejä, aseta niihin kaikkiin sama CSS-tyyli. Eri CSS-tyylit samalla sivulla eivät ole tuettuja, ja niiden käyttö johtaa ennakoimattomaan ulkoasuun.

Näin asetat CSS-tyylin widgettiin

1. Avaa widget Asetukset → Kauppapaikka → Widgetit -sivulta.
2. Syötä sivuston suunnittelijalta saamasi CSS-tyyli widgetin CSS-kenttään.
3. Tallenna.
4. Tarkista tyylin toiminta widgetin esikatselusta ja asettamalla widget esimerkiksi testisivulle. Esikatselu huomioi widgetin CSS-tyylit, mutta ei sivustosi omia tyylejä ja niiden vaikutusta.

Widgettien oletustyylimuuttujat

Widgettien ulkoasu rakentuu alla luetelluista oletustyylimuuttujista. Sivustosuunnittelija tyylittää widgetin määrittelemällä muuttujille omat arvot. Huomaa, että jos tyylissä käytetään verkkokirjasimia (webfont), niiden pitää olla määriteltyinä ja ladattuina sillä sivustolla, jolle widget upotetaan.

:host {
  --widget-base-fontsize: 1rem;
  --widget-font-family: "Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; // You must have any webfonts defined and loaded in the website that the widget is embedded into

  --widget-bg-color: transparent; /* Widget list or single card background */
  --widget-popup-bg-color: #FFFFFF; /* Background color of the main modal popup windows */
  --widget-container-bg-color: #DDDDDD; /* Time and pricing selector box background color */
  --widget-overlay-color: #000000CC; /* Background dimmer color (with opacity) when modal popup is open */
  
  --widget-text-color: #111111;
  --widget-input-color: #111111;
  --widget-placeholder-color: #DDDDDD;
  --widget-primary-color: #607D8B;
  --widget-success-color: #55832e;
  --widget-error-color: #8f1414;
  --widget-dark-color: #111111;

  --widget-border-color: #DDD;
  --widget-border-radius: 12px;
  --widget-button-border-radius: 10px;
  --widget-input-border-radius: 4px;
  --widget-input-bg-color: #FFFFFF;

  --widget-mainimage-title-color: #FFFFFF;

  --widget-card-minwidth: 300px;
  --widget-card-maxwidth: 1fr;
  --widget-card-cap: 10px;
  --widget-card-scaling: auto-fill;
  --widget-card-content-padding: 0; /* Padding for the card text and footer, set this to 10px if background color is other than transparent */
  --widget-card-image-border-radius: var(--widget-border-radius); /* Bottom border radius for the card, set to 0 if background color is other than transparent */

  --widget-pricetag-bg-color: #FFFFFF;
  --widget-pricetag-color: #000000;
  --widget-pricetag-fontsize: calc(var(--widget-base-fontsize) * 1);
  --widget-pricetag-fontweight: 700;
  --widget-pricetag-boxshadow: 0px 2px 10px rgba(0, 0, 0, 0.12);

  /* Darker shades of the previously defined colors. Can be overwritten with exact color values if the automatic mixing calculation is not suitable. */
  --widget-container-dark-bg-color: color-mix(in srgb,var(--widget-container-bg-color),#000 5%); 
  --widget-dark-success-color: color-mix(in srgb,var(--widget-success-color),#000 15%);
  --widget-light-success-color: color-mix(in srgb,var(--widget-success-color),#fff 20%);
  --widget-dark-error-color: color-mix(in srgb,var(--widget-error-color),#000 15%);
  --widget-light-error-color: color-mix(in srgb,var(--widget-error-color),#fff 20%);
  --widget-dark-primary-color: color-mix(in srgb,var(--widget-primary-color),#000 15%);
  --widget-light-primary-color: color-mix(in srgb,var(--widget-primary-color),#fff 20%);

  --widget-text-link-color: var(--widget-primary-color);
  --widget-text-link-hover-color: color-mix(in srgb,var(--widget-text-link-color),#000 15%);
  
  --widget-maintitle-font-family: var(--widget-font-family);

  --widget-maintitle-fontsize: calc(2.5 * var(--widget-base-fontsize));
  --widget-maintitle-fontsize-sm: calc(1.875 * var(--widget-base-fontsize));
  --widget-maintitle-fontsize-xl: calc(5 * var(--widget-base-fontsize));

  --widget-titlebar-fontsize: var(--widget-maintitle-fontsize);
  --widget-titlebar-fontsize-sm: var(--widget-maintitle-fontsize-sm);
  --widget-titlebar-fontsize-xl: var(--widget-maintitle-fontsize-xl);

  --widget-mainimage-title-fontsize: var(--widget-maintitle-fontsize);
  --widget-mainimage-title-fontsize-sm: var(--widget-maintitle-fontsize-sm);
  --widget-mainimage-title-fontsize-xl: var(--widget-maintitle-fontsize-xl);

  --widget-carousel-text-shadow: 1px 1px 2px rgba(0,0,0,0.2), 1px 1px 30px rgba(0,0,0,0.8);

  --widget-titlebar-bg-color: var(--widget-primary-color);
  --widget-titlebar-text-color: #FFF;

  --widget-basketbutton-fontweight: bold;
  --widget-basketbutton-fontsize: calc(var(--widget-base-fontsize) * 1.1);
  --widget-basketbutton-color: var(--widget-success-color);
  --widget-basketbutton-text-color: #FFF;

  --widget-whitebutton-bg-color: #FFF;
  --widget-whitebutton-text-color: #000;

  --widget-defaultbutton-bg-color: var(--widget-container-dark-bg-color);
  --widget-defaultbutton-text-color: var(--widget-text-color);

  --widget-search-input-bg-color: #eee;
  --widget-search-input-text-color: var(--widget-text-color);
  --widget-search-input-border: none;
  
  --widget-dropdown-link-color: var(--widget-primary-color);
  --widget-dropdown-link-hover-color: var(--widget-dark-primary-color);
  --widget-dropdown-link-active-color: var(--widget-dark-primary-color);

  --widget-navigation-bg-color: var(--widget-dark-primary-color);
  --widget-navigation-color: #FFF;
  --widget-basket-navigation-color: #000;
  --widget-navigation-offset: 10px;
  --widget-navigation-border-radius: var(--widget-button-border-radius);
  
  --dp-font-family: var(--widget-font-family);
  --dp-font-size: var(--widget-base-fontsize);
  --dp-arrow-left: 50%;
}

Nyt näet

Tallennuksen jälkeen widgetin esikatselu näyttää widgetin uusilla tyyleillä, ja sivustolla widget noudattaa samoja tyylejä.

Jos tyyli ei toimi odotetusti

Widget näyttää sivustolla erilaiselta kuin esikatselussa. Sivuston omat tyylit voivat vaikuttaa widgetin ympäristöön, eikä esikatselu huomioi niitä. Tarkista widget aina myös oikealla sivulla tai testisivulla.

Kirjasin ei vaihdu. Verkkokirjasin ei ole ladattuna sivustolla. Pyydä ylläpitäjää määrittelemään ja lataamaan kirjasin sivustolle, jolle widget on upotettu.

Kalenterin päivien värit eivät muutu. Widgetin kalenterin päivien värejä ei voi muuttaa CSS-tyyleillä.

Saman sivun widgetit näyttävät erilaisilta. Widgeteissä on eri CSS-tyylit. Aseta kaikkiin saman sivun widgetteihin sama tyyli.