You can customize the fields in the client interface according to your own or your company's colors. For this, the folder paths of the fields to be changed and the values that need to be changed are as follows.
1- CLIENT LOGO PAGE
Folder Path:
{CLIENT_INSTALL_FOLDER}\Content\_v2\img\bg-login.png
2-CLIENT UPPER-LEFT LOGO
Folder Path:
{CLIENT_INSTALL_FOLDER}\Theme\assets\images\Xpoda-logo.png
3- CLIENT BACKGROUND COLOR / USER-PASSWORD TEXT COLOR
Folder Path:
{CLIENT_INSTALL_FOLDER}\Content\_v2\login.css
.page-account {
text-align: center;
background-color: #3aa9cd; ---- background color
color: #ffffff; ---- User/Password text color
}
4- LANGUAGE SELECTION TEXT COLOR / SIZE
Folder Path:
{CLIENT_INSTALL_FOLDER}\Content\_v2\login.css
.language-list a {
text-decoration: none;
border: none;
color: #333333; ---- language selection text color
font-size: 14px; ---- language selection text size
}
5- LOGİN BUTTON
Folder Path:
{CLIENT_INSTALL_FOLDER}\Content\_v2\login.css
.page-account .btn {
border-radius: 3px; ---- Login button border radius
background-color: #3f2747; ---- Login button background color
border-color: #FFF; ---- Login button border color
}
Folder Path:
{CLIENT_INSTALL_FOLDER}\Content\_v2\vendor\bootstrap\bootstrap.min.css
.btn-primary{color:#fff; ---- Login button text color
6- CLIENT TOP COLOR
Folder Path:
{CLIENT_INSTALL_FOLDER}\Content\_v2\login.css
.page-account header {
background-color: #000000; ---- background color
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12%;
}
7- CLIENT MENU BACKGROUND COLOR
Folder Path:
{CLIENT_INSTALL_FOLDER}\Theme/assets/css/demo_1/style.css/* Sidebar */
.sidebar {
min-height: calc(100vh - 63px);
background: -webkit-gradient(linear, left bottom, left top, from(#e3c7ef), to(#3f2747));
background: linear-gradient(to top, #e3c7ef, #3f2747); ---- Client menu background color
}
8- CLIENT MENU TOP LEFT BACKGROUND COLOR
Folder Path:
{CLIENT_INSTALL_FOLDER}\Theme/assets/css/demo_1/style.css
.navbar.default-layout .navbar-brand-wrapper {
transition: width 0.25s ease, background 0.25s ease;
-webkit-transition: width 0.25s ease, background 0.25s ease;
-moz-transition: width 0.25s ease, background 0.25s ease;
-ms-transition: width 0.25s ease, background 0.25s ease;
background: #3f2747; ---- background color
width: 240px;
height: 63px;
}
9- CLIENT MENU MAIN TITLE TEXT COLOR
Folder Path:
{CLIENT_INSTALL_FOLDER}\Theme/assets/css/demo_1/style.css
.sidebar > .nav .nav-item .nav-link {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 15px 30px 15px 55px;
color: #fff; -- Text color
}
10- CLIENT MENU BAR COLOR
Folder Path:
{CLIENT_INSTALL_FOLDER}\Theme/assets/css/demo_1/style.css
.sidebar > .nav .nav-item:not(.hover-open) .collapse .sub-menu .nav-item .nav-link:before,
.sidebar > .nav .nav-item:not(.hover-open) .collapsing .sub-menu .nav-item .nav-link:before {
content: "";
position: absolute;
top: 0px;
left: 35px;
display: block;
height: 100%;
width: 2px;
background: #3f2747; ---- Menu bar color
}
11- CLIENT MENU SUBTITLE TEXT COLOR
Folder Path:
{CLIENT_INSTALL_FOLDER}\Theme/assets/css/demo_1/style.css
.sidebar > .nav .nav-item:not(.hover-open) .collapse .sub-menu .nav-item .nav-link,
.sidebar > .nav .nav-item:not(.hover-open) .collapsing .sub-menu .nav-item .nav-link {
padding: 10px 30px 10px 70px;
position: relative;
color: rgba(255, 255, 255, 0.8); --- Subtitle text color
font-size: calc(15px - 2px);
font-weight: 500;
}