Free CSS SKIN for WHMCS Six Template

Are you using the FREE native SIX template that comes with WHMCS and wants to change the colour quickly?

You can do so with the following code, all you have to do is simply open up your favourite text editor and run a search and replace to change the two main colours to your choosing. In this example, we are using #00e4bc as the main colour and #e26a88 as the secondary.

Once complete, simply add this code to your custom.css file found in /templates/six/css.

/* Body */

body, button, input, select, textarea {
	color: #333;
}
a {
	color: #00e4bc;
	text-decoration:none;
}
a:hover {
	color: #e26a88;
	text-decoration:none;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
	background-color: #00e4bc;
	border-color: #00e4bc;
}

/* Header */

a.logo.logo-text {
	color: #fff;
	text-decoration: none;
}
section#header {
	background-color: #00e4bc;
}
.navbar-main {
	background-color: #00e4bc;
}
.navbar-main .navbar-nav>.active>a,.navbar-main .navbar-nav>.active>a:focus,.navbar-main .navbar-nav>.active>a:hover,.navbar-main .navbar-nav>.open>a,.navbar-main .navbar-nav>.open>a:focus,.navbar-main .navbar-nav>.open>a:hover,.navbar-main .navbar-nav>li>a:focus,.navbar-main .navbar-nav>li>a:hover {
	color:#fff;
	background-color:#00e4bc;
}
ul.top-nav>li>a {
	color: #fff;
}
.navbar-nav>li>a:hover {
	background: #00e4bc!important;
}
ul.top-nav>li.primary-action>a.btn {
	background-color: #e26a88;
}
ul.top-nav>li.primary-action {
	border-left: solid 0px #ddd;
}

/* Elements */

.fa-chevron-up:before {
	color: #fff;
}
.btn-primary {
	color: #fff;
	background-color: #e26a88;
	border-color: #e26a88;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary a {
	background: #00e4bc!important;
	border-color: #e26a88!important;
}
.btn-success:hover, .btn-success:active, .btn-success:focus, .btn-success a {
	background: #e26a88;
}
.alert-info {
	color: #333;
	background-color: #f9f9f9;
	border-color: #f9f9f9;
}
.label-warning {
	background-color: #e26a88;
}
a.list-group-item, button.list-group-item {
	color: #333;
}
div.header-lined .breadcrumb>.active {
	color: #333;
}
.form-control:focus {
	border-color: #00e4bc;
}
.btn-warning {
	background-color: #00e4bc;
	border-color: #00e4bc;
}
.panel-sidebar>.panel-heading, .panel-sidebar>.panel-heading h3 {
	color: #fff!important;
	background-color: #00e4bc;
	border-bottom: 0;
}

/* Cart Page */

.panel-sidebar a.list-group-item.active,.panel-sidebar a.list-group-item.active:focus,.panel-sidebar a.list-group-item.active:hover {
	background-color: #fff;
	border-color: #00e4bc;
	color: #333;
}
#order-standard_cart .order-summary {
	background-color: #00e4bc;
	border-bottom: 3px solid #00e4bc;
}
.btn-success {
	color: #fff;
	background-color: #00e4bc;
	border-color: #00e4bc;
}
#order-standard_cart .view-cart-items-header {
	background-color: #00e4bc;
}
div.header-lined h1 {
	color: #00e4bc;
}
#order-standard_cart .view-cart-items {
	border-bottom: 2px solid #00e4bc;
}

/* Domain Registration */

.domain-checker-container {
	background:#00e4bc!important;
}
.domain-checker-bg {
	background-image:none;
}
.domain-pricing .tld-pricing-header div:nth-child(odd) {
	border-color: #00e4bc;
}
.domain-pricing .tld-pricing-header .col-sm-2, .domain-pricing .tld-pricing-header .col-sm-4, .domain-pricing .tld-pricing-header .col-xs-2, .domain-pricing .tld-pricing-header .col-xs-4 {
	border-bottom: 2px solid #e26a88;
}
.domain-promo-box i {
	color: #00e4bc;
}
.text-primary {
	color: #333!important;
}
.text-warning {
	color: #333!important;
}

