VMware Horizon Portal Tasarımı

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.

Benzer Yazılar