Widgetin css-tyylittäminen

3 min lukuaika

Johkun widgetit tukevat css-tyylejä. Jos Johkun perusilme ei sovellu sivustollesi, pyydä sivuston suunnittelijaa luomaan css-tyyli käytettäväksi widgetissä. Tyylityksellä saat widgetiin esim. omat värit ja kirjasintyylit.

||| Jos luot useita widgettejä, aseta niihin samat CSS-tyylit. Eri CSS-tyylit samalla sivulla eivät ole tuettuja.

CSS-tyylin asettaminen widgettiin

  • Klikkaa widget auki Asetukset > Kauppapaikka > Widgetit -sivulta
  • Syötä sivuston suunnittellijalta saamasi css-tyyli widgetin CSS-kohtaan
  • Tallenna
  • Tarkista widgetin tyyli asettamalla widget esim. testisivulle

Johkussa ei toistaiksi ole olemassa valmiita esimerkkejä tyylien kustomointiin.

Widgetien oletustyylit

Alla listattuna Johkun widgettien oletustyylimuuttujat. Näitä käyttäen ja muokaten sivustosuunnittelija voi tyylittää widgetin haluamansa näköiseksi.

: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: #FFF; /* Background color of the main modal popup windows */
  --widget-container-bg-color: #DDD; /* Time and pricing selector box background color */
  --widget-overlay-color: #000000CC; /* Background dimmer color (with opacity) when modal popup is open */
  
  --widget-text-color: #111;
  --widget-placeholder-color: #DDD;
  --widget-primary-color: #607D8B;
  --widget-success-color: #55832e;
  --widget-error-color: #8f1414;
  --widget-dark-color: #111;

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

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

  --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: #FFF;
  --widget-pricetag-color: #000;
  --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%;
}

Verkkonäkymä