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
2-CLIENT GİRİŞ SOL ÜST LOGO
Klasör Yolu:
{CLIENT_INSTALL_FOLDER}\Theme\assets\images\Xpoda-logo.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
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
}
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
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%;
}
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
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;
}
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
}
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
}
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;