Customizing Receiver for Web

How do you customize Citrix Receiver for Web and StoreFront 2.6 with a custom background, logo, graphics, and/or the Plus button?

Feng Huang of Citrix has provided numerous, helpful blog posts on how to customize Citrix Receiver for Web, such as: “Customizing Receiver for Web 2.5“. I am very thankful to him for those articles, allowing us to create beautiful, branded themes. The customizations were easily made through the “contrib” folder, except: how to change the “+” sign at the Apps view. There was no article anywhere on the web on how to do that.

Changing The “Plus” Button

StoreFront 2.5: one admin suggested to replace the plusSign_*.png images in the \uiareas\Store\media folder. This worked GREAT!
StoreFront 2.6: the above solution broke. There were no more plusSign_*.png images in that folder, although I noticed that modifying the “storebutton” CSS had an effect on the “+”.

Today, I finally figured out how to make the change using CSS, and hope this helps other Citrix Admins out there!

Normal

“+ Apps” image dimensions used: 40×85 pixels. Placed into the “contrib” folder.

Hover

My CSS Code

The below was added to contrib\custom.style.css, and was tested with StoreFront 2.6. If you need help on how to modify the custom.style.css file, please refer to Feng Huang’s post or contact Citrix.

Citrix Apps Screen

/* ----- Add Apps button (Plus sign). Michael Yuen 11/25/2014 ----- */
#resources-navigationbar .storebutton:before {
/* Remove the + sign */
content: '';
}
#resources-navigationbar .storebutton {
background: url("plusSign2_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("plusSign2_hover.png") no-repeat;
background-position: left center;
margin-top: -40px;
width: 42px;
height: 85px;
background-color: none;
border: none;
box-shadow: none;
}
/* ----- End Add Apps button ----- */