How to change the WHMCS SIX Template colour?

cyberhostservice

Active member
Banned User
Dec 7, 2019
154
49
28
Kindly assist anyone? I am stuck here anyone even willing to to do it on my behalf?
/* 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;
}

CSS Colour Code https://www.w3schools.com/cssref/css_colors.asp
 

cyberhostservice

Active member
Banned User
Dec 7, 2019
154
49
28
27825

There is my custom.css file where do i add the colour code? Sorry for the follow up questions i am still a learner.
CSS is like us painting cartoons or humans in which there are structural arrangements ranging from head, body, hands to feet

So you have to understand the structure first, then the object, so we can give it the color we want. Simple but fatal if we don't understand the basic, use your imagination according to what I told above
 

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu