Code snippets: Digital label

  1. Straight corners for digital label

    1 2 3 4 .OcuLight .page.page--dl .dl__grid__item, .OcuLight .page.page--dl .dl__grid__item__face { border-radius: 0px; }

     

  2. Remove shadow around corners of a digital label

    1 2 3 4 5 .dl__grid__item__face__image, .OcuLight .page.page--dl .dl__grid__item__face, .OcuLight .button.dl__grid__item__open { border-radius: 0px; }

     

  3. Change the ‘visited’ state of items. A value between 0 and 1

    1 2 3 4 5 .dl__grid__item--visited .dl__grid__item__face--front, .dl__grid__item--visited .dl__grid__item__face__image, .dl__grid__item--visited .dl__grid__item__face__image img { opacity: .75; }

     

  4. Add a border to items in a digital label

    1 2 3 .dl__grid__item { border: 5px solid red; }

 

Template #1 - Show the title on the Front of a grid item. No flip needed.

1 2 3 4 5 6 7 8 9 10 11 12 13 .dl__grid__item__face.dl__grid__item__face--back { backface-visibility: visible; transform: none; } .dl__grid__item__face.dl__grid__item__face--back .dl__grid__item__face__image, .dl__grid__item__face.dl__grid__item__face--back .dl__grid__item__open, .dl__grid__item__face.dl__grid__item__face--back .dl__grid__item__face__overlay { display: none; } .dl__grid__item__face__title { top: 88%; // other styling for the title }