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; }
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; }
Add styling to a specific file card based on its ID
Code Block language css .card--4 { // add styling here }
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__close { z-index: 2; } .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; }
Make asset of a file card full screen (template)
Code Block .dl__card { z-index: 10; } .OcuDarcula .page.page--im .im__card, .OcuLight .page.page--im .im__card, .OcuDarcula .page.page--dl .dl__card, .OcuLight .page.page--dl .dl__card { background: transparent; } .OcuDarcula .card .card__wrapper, .OcuLight .card .card__wrapper { width: 100%; height: 100%; border-radius: 0; padding: 1.5% 10px; background: rgb(246, 246, 246); } .card .card__wrapper .card__header { position: relative; left: 51%; width: 45%; height: 10%; max-height: 10%; overflow: hidden; } .card .card__wrapper .card__header .card__header__title { text-align: left; color: black; text-transform: uppercase; } .card .card__header__sub { text-align: left; } .card .card__body { height: 90%; } .card .card__close { z-index: 10; background: red; width: 70px; height: 70px; top: 10px; right: 10px; fill: black !important; } .card .card__close svg { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); } .card .card__wrapper .card__body__tabs { position: relative; width: 45%; left: 51%; } .card__wrapper .card__body__tabs .card__body__tabs { border-bottom: none; } .card .card__body__tabs__title:first-child:nth-last-child(1) span { display: none; } .card__wrapper .card__body__content { width: 100%; height: 88%; padding: 0 0; } .card .card__body__content__container { margin: 1% 0; float: right; width: 48%; } .card__wrapper .card__body__content .card__body__content__container__text { width: 92%; font-size: 1em; } .card__wrapper .card__body__content .card__body__content__media { position: absolute; top: 0; left: 0; right: initial; width: 100%; transform: none; background: lightgray; margin: 0 0; } .card__body__content__media .media .media__element{ object-fit:cover; }
Make title in application visible on file card
Code Block .menu--left.menu--top { z-index: 3; } .menu--center.menu--top { z-index: 3; } .menu--right.menu--top { z-index: 3; }
Change the color of the arrows in the asset swiper:
Copy the text between the quotes and change fill%3D'%23000000' to fill%3D'%230082B4'
The %23 is replacing the # and the other numbers are the same as your hex code: #0082B4 = %230082B4Code Block .application--4402 .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%230082B4'%2F%3E%3C%2Fsvg%3E") !important; } .application--4402 .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%230082B4'%2F%3E%3C%2Fsvg%3E") !important; }
...
Default it will use the Accent Color from your Theme (for example brown in this QR code).
Use these snippets to change the color of the background and the qr code blocks.
...
Change the color to red
Code Block // background .card_footer figure svg rect { fill: white; } // qr blocks .card_footer figure svg path { fill: red; }
...
Change the background to black and the color to green
Code Block // background .card_footer figure svg rect { fill: black; } // qr blocks .card_footer figure svg path { fill: green; }
...
Change the background to blue and the color to yellow
Code Block // background .card_footer figure svg rect { fill: blue; } // qr blocks .card_footer figure svg path { fill: yellow; }
...
Change the color back to the original QR code color
Code Block // background .card_footer figure svg rect { fill: white; } // qr blocks .card_footer figure svg path { fill: black; }
...
Change a specific QR code
First get the ID
Change this snippet so it changes the correct filecard
Code Block // background .card--{Filecard ID} .card__footer figure svg rect { fill: white; } // qr blocks .card--{Filecard ID} .card__footer figure svg path { fill: red; } // Example // background .card--2158 .card__footer figure svg rect { fill: white; } // qr blocks .card--2158 .card__footer figure svg path { fill: red; }