Personnaliser Citrix StoreFront 3.x

Je vous laisse avec un document assez simple sur la façon dont en quelques minutes nous y consacrons, nous pourrons donner un nouveau visage à notre portail d’applications Citrix ou à nos postes de travail, notre bien-aimé StoreFront! Il est très facile et très apprécié par nos utilisateurs de créer un portail d’entreprise cool! Et si les utilisateurs ne nous remercient pas, Nous savons que les managers 😉

Dans ce document, nous nous basons sur la modification d’une StoreFront 3.5, Mais nous pourrions l’utiliser pour n’importe quelle version de 3.x. Et si ce n’est pas le cas, Je recommanderai toujours la façon dont je fais pour savoir quoi et où modifier, Je suis sûr que certains d’entre eux facilitent les choses, mais j’utilise une extension Firefox appelée Pyromane. Passez quelques minutes dessus et vous verrez à quel point il est facile de modifier un site Web pour savoir ce qu’il faut toucher sur les « vrais » fichiers plus tard.

Il s’agit d’un exemple de portail personnalisé, Utiliser notre image de marque:

Si nous voulons avoir une interface comme celle de l’image, Où nous pouvons changer les logos, Couleurs du texte/bouton, Le fond… Nous pourrons suivre les étapes suivantes et en quelques minutes nous l’aurons!!

Image d’arrière-plan

Il suffira de remplacer le fichier 'C:\inetpubwwwrootCitrixStoreWebreceiverimagescommonReceiverFullScreenBackground_46E559C0E6B5A27B.jpg’ pour le fonds que nous voulons, Il sera donc conseillé de conserver la même taille d’image et de lui fournir une bonne qualité.

Couleur du bouton

Pour changer la couleur du bouton “Connexion” ou tout autre que l’utilisateur reçoit, dans le « C:\inetpubwwwrootCitrixStoreWebreceivercssctxs.large-ui.min_77F67A01D0A24AF1.css" nous remplacerons le #02a1c1 par notre couleur d’entreprise.

Couleurs du texte

Si nous voulons modifier le texte 'Nom d’utilisateur/Mot de passe', Dans le même fichier, nous remplacerons la ligne '.plain{marge-gauche:0;couleur: #9A9A9A;taille_police:17Px;poids-police:300;hauteur-ligne:44Px}.credentialform' par la police et la couleur que nous voulons.

Pour modifier la couleur de la police active dans les champs de texte, Nous allons changer dans l’entrée '.credentialform[type=mot de passe]:Foyer{couleur:noir}.credentialform' la couleur qui nous intéresse, remplacement du 'noir'.

Pour changer la couleur de la lettre inactive dans les champs de texte, nous allons changer en '.pseudo-input{Taille-boîte:Boîte-bordure;Largeur:385Px;hauteur:44Px;contour:0;Frontière:0;couleur-fond:blanc;taille_police:16Px;couleur:#666}.credentialform' en changeant le '#666' en la couleur que nous voulons (Il s’agira généralement d’une teinte plus foncée que la précédente).

Changer la taille du logo,

Nous savons déjà que les logos seront saisis depuis la console Studio, Ci-dessous, vous avez l’image pour personnaliser 'Web Receiver'. Mais, pour changer la taille du logo initial et mettre un logo plus grand que celui que la console Citrix StoreFront nous laisse, nous modifierons en 'C:\inetpubwwwrootCitrixStoreWebcustom' le fichier 'style.css' changeant les tailles qui nous intéressent, en plus de mettre les images nécessaires avec cette résolution dans ce même chemin. Nous avons remplacé les tailles dans le CSS:

.logo-conteneur{

image-arrière-plan: URL('Citrix_HalfHeaderLogo.png');

taille-arrière-plan: 170px 40px;

}

.is-hdpi .logo-container{

image-arrière-plan: URL('logo-tun-350-120.png');

taille-arrière-plan: 175px 60px;

}

Trace horizontale

Pour changer la couleur de la trace grise qui a de la transparence et qui recouvre l’écran de gauche à droite, nous modifierons en "C:\inetpubwwwrootCitrixStoreWebreceivercssctxs.large-ui.min_77F67A01D0A24AF1.css" le code avec notre couleur et le % transparence dans: 'couleur-de-fond:RGBA(63,54,67,0.8);alignement-texte:Centre}.web-screen'.

Personnalisation à partir de la console

Nous le savons déjà, à partir de la console StoreFront, Sur notre site Web, nous pouvons changer le thème du portail pour un thème qui nous identifie davantage, depuis “Personnaliser l’apparence” Nous pouvons modifier les logos, celui d’avant la connexion, celui une fois la session démarrée, Couleur d’arrière-plan, La couleur des textes, La couleur des liens…