X1 Customization: Going deeper with CSS

An article by Richard Hayton from Citrix Blogs

This is my third blog post in a series related to the Receiver X1 Tech Preview. We have shared some background about X1 and practical tips to deploy X1. In this post we will dive deeper on how to customize with CSS.

 

CSS

The key to customization in X1 is Cascading Style Sheets (CSS). This is a standard part of the HTML specification familiar to web developers. For those who are new to web programming, it can be a bit daunting, but simple changes are really easy in CSS.

We have deliberately focused on standard technologies when looking at the X1 APIs to make customization extremely easy instead of forcing everyone to learn a new tool. CSS is the first and foremost means for customization. In fact if you use the StoreFront admin console to make changes under the covers CSS is created to match those changes (see last blog).

Tools

To do much more you need to break out an editor – notepad will do, but I recommend something like Visual Studio or Visual Studio Express Web. These tools will warn you of any syntax errors and save you time in the long run.

In this blog I’ll use Visual Studio Express for Web and Chrome as my browser, as it has excellent development tools. IE and FireFox are pretty good as well, so choose your own poison.

Be sure to run your tool as administrator, or you won’t be able to write any of the files. (Later I’ll show you how you can take a copy of the web site to develop away from the server, but let’s keep it simple for now).

In Visual Studio, use ‘Open Web Site’, select local file system and then your site. For me this is C:\inetpub\wwwroot\Citrix\PurpleWeb’ (Substitute your own store name in for ‘Purple’).

If you’d prefer to stick with notepad, note that it will also has to run as admin to allow you to edit the style.css and script.js files in the PurpleWeb\custom directory. For those just cutting and pasting from the blog, this will be just fine.

Note that once the site is loaded into a tool like Visual Studio it looks a bit overwhelming. This is because it contains all of X1 and all of the classic ‘green bubble’ Receiver. You can ignore 99% of this. All we care about is the contents of the ‘custom’ directory, and specifically the style.css and script.js files.

Let’s open style.css and make some simple changes

Add the following to the bottom of the file:

#customTop {
 height:30px;
 background:red;
}

This says. “Find the area called ‘customTop’ (strictly with id=’customTop’) and set its height to 30 pixels and its background color to red.

Reload the X1 UI and you will find it has acquired a new region.

This region is exclusively for customization. A red stripe is fine – but you probably want to put other stuff into it – custom toolbars, messages etc. We will talk more about this next blog. There are two other regions called #customScrollTop and #customBottom. Let’s define them all and take a look.

Add the following to the bottom of style.css. Save, and reload the web page

#customScrollTop{
 height:30px;
 background:blue;
}

#customBottom{
 height:30px;
 background:pink;
}

 

(Note the pink strip clashes with the copyright message. This will be fixed by release :-) )

The blue strip (#customScrollTop) scrolls with the rest of the page, the other two are fixed. You can make these larger or smaller, or hide/show in different circumstances. As a simple example try adding the following lines:

.myapps-view #customTop {
 display:none;
}

Back to the web site and you will see that the blue region, is no longer shown on the ‘Favorites’ page. This new statement says “If the ‘customTop’ element lives under an element marked with the ‘myapps-view’ class, then hide it”. (myapps-view is the internal name for ‘favorites’).

Read More

Be Sociable, Share!
 

Tags: , , , ,

Comments

No comments so far.

  • Leave a Reply
     
    Your gravatar
    Your Name