ZUTOM – creating IT solutions since 1996

Rýchly prehľad

Základné nastavenie pre stránku : Atribúty stránky / Šablóna = Full Width; Prezentačný obrázok; Nastavenia stránky; Zhrnutie.
Preddefinované kódy farieb : white (biela) = #ffffff, silver (bledošedá) = #c8c8c8 pre písmo / #f5f5f5 pre pozadie, light (bledomodrá) = #4774ea, blue (modrá) = #1d428a, dark (tmavošedá) = #474747

Nastavenie šírky obsahu v riadku

CLASS = wrap
VLASTNOSTI : šírka obsahu 1440px

Nastavovať pre celý riadok (ceruzka pre riadok v strede) alebo ak má riadok len jeden stĺpec a obsahuje len Text Block, je možné tento class nastaviť do kolonky Extra class v Text Block-u.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet tortor magna, id pretium diam dapibus in. Mauris libero ligula, mollis in nibh ut, elementum tincidunt dolor. Nulla facilisi. Nunc ornare feugiat velit, a tincidunt orci. Cras ultrices pulvinar risus, a efficitur massa egestas eu. Curabitur fringilla pulvinar libero et pulvinar. Quisque feugiat lorem vel ligula aliquam bibendum. Nam blandit nulla eu justo maximus, id lobortis ex hendrerit. Nullam id est ac lacus aliquet hendrerit eget eu dolor. Quisque ac nunc eget metus tristique ultricies. Sed dapibus fringilla laoreet. Phasellus sagittis porttitor nulla nec suscipit. Etiam id porta nisi. Sed nec mattis est, eget finibus tortor. Ut efficitur velit vitae lectus mollis ornare.

CLASS = wrap-small
VLASTNOSTI : šírka obsahu 1140px

Nastavovať pre celý riadok (ceruzka pre riadok v strede) alebo ak má riadok len jeden stĺpec a obsahuje len Text Block, je možné tento class nastaviť do kolonky Extra class v Text Block-u.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet tortor magna, id pretium diam dapibus in. Mauris libero ligula, mollis in nibh ut, elementum tincidunt dolor. Nulla facilisi. Nunc ornare feugiat velit, a tincidunt orci. Cras ultrices pulvinar risus, a efficitur massa egestas eu. Curabitur fringilla pulvinar libero et pulvinar. Quisque feugiat lorem vel ligula aliquam bibendum. Nam blandit nulla eu justo maximus, id lobortis ex hendrerit. Nullam id est ac lacus aliquet hendrerit eget eu dolor. Quisque ac nunc eget metus tristique ultricies. Sed dapibus fringilla laoreet. Phasellus sagittis porttitor nulla nec suscipit. Etiam id porta nisi. Sed nec mattis est, eget finibus tortor. Ut efficitur velit vitae lectus mollis ornare.

CLASS = wrap770
VLASTNOSTI : šírka obsahu 770px

Nastavovať pre celý riadok (ceruzka pre riadok v strede) alebo ak má riadok len jeden stĺpec a obsahuje len Text Block, je možné tento class nastaviť do kolonky Extra class v Text Block-u.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet tortor magna, id pretium diam dapibus in. Mauris libero ligula, mollis in nibh ut, elementum tincidunt dolor. Nulla facilisi. Nunc ornare feugiat velit, a tincidunt orci. Cras ultrices pulvinar risus, a efficitur massa egestas eu. Curabitur fringilla pulvinar libero et pulvinar. Quisque feugiat lorem vel ligula aliquam bibendum. Nam blandit nulla eu justo maximus, id lobortis ex hendrerit. Nullam id est ac lacus aliquet hendrerit eget eu dolor. Quisque ac nunc eget metus tristique ultricies. Sed dapibus fringilla laoreet. Phasellus sagittis porttitor nulla nec suscipit. Etiam id porta nisi. Sed nec mattis est, eget finibus tortor. Ut efficitur velit vitae lectus mollis ornare.

Nastavenie podfarbenia boxu/celého riadku

CLASS = box-white
VLASTNOSTI : biele pozadie riadku + padding-top a padding-bottom 50px

Nastavovať pre celý riadok (ceruzka pre riadok vpravo).

