Untuk mengubah tampilan list file .pdf yang diunggah di modul Custom Page, silakan gunakan CSS di bawah ini. Model tampilan seperti pada gambar.
ion-view.module-cms.cms-l1 .card[ng-switch-when="file"] {
margin: 0;
padding: 0;
box-shadow: none;
}
ion-view.module-cms.cms-l1 .card[ng-switch-when="file"] .item.item-custom {
border-color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, 1);
color: rgba(68, 68, 68, 1);
background: rgb(213, 216, 217);
background: linear-gradient( 90deg, rgba(213, 216, 217, 1) 12%, rgba(240, 240, 240, 1) 12%);
padding-left: 50px;
border-radius: 5px;
margin: 10px;
border: 1px solid #d5d8d9 !important;
}
ion-view.module-cms.cms-l1 .card[ng-switch-when="file"] i.icon.ion-paperclip {
background-image: url(https://unpkg.com/ionicons@5.5.2/dist/svg/document-outline.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
font-size: 0;
}
ion-view.module-cms.cms-l1 div[ng-repeat="block in blocks"]:nth-last-child(1) .card[ng-switch-when="file"] {
padding-bottom: 50px;
}
Silakan ubah link gambar yang digunakan pada baris kode ion-view.module-cms.cms-l1 .card[ng-switch-when="file"] i.icon.ion-paperclip { jika ingin menggunakan icon file yang lain.
Catatan:
- Tampilan header tidak termasuk dalam artikel ini. Jika ingin membuat tampilan serupa, silakan simak DI SINI
