How to change the WHMCS SIX Template colour?

[RickGrimes]

Kindly assist anyone? I am stuck here anyone even willing to to do it on my behalf?

 

[cyberhostservice]

Kindly assist anyone? I am stuck here anyone even willing to to do it on my behalf?

Spoiler: 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;
}

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

 

[RickGrimes]

So I just add the colour code? i.e #f44336

 

[cyberhostservice]

So I just add the colour code? i.e #f44336

Yes, whatever you want and find out first the color code that you want to change at the same time the structure is noticed not to get it wrong

 

[RickGrimes]

There is my custom.css file where do i add the colour code? Sorry for the follow up questions i am still a learner.

 

[cyberhostservice]

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