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; }
Page Comparison
Manage space
Manage content
Integrations