1. Ana Sayfa
  2. Horizon
  3. VMware Horizon Portal Tasarımı

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.

Yorum Yap

Yorum Yap