auto_stories Bilgi Bankası chevron_right Guides chevron_right Makale

XPODA Client Ekranı CSS Değişiklikleri

Client ara yüzünde yer alan alanları kendinize veya şirketinizin renklerine göre özelleştirebilirsiniz. Örnek olarak, değişiklik yapılması istenilen alanların klasör yolları ve değiştirilmesi gereken değerleri aşağıdaki gibidir.

NOT: Client ekranını özelleştirebilmek On-prem kurulumlarda mümkündür. Cloud kullanımında Client ekranı özelleştirilemez.

1-CLIENT GİRİŞ BÜYÜK LOGO

Klasör Yolu:

{CLIENT_INSTALL_FOLDER}\Content\_v2\img\bg-login.png

ek1.png

2-CLIENT GİRİŞ SOL ÜST LOGO

Klasör Yolu:

{CLIENT_INSTALL_FOLDER}\Theme\assets\images\Xpoda-logo.png

ek2.png

3- CLIENT ARKA PLAN RENGİ / USER-PASSWORD YAZI RENGİ

Klasör Yolu:

{CLIENT_INSTALL_FOLDER}\Content\_v2\login.css

.page-account {

    text-align: center;

     background-color: #3aa9cd;         ---- arkaplan rengi

     color: #ffffff;                    ---- User/Password yazı rengi

ek3.png

4- DİL SEÇİMİ YAZI RENGİ / BOYUTU

Klasör Yolu:

{CLIENT_INSTALL_FOLDER}\Content\_v2\login.css

    .language-list a {

        text-decoration: none;

        border: none;

        color: #333333;                ---- dil seçim yazı rengi

        font-size: 14px;               ---- dil seçim yazı boyutu

    }

ek4.png

5- LOGİN BUTONU

Klasör Yolu:

{CLIENT_INSTALL_FOLDER}\Content\_v2\login.css

    .page-account .btn {

        border-radius: 3px;             ---- Login butonu kenar yumuşatması

        background-color: #3f2747;      ---- Login butonu arkaplan rengi

        border-color: #FFF;             ---- Login butonu kenar rengi

    }

 

Klasör Yolu:

{CLIENT_INSTALL_FOLDER}\Content\_v2\vendor\bootstrap\bootstrap.min.css

.btn-primary{color:#fff;   ---- Login buton yazı rengi

ek5.png 

6- CLIENT GİRİŞ ÜST KISIM RENGİ

Klasör Yolu:

{CLIENT_INSTALL_FOLDER}\Content\_v2\login.css

.page-account header {

    background-color: #000000;           ---- üst kısım arkaplan rengi

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 12%;

}

ek6.png 

7- CLIENT MENU ARKA PLAN RENGİ

Klasör Yolu:

{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 menü arka plan rengi

ek7.png

 

8- CLIENT MENU SOL ÜST ARKA PLAN RENGİ

Klasör Yolu:

{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;    ---- Arkaplan rengi

        width: 240px;

        height: 63px;

    }

ek8.png

9- CLIENT MENU ANA BAŞLIK YAZI RENGİ

Klasör Yolu:

{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;   -- Yazı rengi

        }

ek9.png

10- CLIENT MENU ÇUBUK RENGİ

Klasör Yolu:

{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;      ---- Menü çubuk rengi

}

ek10.png

11-   CLIENT MENU ALT BAŞLIK YAZI RENGİ

Klasör Yolu:

{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);     --- Client menü alt başlık yazı rengi

font-size: calc(15px - 2px);

font-weight: 500;

ek11.png