css-logoDISCLAIMER: THIS IS NOT SUPPORTED BY VMWARE IN ANY WAY. DON’T DO OR USE THIS IN YOUR PRODUCTION ENVIRONMENT!

If you are like me, and want everything exactly the way you want it, then the limited choice in customizing colors and images just isn’t enough.  Ofcourse you prefer your Workspace Portal in the same layout and colors as your main website or intranet.

Well, lucky for you you can edit the files, but, again, this isn’t support in any way by VMware or VMGuru. Earlier I posted an article on how you can edit the language of your Workspace Portal (Read it here).

How to get to the files

Connect with a SSH program (ssh on Linux/Mac, or for example Putty on Windows) using the ssh user credentials you created during configuration of the virtual appliance. After that, change to root (su root) with the password you created for the root user.

All the files you need to edit, are under /opt/vmware/horizon.

The stylesheets are in

/opt/vmware/horizon/workspace/webapps/SAAS/horizon/css

, the images are in

/opt/vmware/horizon/workspace/webapps/SAAS/horizon/css

Edit which file

There are a lot of files in the css folder. I found the most easiest way to edit the bootstrap-launcher.min.css file.  I know it’s a minified file, but nonetheless you can edit the file.

Steps to edit the file

  1. deminify the css file by getting it through a converter like the one on http://minify.avivo.si
  2. paste the contents of the deminification to a new file, like bootstrap-launcher.css
  3. edit the file
  4. compress it again on http://minify.avivo.si
  5. upload it to the original location
  6. put the permissions back to horizon:www

If you know what you’re doing, you can also upload the file after the deminification and edit it with ‘vi’ on the appliance itself.

Adding some new pictures

Want to add some pictures to the new layout? Copy them to /opt/vmware/horizon/workspace/webapps/SAAS/horizon/images and use ../images/  in the css file with the url () keyword.

What can you do

Since it’s CSS you can do a lot. but be careful: Some things may not seem what they are. While you think you may be changing something on one page, you can ruin another page.

But still, you can do nice things.

header.launcher-grid-header.grid-row {
           background-image: url(‘http://www.photos-public-domain.com/wp-content/uploads/2014/10/sky-blue-tabby-fur-texture.jpg’);
}

Will create a header like this:Screen Shot 2014-10-25 at 18.01.29

 

DISCLAIMER (again)

Again: This isn’t supported by VMware (or VMGuru for that matter) in any way. Make sure you really, really, really want it in your own colors, before tampering with Workspace Portal. You’re on your own when you get into trouble.