Versions Compared

Old Version 4

changes.mady.by.user Sarah Polfliet

Saved on

compared with

New Version Current

changes.mady.by.user stagiair

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...

  1. Change the border-radius of a file card

    Code Block
    languagecss
    .OcuDarcula .card__wrapper,
.OcuLight .card__wrapper {
  border-radius: 0px;
}

  2. Change a corner of a file card

    Code Block
    languagecss
    .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

    Code Block
    languagecss
    .OcuDarcula .card__wrapper,
.OcuLight .card__wrapper {
  background: red;
}

  4. Remove the title of a file card

    Code Block
    languagecss
    .card .card__header__title {
  display: none;
}

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

    Code Block
    languagecss
    .card .card__body__tabs__title {
  border: none;
}

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

    Code Block
    languagecss
    .card__body__tabs__title:first-child:nth-last-child(1) {
    display: none;
}

  7. Change the font of the body text

    Code Block
    languagecss
    /* 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

    Code Block
    languagecss
    /* 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

    Code Block
    languagecss
    .card--4 {
  // add styling here
}

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

    Code Block
    languagecss
    .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)

    Code Block
    languagecss
    .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

    Code Block
    languagecss
    .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

    Code Block
    languagecss
    .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;
}

QR Codes

When you add a QR code to a File Card it is possible to style it the way you want.

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.

Note

When you change the color, be aware of the contrast. If the contrast isn’t good enough, you wont be able to scan the QR code.

qrcode_default_brown.pngImage Added

Change the color to red

Code Block
languagecss
// background
.card_footer figure svg rect {
  fill: #ffffff;
}
// qr blocks 
.card_footer figure svg path {
  fill: #FF0000;
}
qrcode_witrood.pngImage Added

Change the background to black and the color to green

Code Block
languagecss
// background
.card_footer figure svg rect {
  fill: #008000;
}
// qr blocks 
.card_footer figure svg path {
  fill: #000000;
}
qrcode_groenzwart.pngImage Added

Change the color back to the original QR code color

Code Block
languagecss
// background
.card_footer figure svg rect {
  fill: #ffffff;
}
// qr blocks 
.card_footer figure svg path {
  fill: #000000;
}
qrcode_witzwart.pngImage Added

  1. Change the width and the height of the QR code

Code Block
languagecss
.card__footer figure{
    width: 200px;
    height: 200px;
}

  1. To align the QR code the left, use this snippet

Code Block
languagecss
.card__footer figure {
    position: absolute;
    left: 0;
    bottom: 0;
}

  1. Change a specific QR code

    1. First get the ID

      filecardID.pngImage Added

    2. Change this snippet so it changes the correct filecard

      Code Block
      languagecss
      // background
.card--{Filecard ID} .card__footer figure svg rect {
    fill: #ffffff;   
}
// qr blocks
.card--{Filecard ID} .card__footer figure svg path {
    fill: #FF0000;   
}

// Example
// background
.card--2158 .card__footer figure svg rect {
    fill: #ffffff;   
}
// qr blocks
.card--2158 .card__footer figure svg path {
    fill: #FF0000;   
}