/* Dashboard */

.panel.panel-accent-gold {
	border-top: 3px solid #e26a88;
}
.bg-color-gold {
	background-color: #e26a88;
}
.bg-color-blue {
	background-color: #00e4bc;
}
.panel.panel-accent-blue {
	border-top: 3px solid #00e4bc;
}
.panel.panel-accent-emerald {
	border-top: 3px solid #00e4bc;
}
.bg-color-green {
	background-color: #00e4bc;
}
.bg-color-red {
	background-color: #00e4bc;
}
.navbar-main li.account {
	background-color: #e26a88;
}
em {
	font-style: normal;
}

/* Invoices */

.dataTables_wrapper .dataTables_info {
	background-color: #00e4bc;
}
.dataTables_wrapper table.table-list thead th:nth-child(even) {
	border-bottom: 4px solid #00e4bc;
}
.dataTables_wrapper table.table-list thead th {
	border-bottom: 4px solid #00e4bc;
}

/* Support Tickets */

.ticket-number {
	color: #333;
}
.status-active, .status-completed, .status-open {
	color: #e26a88;
}
.status-closed {
	color: #ccc;
}
.ticket-details-children span.label {
	background: #e26a88!important;
}
.panel-info>.panel-heading {
	color: #fff;
	background-color: #00e4bc;
	border-color: #00e4bc;
}
.btn-danger {
	color: #fff;
	background-color: #e26a88!important;
	border-color: #e26a88!important;
}
.ticket-details-children span.label {
	background: #e26a88!important;
}
.ticket-reply .user i {
	float: left;
	font-size: 1.6rem;
	padding: 10px 15px;
	color: #00e4bc;
}
label.label {
	background: #e26a88!important;
}
.alert-success {
	color: #fff;
	background-color: #00e4bc;
	border-color: #00e4bc;
}
.alert-success .alert-link {
	color: #fff;
}
.ticket-reply.staff .user {
	background-color: #e26a88!important;
	color: #fff;
}
.ticket-reply.staff {
	border: 1px solid #e26a88!important;
}
.ticket-reply.staff .date {
	color: #fff!important;
}
.ticket-reply .message {
	padding: 27px 15px 8px 15px;
}
.ticket-reply.staff i {
	color: #fff;
}
.ticket-reply .message {
	padding: 27px 15px 8px 15px;
}
.ticket-reply.staff i {
	color: #fff;
}
.status-answered, .status-fraud {
	color: #e26a88;
}

/*Order Page*/

#order-standard_cart .order-summary h2 {
	background: #00e4bc;
}
#order-standard_cart .summary-container {
	border-radius: 0px!important;
}
#order-standard_cart .order-summary {
	border-bottom: 3px solid #00e4bc!important;
}
#order-standard_cart .sub-heading span, #order-standard_cart .sub-heading-borderless span {
	color: #333!important;
}
.alert-warning {
	color: #fff;
	background-color: #00e4bc;
	border-color: #00e4bc;
}
.alert-warning .alert-link {
	color: #fff;
}

/* Checkout */

#order-standard_cart .view-cart-items-header {
	background-color: #00e4bc!important;
}
#order-standard_cart .view-cart-items {
	border-bottom: 2px solid #00e4bc!important;
}
#order-standard_cart .empty-cart .btn {
	background-color: #00e4bc!important;
}
.btn-link {
	color: #00e4bc;
}
.btn-info {
	color: #fff!important;
	background-color: #e26a88!important;
	border-color: #e26a88!important;
}
/* WHMCS Store */

#order-standard_cart .products .product header {
    background: #00e4bc;
}

span#product1-name {
    color: #fff!important;
}

If we have missed anything just let us know as we will be continusouly adding to this.

3 thoughts on “Free CSS SKIN for WHMCS Six Template”

Leave a Comment