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