Code snippets: File cards

  1. Change the border-radius of a file card

    1 2 3 4 .OcuDarcula .card__wrapper, .OcuLight .card__wrapper { border-radius: 0px; }

     

  2. Change a corner of a file card

    1 2 3 4 5 6 7 .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; }

     

  3. Change the background color of a file card

    1 2 3 4 .OcuDarcula .card__wrapper, .OcuLight .card__wrapper { background: red; }

     

  4. Remove the title of a file card

    1 2 3 .card .card__header__title { display: none; }

     

  5. Remove the line under the title of a file card

    1 2 3 .card .card__body__tabs__title { border: none; }

     

  6. Remove the tabs when there’s only one tab present

    1 2 3 .card__body__tabs__title:first-child:nth-last-child(1) { display: none; }

     

  7. Change the font of the body text

    1 2 3 4 5 6 7 8 9 10 11 /* 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; }

     

  8. Change the font of the title

    1 2 3 4 5 6 7 8 9 10 11 /* 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; }

     

  9. Add styling to a specific file card based on its ID

    1 2 3 .card--4 { // add styling here }

     

  10. Enlarging an asset to half the size of a file card (TEMPLATE)

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 .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; }

     

  11. Make asset of a file card full screen (template)

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 .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; }

     

  12. Make title in application visible on file card

    1 2 3 4 5 6 7 8 9 10 11 .menu--left.menu--top { z-index: 3; } .menu--center.menu--top { z-index: 3; } .menu--right.menu--top { z-index: 3; }

     

  13. 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 = %230082B4

    1 2 3 4 5 6 7 .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; }