CLASS = box-silver
VLASTNOSTI : šedé pozadie riadku + padding-top a padding-bottom 50px

Nastavovať pre celý riadok (ceruzka pre riadok vpravo).

CLASS = box-blue
VLASTNOSTI : modré pozadie riadku + padding-top a padding-bottom 50px

Nastavovať pre celý riadok (ceruzka pre riadok vpravo).

CLASS = box-image
VLASTNOSTI : obrázkové pozadie riadku + padding-top a padding-bottom 50px

Nastavovať pre celý riadok (ceruzka pre riadok vpravo). V nastavení riadku je potrebné ešte nastaviť v Design Options obrázok pre pozadie a jeho nastavenie na cover.

Nastavenia farieb pre písmo

CLASS = head-white / text-white
VLASTNOSTI : biele písmo pre nadpisy H1-H6 / bežný text

Možné aplikovať pre ktorýkoľvek Extra class.

CLASS = head-silver / text-silver
VLASTNOSTI : šedé písmo pre nadpisy H1-H6 / bežný text

Možné aplikovať pre ktorýkoľvek Extra class.

CLASS = head-blue / text-blue
VLASTNOSTI : modré písmo pre nadpisy H1-H6 / bežný text

Možné aplikovať pre ktorýkoľvek Extra class.

CLASS = head-dark / text-dark
VLASTNOSTI : tmavošedé písmo pre nadpisy H1-H6 / bežný text

Možné aplikovať pre ktorýkoľvek Extra class.

Nastavenia veľkostí pre písmo

CLASS = fsize14, fsize16, fsize18, fsize20, fsize22, fsize24
VLASTNOSTI : nastavenie veľkostí písma na 14 - 24 px

Možné aplikovať pre ktorýkoľvek Extra class, prípadne na ľubovoľný HTML tag pri editácia HTML kódu boxu (dopĺňa sa do parametru tagu class, ak ho neobsahuje, zápis je class="fsize20")

CLASS = fsize14

CLASS = fsize16

CLASS = fsize18

CLASS = fsize20

CLASS = fsize22

CLASS = fsize24

Tlačítka

CLASS = button-rounded
VLASTNOSTI : základný class pre zaoblené tlačítka

Túto a všetky ostatné voliteľné class-y pre tlačítka je možné aplikovať na ľubovoľný odkaz v texte. Class sa nastavuje v HTML kóde Text Box-u. Jednotlivé class-y sú oddelené len medzerou.

Príklady:

  • class="button-rounded bb-w bh-b bgb-b bgh-w"
    DOWNLOAD
  • class="button-rounded bb-b bh-w bgb-w bgh-b"
    ODOSLAŤ
  • class="button-rounded bb-w bh-b bgb-b bgh-t"
    Detail
  • class="button-rounded bb-b bh-w bgb-t bgh-b"
    Zobraziť
  • class="button-rounded bb-w bh-b bgb-t bgh-w"
    DATASHEET

CLASS = button-arrow
VLASTNOSTI : základné tlačítko button-rounded zmení na tlačítko so šípkou

Class button-arrow je doplnkový class pre button-rounded.

Príklad: -> -> ->

Príklady:

  • class="button-rounded button-arrow bb-w bh-b bgb-b bgh-w"
    ->
  • class="button-rounded button-arrow bb-b bh-w bgb-w bgh-b"
    ->
  • class="button-rounded button-arrow bb-w bh-b bgb-b bgh-t"
    ->
  • class="button-rounded button-arrow bb-b bh-w bgb-t bgh-b"
    ->
  • class="button-rounded button-arrow bb-w bh-b bgb-t bgh-w"
    ->

Farba okraju a textu/šípky:

  • bb-w : biely
  • bb-b : modrý
  • bb-bw : modrý text/šípka, biely okraj

Farba okraju a textu/šípky po prejdení myšou (hover):

  • bh-w : biely
  • bh-b : modrý
  • bh-bw : modrý text/šípka, biely okraj

Farba pozadia tlačítka:

  • bgb-t : priesvitné
  • bgb-w : biele
  • bgb-b : modré

Farba pozadia tlačítka po prejdení myšou (hover):

  • bgh-t : priesvitné
  • bgh-w : biele
  • bgh-b : modré