Guide Book App

Situs ini akan sangat baik dilihat ketika Anda menggunakan browser modern dengan JavaScript yang telah diaktifkan.

Guide Book App

CSSCoder

Untuk membuat aplikasi guide book, Anda dapat memanfaatkan modul Custom Page. Berikut ini merupakan contoh guide book terkait data badan usaha.

Gunakan Layout 1.
Contoh di atas hanya menggunakan 4 buah modul, diantaranya 3 di bagian homepage, yakni Folder v2, PushNot, My Account dan 1 modul lainnya, yakni Custom Page diletakkan di dalam Folder v2.
Tambahkan modul Folder v2 ke dalam aplikasi. Folder v2 akan dijadikan sebagai beranda aplikasi. Jangan lupa tambahkan beberapa modul Custom Page ke dalamnya.
Setelah menambahkan modul Custom Page ke dalam Folder v2, buka Custom Page - pilih Text - klik Source Code pada blok Text.
Untuk blok Text pertama akan digunakan saebagai judul. Kopi dan tempatkan baris kode berikut ini ke dalam blok Text pertama.
<h1><strong>PRA PRODUKSI</strong></h1>

Untuk blok Text kedua dan seterusnya, silakan kopi baris kode di bawah ini.

<h1><strong>SIUP</strong></h1>
<p>Persyaratan:
<span>- KTP</span>
  <span>- NPWP</span>
  <span>- Surat Keterangan Domisili</span>
</p>
<p><a data-offline="true" data-params="value_id:192055" data-state="form2-home">DAFTAR</a></p></div>

Silakan ganti judul dan isinya sesuai kebutuhan. Untuk internal link, Anda dapat mengarahkan ke modul lain yang akan dituju ketika tombol DAFTAR diklik. Contoh di atas diarahkan ke modul Form v2.

Catatan Penting:
Urutan posisi blok harus sesuai dengan panduan di atas. Jumlah dan jenis modul juga diusahakan sama agar penyesuaian CSS yang digunakan tidak keliru dan salah.

Mengganti Warna Background

Untuk mengganti warna background di setiap halaman, temukan baris kode berikut.

ion-view.module-folder2.folder2-layout1,
ion-view.module-cms.cms-l1,
ion-view.module-push.push-list.push-list-l1,
ion-modal-view.customer-view.customer-layout1 {
    background-image: none !important;
    background-color: #6bc0cf !important;
    background: rgb(228, 57, 136);
    background: linear-gradient(180deg, rgba(228, 57, 136, 1) 0%, rgba(23, 13, 74, 1) 100%) !important;
}

Silakan ganti nilai properti background sesuai dengan kebutuhan. Anda dapat menggunakan warna rgb, hex, hsl, atau hwb. Baris kode di atas diterapkan pada modul Folder, Custom Page, Push Notification, dan My Account.

Untuk mengganti warna pada bagian yang ditandai angka 1 pada gambar di atas, temukan baris kode berikut ini.

ion-view.module-folder2.folder2-layout1 ion-content .list a.item.item-custom.item-avatar-square.item-avatar.item-center {
    width: 70%;
    margin: 10px 15%;
    padding: 0 !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #9d2972 !important;
    border-radius: 10px;
}

Lakukan langkah yang sama seperti poin 1 untuk mengganti warna.

Untuk mengganti warna background pada homepage (bagian yang ditandai angka 2), temukan baris kode d bawah ini.

.always .layout.l1 .tabs {
    background: #52195b;
    width: 90%;
    margin: 10px 5%;
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    box-shadow: none !important;
    border: 0 !important;
}

Untuk mengubah warna latar belakang setiap button menu di bagian homepage, temukan baris kode di bawah ini.

.layout .tab-item {
    position: relative;
    float: left;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    max-width: 30%;
    flex: 0 0 30%;
    padding: 0 !important;
    background-color: #5e1c5f !important;
    height: 45px;
    border-radius: 10px 20px;
    border: 1px solid #5f1c5f;
}

Selanjutnya, halaman pada gambar di bawah ini adalah halaman setelah button Pra Produksi, dll. diklik.

Untuk mengganti warna, lakukan hal yang sama pada baris kode di bawah ini.

Bagian yang ditandai angka 1 (judul halaman)

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"]:nth-child(3) .card strong {
    text-align: center;
    width: 90%;
    display: flex;
    justify-content: center;
    background-color: #fcd866;
    font-size: 28px;
    padding: 10px;
    margin: 0 5%;
    color: #fff;
}

Bagian yang ditandai angka 2 (border card)

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"]:nth-child(n+4) .item.item-text-wrap.item-custom.sb-cms-text {
    border: 2px solid #fcd866;
    margin: 10px;
}

Bagian yang ditandai angka 3 (button DAFTAR)

ion-view.module-cms.cms-l1 .card[ng-switch-when="text"] .item.item-text-wrap.item-custom.sb-cms-text .content.ng-binding p:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    background-color: #fcd866;
    padding: 10px;
    color: #fff;
}

Bagian yang ditandai angka 4 (persyaratan)

