Read: 2 mins.
Print Friendly, PDF & Email

Customizing Receiver for Web

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

Normal

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

Hover

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

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 ----- */

My Final Customizations

The green screen captures are the original defaults. Blue is the customized look.

Above: the “+” plus sign in the “Home – Apps (+)” screenshot was replaced by an “All Apps” icon where the hand changes on mouse-over.

Interested in StoreFront 3 customization? Click here.