Easy Customizing/Branding The Citrix Receiver for Web

A couple months ago I made a post about customizing the cloud gateway.The real name for that product is Citrix Receiver for Web and is part of the StoreFront Express. Digging deeper in the Receiver for Web I found that it is really easy to modify the appearance of that site. You don’t have to change all the original files. Only just one.

Terry Duchastel has made a very clean and easy how-to about branding the site. I’ve borrowed some elements from that post and put it in this simple CSS Winking smile He has made a couple of links in the logon page for helpdesk purpose. That part is skipped (because I don’t want to change the default html structure). The only thing with that type of branding, is that it will be gone when an upgrade is performed. Sad smile

Citrix made the structure of the site so that it first reads it’s default CSS and at the end all custom settings. Due to this way we only need to change the file named: custom.style.css

There is always a demand for the Fokke and Sukke Web Interface, that I made just for fun a long time ago. I don’t have the sources for this anymore. This is not gone happen again Winking smile .

Paste this CSS structure into C:\inetpub\wwwroot\Citrix\StoreWeb\contrib\custom.style.css (Assuming default installation) and refresh your Receiver or Web Winking smile

All images are hosted on my site. I know that isn’t the way it should be, but it’s more to see how easy it is to change the appearance. Smile

/* Edit this file to customize the User Interface by overriding the existing CSS Styles. * You can use browser development tools to identify the CSS classes you want to customize. * * This file is downloaded from www.jeroentielen.nl The costumizations are simple and only change the appereance * of the website. */

/* Background image. */ body {
background-image: url(“https://www.jeroentielen.nl/wp-content/uploads/2012/05/1338366984.jpg”);
}

/* Logon box font color, size and alignment. */ #logonbox-logonform label{
color:black;
display:table-cell;
font-size:12px;
height:20px;
vertical-align:bottom;
}

/* Messages Box. (Keep this font color the same color as the logon box. */ .ctxsui-messagebox {
height:142px;
min-width:388px;
max-height:300px;
width:510px;
display:table;
color:black;
}

/* Image/Logo left from logon box. */ #logonbox-logoimage {
background:transparent;
background-image:url(“https://www.jeroentielen.nl/wp-content/uploads/2012/05/1338369004.png”);
border:0 none;
float:right;
height:163px;
position:absolute;
right:71%;
top:40px;
width:200px;
}

/* The light bar across the middle at the logon screen. */ #logonbox-innerbox {
background:url(“../uiareas/Authentication/media/Screen_SemiTranslucent.png”);
display:table;
height:242px;
width:100%;
margin-left:9px;
}

/* The vertical bar at the left from the light bar at the logon screen. */ #logonbox-container {
background:url(“https://www.jeroentielen.nl/wp-content/uploads/2012/05/1338369243.png”) repeat-y scroll 0 0 transparent;
min-height:230px;
margin:auto;
min-width:654px;
position:relative;
top:205px;
}

/* The image/logo at the top left when logged on. */ #header-logo { float:left; background-image:url(“https://www.jeroentielen.nl/wp-content/uploads/2012/05/1338371753.png”); background-repeat:no-repeat; float:left; width:149px; height:90px; margin:20px 0px 0px 20px; }

/* The font color of the top welcome message and username. */ #resources-header #header-userinfo {
float:left;
margin-top:12px;
margin-right:25px;
vertical-align:middle;
color:black;
}

/* The font color of the top log off link. (Keep this the same as the top welcome message) */ #resources-header #header-logofflink {
float:left;
color:black;
cursor:pointer;
padding-left:8px;
padding-right:8px;
}

/* The font color of the application links. */ .myapps-name {
padding-top:6px;
text-align:center;
margin:0 auto;
color:black;
cursor:pointer;
}

/* The background frame around each application. */ .myapps-icon {
display:block;
margin:0 auto;
width:69px;
height:69px;
background:transparent;
background-image:url(“../uiareas/Store/media/MainAppIcon_normal.png”);
background-repeat:no-repeat;
}
.myapps-icon:hover {background-image:url(“../uiareas/Store/media/MainAppIcon_hover_backonly.png”);} .myapps-icon:focus {color:white;}

2 thoughts on “Easy Customizing/Branding The Citrix Receiver for Web”

Pingback: Firefox Firebug for customice StoreFront « User#101
Raj says:

7 April, 2015 at 22:44

You are great made my life easier!!

Share this:

Like this:

Jeroen

2 thoughts on “Easy Customizing/Branding The Citrix Receiver for Web”

Leave a Reply Cancel reply

Related Posts