Customizing Receiver for Web 2.6 to mirror your 2.5 Setup (Fix the Google NPAPI Errors)

Customizing Receiver for Web 2.6 to mirror your 2.5 Setup (Fix the Google NPAPI Errors)

Customizing Receiver for Web 2.6 to mirror your 2.5 Setup (Fix the Google NPAPI Errors)

This post has already been read 11256 times!

I was recently in a situation where I had to do a fast upgrade of Citrix StoreFront from version 2.5 to 2.6  This has come about because Google have decided to disable NPAPI and this (being that Chrome seems to be the most popular browser) has caused some fairly major issues with people using StoreFront.

Citrix have written a good blog article on how to provide a work around for this here: http://blogs.citrix.com/2015/03/09/preparing-for-npapi-being-disabled-by-google-chrome/ however this is designed to be implemented in a StoreFront 2.6 environment.

With this in mind I thought it would be a nice easy upgrade from 2.5 –> 2.6, re-apply my customization and away we go.  Not so, there are some fairly minor UI updates in StoreFront 2.6 that if not addresses in your customization config can make your StoreFront implementation look average and non-professional at best!

NOTE: If you are sticking with the Green Bubble interface then this will not effect you, but if you have applied any customization and moved away from the “Green” look and feel then read on!

Firstly, the following 2 articles written by Citrix run you through changing the background, adding client IP Addresses, adding pre and post login messages.  What they don’t do is walk you through making your implementation look clean and professional my tidying up all the “little things”

Customize StoreFront 2.5 : http://blogs.citrix.com/2014/04/04/customizing-receiver-for-web-2-5/

Customize StoreFront 2.6 : http://blogs.citrix.com/2014/10/14/customizing-receiver-for-web-2-6/

Once you have followed these you will end up with a pretty decent looking web portal for application access.  However there will be some parts of the interface that still have the “Green Bubble” lingering.  I will walk you through changing them in the rest of this article.

The Spinning GIFS

onemoment

You will notice that when StoreFront is “thinking” you get the spinning gif, you will also notice that it has a green hue in the background.  To remove this download the above gif file and put it into your contrib folder inetpub\wwwroot\Citrix\StoreWeb\contrib then add the following code to your custom.style.css file.

.onemomentimage:before{
content:url(“onemoment.gif”);
}

NOTE: There are 2 other spinning gifs that I could see that also have the green hue.  I could not find the css to replace then using the contrib folder so I just replaced the gif files directly in the folder.  They are in inetpub\wwwroot\Citrix\StoreWeb\media and are called:

  • washer_16x16.gif
  • washer_sample.gif
  • Loader.gif

The Favicon

If you want your corporate icon to be displayed as a Favicon for the site then replace the following file with your chosen icon.

inetpub\wwwroot\Citrix\BupaWeb\media\ReceiverSmall.ico

The Green Plus Arrow

green_plus

To change this you will need to create 2 images 40 x 85 pixels in size.  One for the regular plus sign and one for when you hover your mouse over the icon (Mine are shown below).  Once you have these put them into your contrib folder (inetpub\wwwroot\Citrix\StoreWeb\contrib)

Normal (Left) Hover (Right)

plusSign_normal plusSign_hover

Then add the following code to your custom.styles.css file

#resources-navigationbar .storebutton:before {
content: “;
}
#resources-navigationbar .storebutton {
background: url(“plusSign_normal.png”) no-repeat;
background-position: left center;
margin-top: -40px;
width: 42px;
height: 85px;
background-color: none;
border: none;
box-shadow: none;
}
#resources-navigationbar .storebutton:hover{
background: url(“plusSign_hover.png”) no-repeat;
background-position: left center;
margin-top: -40px;
width: 42px;
height: 85px;
background-color: none;
border: none;
box-shadow: none;
}

You will then get a nice plus arrow according to your corporate colour scheme.

The Application Removal Cross

You will notice when removing applications from StoreFront you will get a little cross in the top left hand corner of the icon.  This cross has a green hue to it also.  To remove this create 2 images (one for normal and one for hover) and replace the following 2 images in this location: inetpub\wwwroot\Citrix\StoreWeb\uiareas\Store\media

  • Icon_close_hint.png
  • Icon_close_solid.png

remove

The Switchers

To replace the switchers at the bottom of the screen you will need to create 6 new images (listed below) and put them in the following location: inetpub\wwwroot\Citrix\StoreWeb\uiareas\Store\media

  • SwitcherBtnLeft.png
  • SwitcherBtnLeft_Down.png
  • SwitcherBtnLeft_Hover.png
  • SwitcherBtnRight.png
  • SwitcherBtnRight_Down
  • SwitcherBtnRight_Hover.png

This will give you a different look and feel to the App / Desktop Switchers.

switcher

Application Icon Border

This is new to StoreFront 2.6.  When hovering over an icon you get a border (green again) round the application.  If this does not go with your corporate colour scheme you can change the colour or remove it by adding this code to your custom.styles.css file.

.myapps-icon:focus,.myapps-icon.hovered{
    outline:0;
    border:dotted 1px #ffffff;
}

Change Password Background Colour

If you click the change password link then you are displayed a nice Green box for the usetrs to change their password.  Again, this does not look great so to change this add the following code to your custom.styles.css file.

.with-background-solid{background-color:#ffffff;
    background-color:rgba(0, 0, 0, 0);
}

Change the colour to your given choice and you will see a nicer change password box instantly.

change_pass

change_pass_new

The Message Box Border

The message boxes displayed have a green 1 pixel border.  To change this add the following to your custom.styles.css file.

.messagebox-middlebody {
    border:1px solid #0079C8;
}

Thats it, hopefully this should help you create a more professional custom theme for your StoreFront.  Also it will allow you to upgrade from 2.5 to 2.6 and nor loose any of your existing customization.

 

Leave a Reply

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