Storefront 3 Web design: Branding Your Deployment

Storefront 3 Web design: Branding Your Deployment -

With the release of Storefront 3, we have a few customization options for branding in the storefront MMC, but a more robust method adjustment via CSS.

This example is a vanilla site storefront and 3 brands take it according to the requirements for "LabCorp". The intention of this article is that adaptation

to demonstrate architecture Storefront 3.

First, let us look at what we can customize the storefront MMC:

We have options to add a logo on the login page and post-login page, and to put some color on the post-login page.

is looking Let original experience before we make changes. Here is the logon screen:

favorites:

Desktops:

finally Apps:

In this example, I'll storefront brand "LabCorp", whose appearance dictated a dark-themed cityscape with high visibility text .

let us first get uploaded the logo. I want a 340 × 0 logo in PNG format with transparent background I upload. While in the same dialog, I'll change in the top bar to be a darker color, and also with links as a Web standard blue color make text easily visible yellow.

What happens if I click OK it is a bit of magic in a folder you. Very familiar with

C: inetpub wwwroot Citrix Web custom

Browsing in this folder, I can see that the file is now labcorp.png there, and the style.css file timestamp changed.

all (well, most) adjustments to the website performance will take in this folder

If we consider the Style.css file in an editor, we can see the following changes were .: made in the managed code section

  / * the following section of the file is reserved for the use of storefront. * /   / * CITRIX DISCLAIMER: START managed SECTION. Edit NO ART IN THIS SECTION * /  .theme header bgcolor {background-color: # 424242; } .theme Header color {color: # FFFA00; } .theme Highlight color {color: # 231ED6; } .is-Hdpi .Logo container {background-image: url ( 'labcorp.png'); Background-size: 340px 0px; } .Logo Container {background-image: url ( 'Citrix_HalfHeaderLogo.png'); Background-size: 60px 170px; } .is-Hdpi .logon-logo-container {background-image: url ( 'labcorp.png'); Background-size: 340px 0px; } .logon Logo Container {background-image: url ( 'Citrix_HalfLogonLogo.png'); Background-size: 60px 170px; } 

Our login page and post-login page now has a somewhat different view:

While this is now branded and slightly different, it is by no means the final requirements for the site. It's not dark themes in general, and a city is nowhere to be found. Here is where our Style.css file takes more effort. Every time Storefront 3 makes a page for the browser client, it holds for CSS in custom folder last, so any changes will be the last word in the page appearance. This allows us to easily modify a number of properties for the appearance and in one place.

Let's get this cityscape by!

In all the examples I use the developer tools natively in Chrome (CTRL + SHIFT + I) or any other modern browser. After the Developer Tools to open the magnifying glass (to the upper left in Chrome) to find, click on it, then click the mouse over the button on the page that you want to check, and one last time. All properties for this element show in the right pane

The login screen has a large background image that we included in the "background-image" to find property to inspect below .:

This is referenced image shown below for web 2560x10px and default 72dpi. I'll use the same characteristics of the image, but a different picture. Use your favorite image editor to get your planned image

Once you use spec

Your image as a background, copy it to the custom folder mentioned above .:

C: inetpub wwwroot Citrix Web custom

Stlye.css open and look for the following section:

  / * CITRIX DISCLAIMER : END OF MANAGED SECTION. * / * Add   / custom styles below this line. * /  

All future changes will CSS below these lines of code take within Style.css. not give anything above this line. Also use not comment in the lines below this section. I found that this can cause a parse error in the storefront MMC. CSS clean going forward!

I add the following line to use an image called "Cityscape.jpg" I stored in the custom folder.

 .web screen {background-image: url (./ Cityscape.jpg); } 

Save Style.css, and refresh your browser. Wow - that's a lot more like the requirements looks:

Unfortunately, the username and password labels are no longer visible, and the color of the button is not our topic is not very consistent good

Let's check the "User name" label and the "log On" button on our developer tools .:

* TIP * This color picker can assist with your CSS color code:

http://www.w3schools.com/tags/ref_colorpicker.asp

are the properties button a small plane for my taste, so I would also like a limit on style. Paste the following code in Style.css:

 .button.default {background-color: # 333333; color: # FFFF00; border-style: solid; border-color: # 000000; border-width: 4px; } {.credentialform .plain Color: # FFFF00; } 

This looks much better! Let us now move on part of the "Post-Logon".

I want this Cityscape hold theme going, but we will keep it on top. I took a piece of the logon screen and reduces the brightness and contrast, so we have a less intrusive image on the top bar. I called this "Cityscapecrop.jpg" and made it 2560x80px @ 72 dpi. This file is now in the custom folder

to the header of the page inspection, I can find the following CSS tags .:

I want to add an image, instead of changing a color, I will add the following CSS code to Style.css:

 .theme header {background bgcolor -image: url (Cityscapecrop.jpg); } 

Next, is to rid the site of all the white space. We want dark! Using developer tools, I can find the following CSS tags and modify the properties as I want:

 .scrollable.storeViewSection {background-color: # 000000; Color: #AAAAAA; } .appInfoView.scrollable {Background-color: # 000000; Color: #AAAAAA; } .toolbar {Background-color: # 333333; } 

arrival, but now I can not read the application name. Find our CSS tags for the application name text and add the mods Style.css:

.largeTiles .storeapp .storeapp name {

 Color: # FFFF00; .appInfoName} {color: # 999999; } 

The last point is to fix on one side Much better - "Apps"

The upper left nav links are blue, that's not exactly what I wanted

* NOTE * - the blue color of the links and folders from the "content-branding (Post registration): link color" tribe. Attribute configured above. previously GUI

A little more CSS in Style.css:

 .theme highlight hover color: hover {color: # FFFF00 ; } .theme Highlight border-color {color: # FFFFFF; } .Large .toolbar-Button.current folder {color: # FFFA00; } 

Very nice! Selected is white, and yellow is floated. Current Folder is also yellow.

At this point, we're done, right? Fast ....

Storefront 3 also serves mobile devices and selects the view of the client-based access to the site. Does that mean we have to grab a mobile device now, and somehow the CSS to analyze, to change the page, also? Nope! There is a simple way to do this.

Add your storefront URL, add "? Ph". Example: http://SF3.domain.com/Citrix/StoreWeb/?-ph

We can now see the mobile view and the places that we have not touched by the production of bigger side CSS [

Where our app name was? They are barely visible. This CSS tag is a little long:

 .smallTiles .storeapp name, .smallTiles .ruler container .smallTiles .myapps ruler container .smallTiles .breadcrumb ruler container. smallTiles .folder ruler container {color: # FFFF00; } 

Problem solved. Now look at the "All Apps" page. The top menu of "all" or "Categories" is difficult to read black with the font color unselected. What happens if we yellow the selected color, and the unselected text color light gray? make

 .small .phone toolbar-Button.selected span {color: # FFFF00; } .small .toolbar-Button unselected span {color: #BBBBBB; } 

One for the category browse more part:

 .small .Store view .folder- .folder Tree Toolbar -phone-content {color: # FFFF00; } 

Much better

Our last nagging problem ... .that side bar .:

We have to keep a nice image for the top of our cityscape theme, but now on the side in the mobile view menu to repeat it.

Maybe something in CSS that these discs is different than cell phone, and we can change the viewing only on mobile views.

inspect the entire page area shows me a parent CSS tag for the entire page in the menu. If we just set the background image aside and it is set to none, we should our previously selected header color obtained

 .small .side menu {background-image :. none; } 

Perfect!

Hopefully example gave information on how you can customize your Storefront deployment. To sum it up, here are the key points of this how-to are:

1. We some customizable options within the storefront MMC have
2. Robust adjustment is through the use of file Style.css the "custom" folder within the storefront web deployment. support
identify
3. Developer Tools in Chrome, Firefox, IE, or your favorite browser specific CSS elements to change.
4. We URL appends have to help the appearance of your storefront for site fix:
   -nocustom (no adjustments)
   -Ph (view mobile)
   -TR (Tracing - requires Pop- ups)
[??

Additional resources:

• / blogs / 08.25.2015 / citrix customization cookbook /
• / blogs / 2015/03 / 09 / deployment and branding receiver x1 /
• / blogs / 03.12.2015 / x1-adaptation-going-deep-with-css /
• / blog / 2015 / 03/17 / scripting x1 /
• / blogs / 19.03.2015 / receiver x1 apis /
• https: // www .codeschool.com / courses / Discover- devtools

Tweet