Xpoda Client CSS Changes

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