Versions Compared

Old Version 1

changes.mady.by.user Sofie Desombere

Saved on

compared with

New Version Current

changes.mady.by.user Dries

Saved on

Key

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

Mediabrowser tiles

  1. Remove icon from menu item

    Code Block
    .gridItem__icon {
    display:none;
}

  2. Remove colored overlay from menu item

    Code Block
    languagecss
    .gridItem__image {
    opacity: 1;
}

  3. Change border-radius menu

    Code Block
    .

...

  1. gridItem

...

  1. ,
.

...

  1. gridItem__image {
    border-radius: 2%;
}

  2. Remove the Basecolor background

    Code Block
    .gridItem {
  background: none | white;
}

  3. Change the background to a color

    Code Block
    .gridItem  {
    background: #E7EAED;
}

/* change the background for a specific item */
.gridItem:nth-child(2) {
    background: red;
}

  4. Change the background to an image
    Use the module ‘asset bundle’ if you want to upload your images in Ocularium: https://ocular.atlassian.net/l/c/ymc8q9Xg

    Code Block
    .gridItem  {
    background-image: url("https://via.placeholder.com/400");
    background-size: contain;
    background-position: center center;
}
.gridItem__image {
  display: none;
}

/* change the background for a specific item */
.gridItem:nth-child(2) {
    background-image: url("https://via.placeholder.com/400");
    background-size: contain;
    background-position: center center;
}
.gridItem__image {
  display: none;
}

  5. Adjust the background color of a menu title

    Code Block
    .gridItem__title p {
    background-color: #3C9B28;
    // add more options here
}

  6. Place the title under the image

    Code Block
    // add some margin 
.gridItem {
  margin: 3em 2em;
}
.gridItem__title {
    height: 10;
    bottom: -10%;
    // add more options like...
    font-weight: bold;
    color: black;
    white-space: normal;
}

// align text to top line
.gridItem__title p {
    top: 0;
    transform: translateX(-50%);
}

Media browser assets

  1. Remove round corners for media browser items

    Code Block
    .OcuLight .gridItem__image,
.OcuLight .gridItem,
.OcuDarcula .gridItem__image,
.OcuDarcula .gridItem {
    border-radius: 0px;
}

2. PDF controls at the bottom

Code Block
.pdf__controls {bottom: 0;top: initial;}