Calendar - List
Give your Calendar Feature a stylish, different look.
Please be advised that we are not able to customise or adjust this CSS for you, however the input process is straight forward - please copy and paste the following code at the bottom of the Colours section (at the very bottom of that page):
__________________________________________________________________________________
//* EVENTS LIST PAGE *//
ion-view[state="event-list"] .list { /* Remove Margin for Item Lists */
margin: 0;
background-color: #ffffff;
border-top: 1px solid #dadce0;
}
ion-view[state="event-list"] div.scroll div.list:nth-child(odd) {background: #fafafa;}
ion-view[state="event-list"] div.scroll div.list:nth-child(even) {background: #ffffff;}
ion-view[state="event-list"] .list:nth-child(1) { /* This is to make sure overlapping lines */
margin-top: -1px;
}
ion-view[state="event-list"] .item.item-divider.item-divider-custom.ng-binding { /* Sticky Date */
margin-top: 8px;
margin-left: 12px;
margin-bottom: 8px;
padding: 8px !important;
background-color: #fff;
opacity: 0.98;
border: 0.5px solid #eee;
border-radius: 6px;
width: 150px;
color: #000;
font-size: 14px;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
position: -webkit-sticky;
position: sticky;
top: 8px;
z-index: 10;
box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
ion-view[state="event-list"] .item-thumbnail-left, .item-thumbnail .item-content { /* Thumbnail Properties */
border: none;
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 12px;
margin: 0px 12px 12px 12px;
background-color: transparent !important;
}
ion-view[state="event-list"] .item-thumbnail-left>img:first-child { /* Enlarge Photo */
position: relative;
top: 0;
left: 0;
max-width: 100%;
max-height: none;
height: auto;
margin: 0 auto;
border: 1px solid #dadce0;
border-radius: 6px;
background-color: transparent !important;
}
ion-view[state="event-list"] .list h2.ng-binding { /* Event Title */
margin-top: 10px;
margin-left: 4px;
margin-bottom: 4px;
font-size: 20px;
white-space: normal;
font-weight: bold;
text-transform: capitalize;
color: #fa941f;
text-align: left;
}
ion-view[state="event-list"] .list p.ng-binding { /* Event Sub-title and Start Time */
margin-top: 0;
margin-left: 4px;
margin-bottom: 0;
font-size: 16px;
white-space: normal;
color: rgba(76, 76, 75, 0.8);
text-align: left;
}
__________________________________________________________________________________
NOTES:
Elements in BOLD can be updated.
- Colours - you can replace the HEX codes with the required colours. You can use section tags in BOLD see what section CSS element belongs to.
- URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs in BOLD.