» » » Costum Warna Template Aplikasi Sikola

Costum Warna Template Aplikasi Sikola

,

Secara default Aplikasi Sikola hanya memiliki satu varian warna yaitu hijau, tetapi Anda bisa membuat atau mengcostum warna/tema dari Sikola ini dengan mudah 

Berikut ini adalah Costum Warna Template Aplikasi Sikola

  1. Buka folder themes/kenny/dist/css
  2. Disana nanti terdapat file costum.css, pada file itu Anda bisa melakukan costum dengan pengetahuan css yang Anda miliki
  3. Tetapi jika Anda tidak memiliki pengetahuan css, Anda bisa melihat beberapa contoh kode css dengan tema Merah (red) dan Biru (blue) berikut
  4. Tema Merah(red). Replackan kode dibawah pada file costum.css Anda
    
.navbar.navbar-inverse {
        background: #a90404;
        border-color: #a90404;
}
.navbar.navbar-inverse.navbar-fixed-top {
        border-bottom: 1px solid #a90404;
        
}
.side-nav li a:hover {
        color: #a90404;
        
}
a.toggle-left-nav-btn i {
        font-size: 30px;
        
        color: #fff;
}
.pagination > li.active > a, .pagination > li.active > span {
        background: #a90404;
        
}
.region-center {
    background: linear-gradient(to top, #02275c, #1e5db7);
    margin:0 -20px;
}
footer {        
        background: #a90404;
        
}
.accordion-struct.panel-group .panel .panel-heading.activestate {
        background: #a90404;
        border-bottom: 1px solid #a90404;
}
.bg-blue {
        background: #012860 !important;
}

.panel-primary > .panel-heading {
        background-color: #1030A2;
}

.panel-success > .panel-heading {
        background-color: #600404;
}
.label-primary{background: #1030A2;}

.navbar .brand-img {
        margin: 5px 0 0 0;
}
.bg-green2 {
        background: #600404 !important;
}

.form-table {display: inline-block;}
input.form-control-auto{width: auto;}
.form-table .btn.btn-xs{padding:0;margin-right:18px;}
.profile-box .profile-info-wrap {
        background-image: linear-gradient(to bottom,#a90404 0%,#c47070 100%);
}
.profile-box .social-info {
        background: linear-gradient(to top,#5c0202 0%,#c47070 100%);
        padding: 30px 100px;
}
.bg-gd0{background: linear-gradient(to top, #36c7ac, #76d5b5d9);}
.bg-gd1{background: linear-gradient(to bottom, #36c7ac, #76d5b5d9);}
.bg-gd2{background: linear-gradient(to top, #6ab4d8, #4a98aa);}
.bg-gd3{background: linear-gradient(to bottom, #86bfdb, #4a98aa);}
#single-wrapper {
        min-height: 100%;
        background: url('../img/bg2.jpg');
        background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
        overflow: hidden;
        width: 100%;
        padding: 0px 15px 0px 15px;
}
#single-wrapper2 {
        min-height: 100%;
        background: url('../img/bg2.jpg');
        background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
        overflow: hidden;
        width: 100%;
        padding: 0px 15px 0px 15px;
}

.bg-image {
  background-image: url('../img/bg2.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


.myicon {
        font-size: 12px;
        color: #123456;
        background: white;
        padding: 12px 15px;
        border-radius: 30%;
        font-family: FontAwesome;
        width: 100%;
        margin: 5px 5px;
}
.myicon-2 {
        font-size: 12px;        
        background: white;
        padding: 12px 15px;
        border-radius: 30%;     
        width: 50%;
        margin: 5px 5px;
}
.card-view-transparent {background: #ffffff80;}
.card-view-2 {background: #33d57a;}
.card-view-3 {background: linear-gradient(to bottom,#a90404 0%,#b2d64e 100%);}
.card-view-4 {background: linear-gradient(to top,#5c0202 0%,#c47070 100%);}
.bg-costum1 {background: #26f1ae !important;}
.bg-costum2 {background: #56B9C9 !important;}
.card-view-transparent {background: #ffffffe6;}
.card-view-transparent2 {background: #ffffff57;}
.table-hover > tbody > tr:hover { background-color: #a90404 !important; color: #fff}

@media (max-width: 378px) {
        .profile-box .social-info i {font-size: 22px;}
        .card-view-transparent2 {background: #ffffff;}
        #single-wrapper2 {background-size: cover;background-position: center center;}
}
@media (max-width: 768px) {
                .card-view-transparent2 {background: #ffffff;}          
                #single-wrapper2 {background-size: cover;background-position: center center;}
        }
  5. Tema Biru (blue). Replackan kode dibawah pada file costum.css Anda
      
  .navbar.navbar-inverse {
        background: #01347C;
        border-color: #01347C;
}
.navbar.navbar-inverse.navbar-fixed-top {
        border-bottom: 1px solid #01347C;
        
}
.side-nav li a:hover {
        color: #01347c;
        
}
a.toggle-left-nav-btn i {
        font-size: 30px;
        
        color: #fff;
}
.pagination > li.active > a, .pagination > li.active > span {
        background: #01347c;
        
}
.region-center {
    background: linear-gradient(to top, #02275c, #1e5db7);
    margin:0 -20px;
}
footer {        
        background: #02275C;
        
}
.accordion-struct.panel-group .panel .panel-heading.activestate {
        background: #01347c;
        border-bottom: 1px solid #01347c;
}
.bg-blue {
        background: #012860 !important;
}

.panel-primary > .panel-heading {
        background-color: #1030A2;
}

.panel-success > .panel-heading {
        background-color: #09254d;
}
.label-primary{background: #1030A2;}

.navbar .brand-img {
        margin: 5px 0 0 0;
}
.bg-green2 {
        background: #09254d !important;
}

.form-table {display: inline-block;}
input.form-control-auto{width: auto;}
.form-table .btn.btn-xs{padding:0;margin-right:18px;}
.profile-box .profile-info-wrap {
        background-image: linear-gradient(to bottom,#01347c 0%,#70a4c4 100%);
}
.profile-box .social-info {
        background: linear-gradient(to top,#02275c 0%,#70a4c4 100%);
        padding: 30px 100px;
}
.bg-gd0{background: linear-gradient(to top, #36c7ac, #76d5b5d9);}
.bg-gd1{background: linear-gradient(to bottom, #36c7ac, #76d5b5d9);}
.bg-gd2{background: linear-gradient(to top, #6ab4d8, #4a98aa);}
.bg-gd3{background: linear-gradient(to bottom, #86bfdb, #4a98aa);}
#single-wrapper {
        min-height: 100%;
        background: url('../img/bg2.jpg');
        background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
        overflow: hidden;
        width: 100%;
        padding: 0px 15px 0px 15px;
}
#single-wrapper2 {
        min-height: 100%;
        background: url('../img/bg2.jpg');
        background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
        overflow: hidden;
        width: 100%;
        padding: 0px 15px 0px 15px;
}

.bg-image {
  background-image: url('../img/bg2.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


.myicon {
        font-size: 12px;
        color: #123456;
        background: white;
        padding: 12px 15px;
        border-radius: 30%;
        font-family: FontAwesome;
        width: 100%;
        margin: 5px 5px;
}
.myicon-2 {
        font-size: 12px;        
        background: white;
        padding: 12px 15px;
        border-radius: 30%;     
        width: 50%;
        margin: 5px 5px;
}
.card-view-transparent {background: #ffffff80;}
.card-view-2 {background: #33d57a;}
.card-view-3 {background: linear-gradient(to bottom,#01347c 0%,#b2d64e 100%);}
.card-view-4 {background: linear-gradient(to top,#02275c 0%,#70a4c4 100%);}
.bg-costum1 {background: #26f1ae !important;}
.bg-costum2 {background: #56B9C9 !important;}
.card-view-transparent {background: #ffffffe6;}
.card-view-transparent2 {background: #ffffff57;}
.table-hover > tbody > tr:hover { background-color: #01347c !important; color: #fff}

@media (max-width: 378px) {
        .profile-box .social-info i {font-size: 22px;}
        .card-view-transparent2 {background: #ffffff;}
        #single-wrapper2 {background-size: cover;background-position: center center;}
}
@media (max-width: 768px) {
                .card-view-transparent2 {background: #ffffff;}          
                #single-wrapper2 {background-size: cover;background-position: center center;}
        }
  6. Simpan selesai, jika tidak terjadi perubah, clear cache browser Anda


1 Response to "Costum Warna Template Aplikasi Sikola"

  1. Ifrod MaksumFebruary 20, 2023 at 6:48 PM

    mirip-mirip coding blogger ya, hanya beda tempat kayaknya

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin

Subscribe to:Post Comments (Atom)
nagabet76slot gacorslot online1213141516Slot Online Menghadirkan Pengalaman Digital Yang Didukung Pemrosesan Data Secara Real TimeMahjongways Menganalisis Pola Visual Dan Dinamika Simbol Berdasarkan Pemrosesan Data DigitalMahjongways Mengembangkan Dinamika Permainan Melalui Pengelolaan Data Dan Elemen Visual TerintegrasiAnalisis Komputasi Modern Membantu Memetakan Dinamika Sistem Digital Berdasarkan Data ObservasiMember Baru Mendorong Dinamika Komunitas Digital Menuju Pengalaman Yang Lebih Aktif Dan Menarikslot onlinemahjongwayasarsitektur layananpemrosesan data adaptifmember baruSlot Online Terbaru Menghadirkan AnalisisScatter Hitam Dianalisis Melalui PemetaanPola Scatter Hitam Membentuk Distribusi Visual Yang Dapat Dikaji Menggunakan Komputasi AdaptifArsitektur Teknologi TerdistribusiTeknologi Visualisasi DataMahjongways Mengembangkan Interaksi Visual Melalui Integrasi Simbol Digital Yang DinamisAnalisis Mahjongways Memetakan Dinamika Visual Dan Respons Antarmuka Berbasis DataScatter Hitam Dianalisis Melalui Pemetaan Struktur Simbol Digital Berbasis Komputasi AdaptifAlgoritma Scatter Hitam Membantu Mengidentifikasi Dinamika Pola Melalui Analisis Data ObservasiPg Soft Mengembangkan Sistem Rendering Adaptif Untuk Mendukung Visualisasi Digital ModernTeknologi Pg Soft Mengoptimalkan Pemrosesan Grafis Melalui Arsitektur Rendering TerintegrasiTeknologi Pemodelan Data Membantu Menganalisis Dinamika Informasi Pada Ekosistem Digital ModernArsitektur Komputasi Terdistribusi Meningkatkan Keandalan Pengelolaan Data Pada Platform DigitalTeknologi Kecerdasan Komputasional Mendorong Pengembangan Sistem Digital Yang Lebih AdaptifPemrosesan Data Modern Membantu Memetakan Pola Informasi Melalui Pendekatan Komputasi TerukurTeknologi Integrasi Data Mempermudah Sinkronisasi Informasi Dalam Lingkungan Digital TerpaduVisualisasi Komputasi Modern Membantu Menginterpretasikan Perubahan Pola Pada Sistem Digital KompleksTeknologi Otomasi Data Meningkatkan Efisiensi Pengelolaan Informasi Pada Infrastruktur DigitalModel Komputasi Adaptif Mendukung Pengembangan Teknologi Digital Melalui Analisis Data BerkelanjutanPengembangan Pg Soft Mengintegrasikan Teknologi Rendering Dengan Interaksi Visual Yang ResponsifPg Soft Menerapkan Komputasi Visual Untuk Meningkatkan Efisiensi Pengolahan Elemen DigitalEksplorasi Scatter Hitam Memetakan Distribusi Simbol Melalui Model Analitik Digital TerintegrasiPola Scatter Hitam Dikaji Menggunakan Pendekatan Visualisasi Data Dan Pemodelan StatistikMahjongways Menghadirkan Pendekatan Visual Interaktif Melalui Pemrosesan Simbol Yang AdaptifEksplorasi Mahjongways Mengungkap Perubahan Pola Visual Dalam Lingkungan Digital Terintegrasikasino online dan perubahan cara pengguna menilai keamanan platform digitalmengapa promosi kasino online sering memengaruhi harapan pengguna baruketika tampilan mewah kasino online membentuk kesan kepercayaan penggunapengaruh cerita kemenangan orang lain terhadap minat mengakses kasino onlinekasino online dalam fenomena perubahan pola konsumsi hiburan masyarakatbagaimana kasino online memanfaatkan desain interaktif untuk menarik perhatianalasan sebagian pengguna kasino online lebih mengingat bonus daripada risikoketika kemudahan transaksi mengubah kebiasaan pengguna kasino onlinekasino online dan tantangan menjaga kesadaran finansial di era serbadigitalmengapa ulasan pengguna dapat membentuk persepsi terhadap kasino onlinemahjong online dan perubahan cara generasi digital mengenal permainan klasikmengapa mahjong online menarik perhatian komunitas pecinta permainan strategiketika animasi modern memberikan identitas baru pada mahjong onlineperan fitur multiplayer dalam membangun interaksi pemain mahjong onlinemahjong online membawa warisan permainan asia ke dalam ekosistem digitalbagaimana mahjong online mengadaptasi simbol tradisional menjadi desain modernpengaruh tampilan antarmuka terhadap kenyamanan pengguna mahjong onlinemahjong online dan fenomena berkembangnya komunitas permainan lintas generasimengapa variasi aturan mahjong online menjadi topik menarik bagi pemain baruperjalanan mahjong online dari hiburan berbasis browser menuju platform mobile