Untuk menggunakan CSS ini, silakan tambahkan modul Folder v2 ke aplikasi. Beberapa setingan yang perlu Anda ikuti, antara lain:
- Bagian tab Folder - Manage Folders - Edit Folder, isi title dan subtitle, centang show cover dan show title, pilih inherit global layout pada pilihan override layout, tambahkan gambar untuk cover sesuai ukuran yang diminta. Sebagai contoh, pada gambar demo di atas, Game Popular adalah subtitle, sedangkan SPECIAL PROMO adalah title.
- Masih di tab Folder - Manage Folders, perhatikan bagian Folder. Pada gambar demo di atas, menu seperti Fortnite, PUBG, dll. merupakan subfolder, jadi bukan modul lain di dalam folder. Untuk menambahkan subfolder, silakan klik tanda + (plus).
- Selanjutnya, buka subfolder yang baru dibuat dan ikuti persis seperti langkah pertama di atas, yakni tambahkan title, subtitle, dll. Gambar pada bagian cover atau thumbnail akan dipakai ketika Anda membuka subfolder tersebut. Sedangakan untuk thumbnail pada menu yang akan ditampilkan di bagian depan, gambar akan ditambahkan menggunakan CSS. Sebagai contoh, Fortnite adalah title, sedangkan TOPUP adalah subtitle. Lakukan hal yang sama untuk 3 subfolder pada baris pertama. Kemudian, 3 subfolder pada baris kedua berbeda hanya pada bagian title: Free Fire dan subtitle: More. Sedangkan sub-subfolder selanjutnya diisi title dan subtitle seperti pada umumnya. Sebagai contoh, title: Game Free Fire, sedangkan subtitle: Permainan battle royale yang dikembangkan oleh 111 Dots Studio. Usahakan antara title dan subtitle tidak terlalu panjang, direkomendasikan hanya menggunakan 1 atau 2 kata untuk title, dan 6-9 kata untuk subtitle.
- Beralih ke tab Design, silakan pilih Layout 3. Untuk background tidak digunakan pada tutorial ini.
- Pada tab Setting, tidak ada pilihan yang dicentang.
Catatan Penting:
- Subfolder yang digunakan pada tutorial ini sebanyak 12 buah. Anda dapat menambah atau menguranginya sesuai dengan kebutuhan. Hanya saja, jika Anda menambahkan lebih dari 12 subfolder, Anda perlu menyesuaikan CSS yang digunakan.
- CSS yang dibahas pada artikel ini dapat Anda temui di Member Area dengan nama CSS Folder v2 Model A2022._
Mengganti gambar:
Pada bagian header terdapat 2 buah gambar yang dipakai, yakni bagian icon aplikasi dan icon menu. Untuk mengganti icon aplikasi, temukan baris kode di bawah ini dan ubah link gambarnya sesuai kebutuhan.
ion-header-bar.bar-custom.bar.bar-header
Sedangkan untuk icon menu, temukan baris kode di bawah ini dan ubah link gambarnya sesuai kebutuhan.
button[ng-show="showLeftButton()"]
Gambar pada subfolder:
Untuk 3 menu pada blok pertama, silakan temukan baris kode di bawah ini secara beturut-turut dan ubah masing-masing link gambar yang digunakan.
- Menu pertama
.folder-layout.folder-l3 .folder-l3-row:nth-child(1) div.folder-l3-col:nth-child(1) img
- Menu kedua
.folder-layout.folder-l3 .folder-l3-row:nth-child(1) div.folder-l3-col:nth-child(2) img
- Menu ketiga
.folder-layout.folder-l3 .folder-l3-row:nth-child(1) div.folder-l3-col:nth-child(3) img
Untuk gambar 3 menu pada blok kedua, silakan ubah link gambar yang ada pada baris kode berikut:
- Gambar latar belakang blok
.folder-layout.folder-l3 .folder-l3-row:nth-child(2)
- Menu pertama
.folder-layout.folder-l3 .folder-l3-row:nth-child(2) div.folder-l3-col:nth-child(1) img
- Menu kedua
.folder-layout.folder-l3 .folder-l3-row:nth-child(2) div.folder-l3-col:nth-child(2) img
- Menu Ketiga
.folder-layout.folder-l3 .folder-l3-row:nth-child(2) div.folder-l3-col:nth-child(3) img
Untuk gambar 3 menu pada blok ketiga, silakan ubah link gambar yang ada pada baris kode berikut:
- Gambar latar belakang blok
.folder-layout.folder-l3 .folder-l3-row:nth-child(3)
- Menu pertama
.folder-layout.folder-l3 .folder-l3-row:nth-child(3) div.folder-l3-col:nth-child(1) img
- Menu kedua
.folder-layout.folder-l3 .folder-l3-row:nth-child(3) div.folder-l3-col:nth-child(2) img
- Menu Ketiga
.folder-layout.folder-l3 .folder-l3-row:nth-child(3) div.folder-l3-col:nth-child(3) img
Untuk gambar 3 menu pada blok ketiga, silakan ubah link gambar yang ada pada baris kode berikut:
- Gambar latar belakang blok
.folder-layout.folder-l3 .folder-l3-row:nth-child(4)
- Menu pertama
.folder-layout.folder-l3 .folder-l3-row:nth-child(4) div.folder-l3-col:nth-child(1) img
- Menu kedua
.folder-layout.folder-l3 .folder-l3-row:nth-child(4) div.folder-l3-col:nth-child(2) img
- Menu Ketiga
.folder-layout.folder-l3 .folder-l3-row:nth-child(4) div.folder-l3-col:nth-child(3) img
