Bu yazımda sizlere VMware Horizon Portal sayfasının tasarımını nasıl özelleştirebileceğimizi anlatacağım.
Connection Server rolüne sahip sunucu üzerinde “C:\Program Files\VMware\VMware View\Server\broker\webapps\portal\webclient” adresine gelelim. Logo ve arka plan olarak kullanacağımız resimleri “icons-15736269” klasörüne kopyalalım.
Aşağıdaki resimde Horizon Connection Server Portal web sayfasının varsayılan tasarımını görüyoruz. İlk adım olarak VMware Horizon logosunu ve arka plan resmini değiştireceğiz.
“C:\Program Files\VMware\VMware View\Server\broker\webapps\portal\webclient” klasörü içerisindeki style.css dosyasını metin editörü ile açalım.
Logo değişimi için, .ui-pattern-logo parametresine gelelim ve background bölümünde logoyu belirleyelim.
.ui-pattern-logo {
height: 112px;
margin: 0 auto;
width: 180px;
background: url(icons-15736269/portal_logo.png) no-repeat;
margin-bottom: 32px;
}
Arka plan değişimi için, .login-bg parametresine gelelim ve background-image bölümünde arka planı belirleyelim.
.login-bg {
text-align: center;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
background-image: url(icons-15736269/portal_bg.jpg);
min-height: 900px;
}
Portal ekranında logo ve arka plan değişimini yaptıktan sonra, HTML5 Access giriş ekranını düzenleyeceğiz. Aşağıda varsayılan olarak HTML5 Access web sayfasını görmekteyiz.
Kullanıcı giriş ekranı için yine aynı klasörde “style.app-htmlaccess…..” dosyasını metin editörü ile açalım.
Logo değişimi için, .ui-pattern-logo parametresine gelelim ve background bölümünde logoyu belirleyelim.
.ui-pattern-logo {
height: 112px;
margin: 0 auto;
width: 180px;
background: url(icons-15736269/portal_logo.png) no-repeat;
margin-bottom: 32px;
}
Arka plan değişimi için, .login-bg parametresine gelelim ve background-image bölümünde arka planı belirleyelim.
.login-bg {
text-align: center;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
background-image: url(icons-15736269/portal_bg.jpg);
min-height: 900px;
}
Bu aşamada logo ve arka plan değiştirmenin yanında, sayfa elementlerinin dilini değiştirelim ve Türkçeye çevirelim.
“C:\Program Files\VMware\VMware View\Server\broker\webapps\portal\webclient\locale” klasörüne gelelim ve en.json dosyasında aşağıdaki parametreleri belirleyelim. Bu parametreler hali hazırda olduğu için sadece değerlerini Türkçe olarak değiştirebiliriz.
"dialog_label_username": "Kullanıcı Adı:", "dialog_placeholder_username": "Kullanıcı Adı", "dialog_label_password": "Şifre:", "dialog_placeholder_password": "Şifre", "dialog_btn_signin": "Giriş", "CANCEL": "İptal", "dialog_btn_signin_waiting": "Giriş yapılıyor...",
Horizon web sayfasına giriş yaptıktan sonra uygulamaları ve sanal masaüstleri gördüğümüz ekran üzerinde de oynamalar yapacağız. Yine bu ekranda da logo ve arka plan üzerinde değişiklikler yapalım.
“style.app-htmlaccess…..” dosyasını yine metin editörü ile açıp, logo değişimi için, .navbar-brand parametresine gelelim ve background bölümünde logoyu belirleyelim.
.navbar-brand {
background: url(icons-15736269/logo-horizon2x.png) no-repeat;
background-size: 362px 210px;
}
Arka plan değişimi için, ikinci .body parametresine gelelim. Bu parametrede, isterseniz arka plan rengini isterseniz de arka plan resmini ayarlayabiliriz.
body {
width: 100%;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 12px;
background-image: url(icons-15736269/portal2_bg.jpg);
}
Umarım sizler için de faydalı olmuştur.
