Os dejo un documento bastante sencillote de cómo en unos pocos minutos que le dediquemos, podremos darle una nueva cara a nuestro portal de aplicaciones o escritorios de Citrix, nuestro querido StoreFront! Es muy fácil y muy agradecido por nuestros usuarios el hacer un portal corporativo chulo! Y si los usuarios no nos lo agradecen, sabemos que los directivos sí 😉

En este documento nos basamos en modificar un StoreFront 3.5, pero podríamos usarlo para cualquier versión de la 3.x. Y si no, siempre os recomendaré la forma que hago yo para saber qué y donde modificar, seguro que alguno lo hace más fácil, pero yo utilizo una extensión del Firefox llamada Firebug. Dedicarle un par de minutos y ya veréis qué fácil es modificar una web para saber qué tocar luego en los ficheros ‘reales’.

Este sería un ejemplo de un portal personalizado, usando nuestra imagen de corporativa:

Si queremos tener un interfaz como el de la imagen, donde podamos cambiar los logotipos, los colores del texto/botones, el fondo… podremos seguir los siguientes pasos y en unos pocos minutos lo tendremos!!

Imagen de fondo

Bastará con sustituir el fichero ‘C:\inetpub\wwwroot\Citrix\StoreWeb\receiver\images\common\ReceiverFullScreenBackground_46E559C0E6B5A27B.jpg’ por el fondo que queramos, recomendable será por tanto mantener el mismo tamaño de imagen y dotarla de buena calidad.

Color de los botones

Para cambiar el color del botón “Iniciar sesión” o cualquier otro que el usuario reciba, en el fichero “C:\inetpub\wwwroot\Citrix\StoreWeb\receiver\css\ctxs.large-ui.min_77F67A01D0A24AF1.css” reemplazaremos los #02a1c1 por nuestro color corporativo.

Colores de textos

Si queremos cambiar el texto de ‘Usuario/Contraseña’, en el mismo fichero reemplazaremos la línea ‘.plain{margin-left:0;color: #9a9a9a;font-size:17px;font-weight:300;line-height:44px}.credentialform’ por el tipo y color de letra que deseemos.

Para cambiar el color de la letra activa en los campos de texto, cambiaremos en ‘.credentialform input[type=password]:focus{color:black}.credentialform’ el color que nos interese, sustituyendo el ‘black’.

Para cambiar el color de la letra inactiva en los campos de texto, cambiaremos en ‘.pseudo-input{box-sizing:border-box;width:385px;height:44px;outline:0;border:0;background-color:white;font-size:16px;color:#666}.credentialform’ cambiando el ‘#666’ por el color que deseemos (normalmente será un tono más oscuro que el anterior).

Cambiando el tamaño del Logo,

Ya sabemos que los logotipos los meteremos desde la consola Studio, más abajo tenéis la imagen para personalizar ‘Receiver para Web’. Pero, para cambiar el tamaño del Logo inicial y poner un logo más grande del que nos deja la consola de Citrix StoreFront, modificaremos en ‘C:\inetpub\wwwroot\Citrix\StoreWeb\custom’ el fichero ‘style.css’ cambiando los tamaños que nos interese, además de poner las imágenes necesarias con dicha resolución en este mismo path. Reemplazamos los tamaños en el CSS:

.logo-container{

background-image: url(‘Citrix_HalfHeaderLogo.png’);

background-size: 170px 40px;

}

.is-hdpi .logon-logo-container{

background-image: url(‘logo-tun-350-120.png’);

background-size: 175px 60px;

}

Traza horizontal 

Para cambiar el color de la traza gris que tiene transparencia y que nos cubre la pantalla de izquierda a derecha, modificaremos en “C:\inetpub\wwwroot\Citrix\StoreWeb\receiver\css\ctxs.large-ui.min_77F67A01D0A24AF1.css” el código con nuestro color y el % de transparencia en: ’background-color:rgba(63,54,67,0.8);text-align:center}.web-screen’.

Customizando desde la consola

Esto ya lo conocemos, que desde la consola de StoreFront, sobre nuestro sitio Web podremos cambiar el tema del portal por uno que nos identifique más, desde “Personalizar apariencia” podremos cambiar los logotipos, el de antes de iniciar sesión, el de una vez iniciada la sesión, el color de fondo, el color de los textos, el color de los enlaces…

Y este sería el aspecto de nuestro nuevo portal de aplicaciones!!! claro, que vosotros seguro que tenéis más gusto que yo 😉