ion-view.module-cms.cms-l1 .card[ng-switch-when="text"] .item.item-text-wrap.item-custom.sb-cms-text .content.ng-binding p span {
    font-style: italic;
    color: #6bc0cf;
    font-size: 14px;
}

CSS

/* layout */

.always .layout.l1 .tabs {
    background: #52195b;
    width: 90%;
    margin: 10px 5%;
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    box-shadow: none !important;
    border: 0 !important;
}

.layout.l1 p {
    line-height: 11px;
    font-size: 11px;
    height: auto !important;
    overflow: hidden;
    margin: 0 !important;
}

.layout.l1 .tab-item img {
    width: 30px;
    height: 30px;
    max-height: 80%;
    margin: 0 !important;
}

.layout .tab-item {
    position: relative;
    float: left;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    max-width: 30%;
    flex: 0 0 30%;
    padding: 0 !important;
    background-color: #5e1c5f !important;
    height: 45px;
    border-radius: 10px 20px;
    border: 1px solid #5f1c5f;
}

li.col.col-20.tab-item:nth-child(n+4) {
    display: none;
}

.bar.bar-custom .title {
    color: transparent;
}

ion-header-bar.bar-custom.bar.bar-header {
    background-color: transparent !important;
}

ion-view.module-folder2.folder2-layout1,
ion-view.module-cms.cms-l1,
ion-view.module-push.push-list.push-list-l1,
ion-modal-view.customer-view.customer-layout1 {
    background-image: none !important;
    background-color: #6bc0cf !important;
    background: rgb(228, 57, 136);
    background: linear-gradient(180deg, rgba(228, 57, 136, 1) 0%, rgba(23, 13, 74, 1) 100%) !important;
}

ion-view.module-folder2.folder2-layout1 ion-content,
ion-view.module-cms.cms-l1 ion-content,
ion-view.module-push.push-list.push-list-l1 ion-content,
ion-modal-view.customer-view.customer-layout1 ion-content {
    background-color: transparent !important;
    bottom: 0 !important;
}

ion-view.module-folder2.folder2-layout1 .list .item.item-custom {
    background-color: #fff !important;
    border: 0;
}

ion-view.module-folder2.folder2-layout1 .list .item.item-custom h2.ng-binding {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    color: #fff;
}

ion-view.module-folder2.folder2-layout1 .list .item.item-custom p.ng-binding {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

ion-view.module-folder2.folder2-layout1 ion-content .list>.item.item-custom {
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 20px 0;
}

ion-view.module-folder2.folder2-layout1 ion-content .list a.item.item-custom.item-avatar-square.item-avatar.item-center {
    width: 70%;
    margin: 10px 15%;
    padding: 0 !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #9d2972 !important;
    border-radius: 10px;
}

ion-view.module-folder2.folder2-layout1 ion-content .list a.item.item-custom.item-avatar-square.item-avatar.item-center img {
    display: none;
}

ion-view.module-folder2.folder2-layout1 ion-content .list>.item.item-custom>img {
    width: 150px;
    margin: 20px;
    height: 150px;
    object-fit: contain;
    background-color: #fff;
    border-radius: 50%;
}

ion-view.module-cms.cms-l1 .card[ng-switch-when="text"] .item.item-text-wrap.item-custom.sb-cms-text .content.ng-binding p {
    display: flex;
    flex-direction: column;
    font-size: 16px;
}

ion-view.module-cms.cms-l1 .card[ng-switch-when="text"] .item.item-text-wrap.item-custom.sb-cms-text .content.ng-binding p:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    background-color: #fcd866;
    padding: 10px;
    color: #fff;
}

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"]:nth-child(3) {
    background-color: #fff;
    padding-top: 40px;
    margin-top: 50px;
    border-radius: 40px 40px 0 0;
}

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"]:last-child {
    border-radius: 0 0 30px 30px;
}

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"]:nth-child(3) .card {
    position: fixed;
    top: -35px;
    background-color: transparent !important;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"]:nth-child(3) .card strong {
    text-align: center;
    width: 90%;
    display: flex;
    justify-content: center;
    background-color: #fcd866;
    font-size: 28px;
    padding: 10px;
    margin: 0 5%;
    color: #fff;
}

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"]:nth-child(n+4) .item.item-text-wrap.item-custom.sb-cms-text {
    border: 2px solid #fcd866;
    margin: 10px;
}

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"] {
    background-color: #fff;
}

ion-view.module-cms.cms-l1 ion-content .scroll .card[ng-switch-when="text"] .item.item-text-wrap.item-custom.sb-cms-text {
    background-color: transparent;
}

ion-view.module-cms.cms-l1 ion-content .scroll .card[ng-switch-when="text"] {
    background-color: #fff !important;
    margin: 0;
    padding: 0 20px;
    box-shadow: none !important;
}

ion-view.module-cms.cms-l1 ion-content .scroll>div[ng-repeat="block in blocks"]:last-child:after {
    content: " ";
    height: 100px;
    display: block;
}

ion-view.module-cms.cms-l1 .card[ng-switch-when="text"] .item.item-text-wrap.item-custom.sb-cms-text .content.ng-binding p span {
    font-style: italic;
    color: #6bc0cf;
    font-size: 14px;
}