Mediabrowser tiles

1. Remove icon from menu item

   .gridItem__icon { display:none; }

    

2. Remove colored overlay from menu item

   .gridItem__image { opacity: 1; }

    

3. Change border-radius menu

   .gridItem, .gridItem__image { border-radius: 2%; }

    

4. Remove the Basecolor background

   .gridItem { background: none | white; }

    

5. Change the background to a color

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

    

6. 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
   
   

   .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; }

    

7. Adjust the background color of a menu title

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

    

8. Place the title under the image

   // 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

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

2. PDF controls at the bottom