Barebones-teema sisältää valmiita banneripaikkoja sekä työkaluja erilaisten bannerien toteuttamiseen. Tältä sivulta löydät ohjeet bannerien käyttämiseen oletusteemassa.

Barebones-teema poistuu.

Teeman kehittäminen on lopetettu, ja kaikki sen sisältämät työkalut tullaan poistamaan käytöstä.

Jatkossa MyCashflow'n oletusteemana toimii Fluid-teema, jonka ulkoasua ja toimintoja on helppo mukauttaa graafisen käyttöliittymän avulla käyttämällä teema-asetuksia.

Barebones sisältää valmiit tyylit koko näytön levyisille suurille bannereille sekä sivupalkissa allekkain näytettäville pienemmille bannereille.

Katso käyttöoppaasta tarkempi kuvaus oletusteeman bannereista.

Bannerikarusellin luominen Barebonesin työkaluilla

Tässä kappaleessa käydään läpi sliders.js-pluginin käyttäminen bannerikarusellin luomiseen.

Löydät sliders.js-pluginin oletusteeman tiedostosta /scripts/plugins/sliders.js. Lisäksi sliderin tyypin määrittävät muuttujat on asetettu tiedostossa /scripts/custom.js.

Sliderin SASS-tyylit löydät oletusteeman tiedostosta /styles/scss/modules/_sliders.scss.

sliders.js-plugin käyttää taustalla jQueryn Slick-pluginia.

Karusellin luominen tapahtuu samalla tavalla kuin tuotelistasliderin, eli bannerien containerille annetaan data-slider="foo"-attribuutti, jonka arvoksi annetaan halutun sliderin tyyppi.

Bannereita varten pluginissa on määritelty seuraavat tyypit:

  • banners-wide
  • banners-side

Alla näet esimerkin bannerikarusellin toteuttamisesta pluginin avulla:

{Banners(
    name: 'ryhman-koodi',
    before: '<ul data-slider="banners-wide">',
    helper: {{
        <li style="background: url({BannerImageURL});">
            {BannerName(
                before: '<h2>',
                after: '</h2>
            )}
            {BannerText}
        </li>
    }},
    after: '</ul>'
)}

Varmista myös että plugin on alustettu /scripts/custom.js-tiedostossa. Alla näet esimerkin pluginin alustamisesta yllä näkyvälle merkkaukselle:

MCF.Sliders.init({
    'banners-wide': {
        autoplay: true,
        autoplaySpeed: 5000,
        slidesToShow: 1
    }
})

Voit käyttää alustuksessa kaikkia Slick-pluginin asetuksia. Lue lisää asetuksista Slickin dokumentaatiossa.