General
You can copy paste these code-snippits in your advanced theme settings. Follow these steps:
...
Change the border-radius of a file card
Code Block .OcuDarcula .card__wrapper, .OcuLight .card__wrapper { border-radius: 0px; }
Change a corner of a file card
Code Block .OcuDarcula .card__wrapper, .OcuLight .card__wrapper { border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; }
Change the background color of a file card
Code Block .OcuDarcula .card__wrapper, .OcuLight .card__wrapper { background: red; }
Remove the title of a file card
Code Block .card .card__header__title { display: none; }
Remove the line under the title of a file card
Code Block .card .card__body__tabs__title { border: none; }
Remove the tabs when there’s only one tab present
Code Block .card__body__tabs__title:first-child:nth-last-child(1) { display: none; }
Enlarging an asset to half the size of a file card (TEMPLATE)
Code Block .OcuDarcula .page.page--dl .dl__card, .OcuLight .page.page--dl .dl__card { background: rgba(10, 25, 64, 0.36); } .OcuDarcula .card .card__wrapper, .OcuLight .card .card__wrapper { width: 87%; height: 82.4%; border-radius: 0; padding: 1.5% 3%; } .card .card__body { height: 82%; } .card .card__wrapper .card__header { position: absolute; width: 45%; } .card .card__wrapper .card__header .card__header__title { text-align: left; } .card .card__header__sub { text-align: left; } .card .card__wrapper .card__body__tabs { position: absolute; width: 45%; top: 20%; } .card__wrapper .card__body__tabs .card__body__tabs { border-bottom: none; } .card__wrapper .card__body__content { width: 100%; height: 100%; margin-top: 12%; padding: 4% 0; } .card .card__body__content__container { margin: 1% 0; } .card__wrapper .card__body__content .card__body__content__container__text { width: 96%; font-size: 1em; } .card__wrapper .card__body__content .card__body__content__media { position: absolute; top: 0; left: initial; right: 0; width: 50%; transform: none; background: lightgray; margin: 0 0; } .card__body__content__media .media .media__element{ object-fit:cover; } .card__body__content__media .media__enlarge.button { left: 2%; right: initial; }
Add styling to a specific file card based on its ID
Code Block language css .card--4 { // add styling here }
Change the font of the body text
Code Block /* create a font-family */ @font-face { font-family: "myCustomFont"; src: url('url-to-font.otf'); } .card__body__content__container__text { font-family: "myCustomFont"; font-size: 42px; color: red; }
Change the font of the title
Code Block /* create a font-family */ @font-face { font-family: "myCustomFont"; src: url('url-to-font.otf'); } .card .card__wrapper .card__header .card__header__title { font-family: "myCustomFont"; font-size: 42px; color: red; }
...
Straight corners for digital label
Code Block .OcuLight .page.page--dl .dl__grid__item, .OcuLight .page.page--dl .dl__grid__item__face { border-radius: 0px; }
Remove shadow around corners of a digital label
Code Block .dl__grid__item__face__image, .OcuLight .page.page--dl .dl__grid__item__face, .OcuLight .button.dl__grid__item__open { border-radius: 0px; }
Change the ‘visited’ state of items. A value between 0 and 1
Code Block .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; }
Add a border to items in a digital label
Code Block .dl__grid__item { border: 5px solid red; }
Media browser
Remove round corners for media browser items
Code Block .OcuLight .gridItem__image, .OcuLight .gridItem, .OcuDarcula .gridItem__image, .OcuDarcula .gridItem { border-radius: 0px; }
...