How to customize the CloudPortal Brand to match a Citrix Service Provider’s  corporate identity

Citrix Service Providers use CloudPortal Services Manager, a comprehensive control panel, to manage the provisioning of cloud-based desktops, to increase scale and operating efficiency while reducing management costs.

Citrix knows it’s critical for Service Providers to leverage their company and service brand when delivering solutions to end customers. The portal is an essential access point for customer administrators and even users themselves as more and more Service Providers offer user self-service.

Selma Wei already wrote the great blog How to Setup CloudPortal Services Manager Branding & White Labeling where she describes the basics of the different branding types of CloudPortal Services Manager. In this article I will expand on this a bit more by giving some examples and details on the different parts that have to be added or changed within the corresponding Stylesheet files. In the first part I want to elaborate on an example to create a custom system brand for the Service Provider so that the look of the CloudPortal is the same for every customer based on the Service Provider’s needs. The second part will outline an example on creating different brands per customer and on creating a White Labeled portal through URL branding. I will publish this in the near future.

Note: There is no guarantee that customization will always work out of the box across release upgrade, especially when the UI changes significantly.


CSS Customization

In most cases we can work with a customized CSS Stylesheet to achieve the goal, so most examples are based on this. In some special cases you might want to edit the original ASPX files if you need to add classes etc. which are not part of the original file. Selma already showed an overview of the corresponding Stylesheet classes in her blog . If you need to change parts that are not part of the classes named in the blog, you could use the Firefox Plugin “Firebug” or the developer tools in Internet Explorer to find the needed classes. You can also checkout the “Orange” example which is located on the CloudPortal Services Manager Webserver C:\inetpub\Cortex Management\CortexDotNet\StyleSheets\Orange.css

Creating An Empty Stylesheet And Add The Changes Later

1. Logon as Service Provider Admin to the portal

2. Browse to “Configuration – Content Management – URL Branding”

3. Browse to “Brands” and create a “New Brand”

4. Leave the default “Brand Type” as “System Brand” and enter a “Brand Code” and a “Brand Name”

5. Scroll down and click “save”. This will create an empty CSS Stylesheet under C:\inetpub\Cortex Management\CortexDotNet\StyleSheets in the filesystem of the CloudPortal Webserver. The empty Stylesheet is named with the “Brand Code” you gave not the “Brand Name”. So in my example the name of the CSS Stylesheet is ctx.css.

6. Now click on “URL Branding”. Here it shows that the current brand for the URL “cortexweb” is “Default”

7. Click on “Edit” and change the Brand name to the corresponding Name you gave when creating the empty Stylesheet. In my example the Brand Name is “citrix”. Click on “Update”.

Now we are ready to customize our Stylesheet. If you want to add your own Logos and background I would suggest to create your own folder within the following directory to save all the needed pictures and logos: C:\inetpub\Cortex Management\CortexDotNet\pics on the CPSM Webserver. I created a subfolder named “Citrix” and added all the logos and backgrounds I wanted to use.

I did all the changes for this example in my Stylesheet file. I described the detailed information for the complete examples and what needs to be added to the Stylesheet to get the expected result in the following Citrix Knowledgebase Article: http://support.citrix.com/article/CTX200432

In the following two screenshots you can see the branding example I did for the Login Page and the websites after loggin in.

Before                                                                                                         and after branding – Login page

Before                                                                                          and after Branding when you are logged in

AfterLoginBeforeAndAfter_1

After we have done the branding for the system, this is only showing up if you are browsing to the default URL http://cortexweb. In most cases this is only the internal URL of the portal. As a Citrix Service Provider you might want to have your customers accessing CloudPortal Services Manager externally for administration and user self-service. So this means we have to have the branding we created also for our external URL. Let’s assume that the external URL will be http://cpsm.citrixrockz.com. To access this with the same branding we need to add the URL to our URL branding configuration.

The complete details on how to create a branding like this can be found at my corresponding Citrix KB article http://support.citrix.com/article/CTX200432

Now that we created a common CloudPortal Services Manager Website for all our customers, watch the Citrix blogs for my next blogs on how to create different brandings per customer and how to manage white labeling. Feel free to post your comments and questions below.

Learn more about CloudPortal Services Manager http://www.citrix.com/products/cloudportal-services-manager/overview.html

Learn more about the Citrix Service Provider program www.citrix.com/csp