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

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple