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("
http://www.jeroentielen.nl/wp-content/uploads/sites/3/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("
http://www.jeroentielen.nl/wp-content/uploads/sites/3/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("
http://www.jeroentielen.nl/wp-content/uploads/sites/3/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("http://www.jeroentielen.nl/wp-content/uploads/sites/3/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;}

image image


Jeroen

Read more about Jeroen here

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

StoreFront

Configure StoreFront to default show the “Categories” tab

Note: Tested and designed for StoreFront 3.5.0.23 When installing StoreFront and configure a Receiver for Web (RfW) website you can choose for a default page to show. The options are: Auto, Applications and Desktops. If you Read more…

StoreFront

Nederlandse vertaling X1 StoreFront X1 / Receiver X1 for Web

Onlangs is de nieuwe Receiver for Web X1 als technical preview aan de community gegeven. Zodat iedereen een beetje kan spelen met wat de toekomst ons gaat brengen. In deze Technical Preview zit reeds een Read more…

Uncategorized

Quiet in here.

Hi all readers. I’m sorry that my latest post is from a long long time ago. I have a couple of blogs almost done (80%) but time is not there to finish them 🙁 My Read more…