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

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

4 Remove the Basecolor background

.gridItem {
  background-color: none | white;
}

Note: if you notice a small border around the gridItem__image, you should change the background-color of the gridItem.

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%);
}

9 Adjust the size of a menu button

// add some margin 
.gridItem {
  //default width is 18%
  width:14%
  //if you don't want more buttons on one line add margin to compensate
  margin-left: 2%
  margin-right: 2%
}

10 Adjust the size of the menu area

.grid__container{
  //add padding to make the menu area smaller  
  padding-left:10%
  padding-right:10%
}

11 Limit your changes to one menu

//put .page.page--nav--1234 in front of the class 
//replace 1234 with correct id that can be found using the browsers development tools
//examples:
.page.page--nav--1234 .gridItem{
  //only gridItems under page 1234 will be affected
}

.page.page--nav--1234 .grid__container{
  //only the container under page 1234 will be affected
}

Template 1

Place Navigation or Mediabrowser buttons on the bottom right on your page. 

.page--xxxx .grid,
.page--yyyy .grid,
.page--zzzz .grid {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 400px;
    transform: none;
    align-content: end;
}

.page--xxxx .grid__container,
.page--yyyy .grid__container,
.page--zzzz .grid__container {
    margin-bottom: 40px;
    display: block;
    width: initial;
    height: initial;
}

.page--xxxx .gridItem,
.page--yyyy .gridItem,
.page--zzzz .gridItem {
    border-radius: 10px;
    background: white;
    width: 250px;
    height: 64px;
    margin: 10px 0;
}

.page--xxxx .gridItem:after,
.page--yyyy .gridItem:after,
.page--zzzz .gridItem:after {
    display: none;
}

.page--xxxx .gridItem__title,
.page--yyyy .gridItem__title,
.page--zzzz .gridItem__title {
    position: relative;
    bottom: 0;
    height: 100%;
    color: #686868;
    font-size: 1.6em;
    line-height: 64px;
    vertical-align: middle;
    text-align: left;
}

.page--xxxx .gridItem__title p,
.page--yyyy .gridItem__title p,
.page--zzzz .gridItem__title p {
    position: relative;
    top: initial;
    left: initial;
    transform: none;
    margin: 0;
    padding: 0 0 0 20px;
    width: 100%;
}