ScreenCloud CSS & Zone Layout Guide

Avatar
by Safir Läckgren
Follow

Screen_Shot_2020-07-21_at_1.51.56_PM.png

This article will go through how to create or edit custom layouts while using ScreenCloud. This feature allows you to split your screen into zones and customize unique layouts for your digital screens. Although it may look scary, creating a custom zone is just about changing a few numbers - no coding needed here!' Please note, you can also use predefined layouts and templates for your screen zones available directly from your “Channels” section.

If you are already a little bit familiar with how to customize CSS, you could simply jump to Section 2. Customizing your own zone layout, or even to Section 3. Custom zone ideas to see what Custom ideas we’ve already prepared. 

Table of contents:

1. Basics and CSS language

2. Customizing your own zone layout

3. Custom zone ideas

4. Frequently asked questions

 

1. Basics and CSS language

Creating customized layouts with ScreenCloud involves using CSS (Cascading Style Sheets) to code and manipulate the sections of your screen. We’ll walk you through below with some tips for understanding CSS code, language, and styling.

 

What is CSS?

Cascading Style Sheets (CSS) is a coding language used to describe how HTML elements and customizations display on a webpage, system, or screen. CSS in many cases can be used to design or make changes to how something appears, for example, in digital signage CSS can be used to control or change the layout of how your content displays. This allows you to have flexibility over splitting your screen into layouts and how these zones on your screen will appear. The CSS editor in ScreenCloud can be accessed while creating or editing your “Channels” for scheduling screen content.

When it comes to learning the basics of CSS, we understand that there is a learning curve to reading and manipulating code. We recommend to check out the following resources below for an introduction to CSS:

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

https://multimedia.journalism.berkeley.edu/tutorials/css-intro/

https://www.theodinproject.com/courses/web-development-101/lessons/html-and-css-basics

 

What kind of information should I know while using the CSS editor?

Please note the following terms you’ll find while editing or customizing a zone layout which are common CSS terms summarized below: 

i) Config Data (JSON): here you can provide the configuration for your custom layout, and give a name to each of your zones. The width and height should match the size of your channel. For each zone configured in the CSS section, please provide the ID and name for each zone. The number of zones here should match the number of configured zones in the CSS tab.

 

ii) is_flexible: this configuration dictates if the layout fits the aspect ratio of the screen or not. For example, if set to true, using this type of layout will stretch to fit any screen size or aspect ratio.

 

iii) is_scalable: this configuration dictates if the layout’s aspect ratio will remain the same regardless of the screen size in which your content is being displayed on. For example, if set to true, using this type of layout will adapt to different screen sizes. If set to false, the layout will not adapt to different screen sizes.

Below are examples of how the two options relate to one another for a Layout set at 1080p and Zone layouts of different dimensions.

 

Sample A

Layout = 1080p (1920x1080 px), Zone = 720p (1280 x 720 px)

is_flexible set to false, is_scalable set to false

 

Sample B

Layout = 1080p, Zone = iPad (1024 x 768 px)

is_flexible set to false, is_scalable set to true

 

Sample C

Layout = 1080p,, Zone = UHD 4k (3840 x 2160 px)

is_flexible set to false, is_scalable set to false

 

Sample D

Layout = 1080p, Zone = 720p or UHD 4k

 is_flexible set to true, is_scalable set to true / false

 

DISCLAIMER: At this moment in time, Channel Layout dimensions do not take effect on the ScreenCloud Player, and the eventual screen dimension will always be, at max, 1080p or lower. This is why we do not yet support 4k resolution, but it is an improvement our technical team is working on adding.

 

iv) CSS: here you can provide size and positions for each zone layout on your screen. Please note, the position is relative to the top left corner of the screen. Values may be pixel or percentage-based, but as you’ll see, we’ve opted to use the percentage base with our available custom zone layouts, which is what we recommend that you work with as well.

With our image examples below, we’ll show you how adjusting the percentage values affects your zone’s dimension and positioning in the layout.

 

1.1. The first thing you should note is that the layout’s dimensions are based on what you have chosen for the “Channel Size”.You can also customize these dimensions by going to the bottom selection of the available Channel Size list. Once you click “Custom Size” you will find boxes where you can set your own PX values. In the case of our example, however, we shall be sticking with “Full HD”, which has the dimension of 1920x1080 px.

IMAGE 1.1

 

             

IMAGE 1.2                                                                                                          IMAGE 1.3            

                                                                                   

1.2. Next, we shall start by explaining how the width and height values affect your zone. This sample displays “#zone1” with the “width:” at 100% and the “height:” at 100%, which results in the whole layout being filled out. Hovering your mouse over the zone will display a little text box that will show you the exact pixel dimensions of that zone, which is exactly the same as the Channel’s dimensions.

IMAGE 1.2

 

1.3. If you alter the “width:” value too, for example, 50%, and the “height:” value to 50%, you’ll see that the new zone gains the new dimensions of 960 x 540 px, which now makes up 25% of the complete layout. Notice how the zone stays in the top-left hand corner of the layout, meaning that the values measurements begin exactly from the top-left hand corner of your displayed Channel screen.

IMAGE 1.3

 

1.4. Now, if you continue further and change the “top:” and “left:” values of your zone’s CSS configuration, you’ll notice that your zone is pushed downwards and to the right. For example, if you give both the “top:” and “left:” values 50% when you have a zone filling just 25% of your screen, you will see that the zone is now perfectly placed on the bottom right corner of the Channel screen.

IMAGE 1.4.A

 

You can also, otherwise, change the margins. In our example below the distance is now 0 px from the “bottom” and from the “right” instead.

IMAGE 1.4.B

 

1.5. As for the hierarchy of your zones, there are two methods you can use for their arrangement.

 

Method A
Whichever zone text segment is placed lower, i.e. afterward, it will automatically be placed above the zone before. See how “#zone2” is placed above “#zone1”

IMAGE 1.5.A

 

Method B

You can, otherwise, change the “z-index” value so that the earlier zone text segment has a higher value than the one below. This will then place the earlier zone above any that has a lower “z-index” value. Observe how “#zone1”, with the value of 11, now lies above “#zone2”, with its value of 10.

IMAGE 1.5.B

 

1.6.  So why are the numbers in the “#zone1” & “#zone2” text? This is needed to combine the zone to the ID and name that you have in the Config settings under “id”: “zone1”. You will need to always make sure you have the correct number of zones and numbers in both the Config and CSS fields for your zones to appear.

IMAGE 1.6

 

Now that we’ve gone through some of the key terms and brief samples for how to customize a zone using CSS, let’s get started on customizing your own zone layout in the next section.

 

 2. Customizing your own zone layout

The best way to get started with creating your own custom zone is to start with one of our pre-made templates available while editing a “Channel”. There’s a number of zones available which you can select and customize to include additional sections of your screen, or manipulate an existing layout to your exact liking.

 

Let’s get started below with the following sample, where we’ll turn a three-zone layout to a four-zone layout:

  

 

2.1. Pick an existing zone

To get started, visit your “Channels” section on the left-hand side of your Studio account menu, and click on “Edit Layout”.

 

Once you select “Edit Layout”, you’ll be prompted to all of the predefined layouts available that are ready to use for your screens. Select your zone, and then click on “Customize” to access the CSS editor.

 

2.2. Give your zone layout a title

To begin, go ahead and give your new zone a title. Notice that you’ll also open on the “CONFIG” text field here, which is where we will begin to configure our custom zone.

 

At this stage, you won’t yet see the layout changes take effect with the “Preview” on the right. Now complete, with our Config setup, we’ll start CSS configuration.

 

2.3. Configure your Config data (JSON) settings

Start by copying and then pasting a selected segment of the text for the setting for one zone, and then rename all fields according to what type of layout you are going to create. Below is a step by step walkthrough on how you can do this: 

 

A: Copy the highlighted amount of text, exactly from the comma (,) to the curly bracket (})

 

Example:

 

 

B: Paste it after the final curly bracket (})

 

 

C: This is how your Config text field should now look like, with a double of the text segment that you copied

 

D: Rename the “id” to “Zone4” and then rename all of the zone “name”s according to how your new setup will be arranged

 

 

At this stage, you won’t yet see the layout changes take effect with the “Preview” on the right. Now complete with our Config setup, we’ll start CSS configuration.

 

2.4. Configure your CSS settings

Click “CSS” next to “Config” to open the CSS configuration text field. Here is where we will start to reshape the zones in the preview. Please see the walkthrough for this below.

 

A: Select the last configuration text for the bottom zone, starting from the space above the “#zone3” text and then on until the last curly bracket (})

 

Example:  

B: You’ll want to then place your copied text directly below the last curly bracket for the last zone text segment

 

C: You will then get a double of the final zone.

 

D: Here is where you will change the “width”, “height”, “top” and “left” values of each zone until you create the correct size and positioning for all of your zones. You can direct yourself back to the iv) CSS segment to see how each value affects your zone.

 

 

 

As you will see when you are altering the above values, each zone in the preview will have reformed and moved. Your new custom layout has been made, and you can go ahead and click “Save & Close” to keep your work.

 

2.5. Pick your new Custom Zone Layout for your Channel

 

Once you've Saved your layout changes and configurations, you will now see your custom zone layout available under the "Custom Layouts" tab in your Channels section. Make sure to click “Select” to set the layout to your Channel.

 

If you ever need to edit your Custom Zone, simply hover your mouse over the zone and a pencil icon will appear, which will bring you back to the customization window for your layout. You can also delete a zone by clicking the trash icon instead.

Once you add your content to each zone, make sure to “Publish” your Channel so that it is ready to be used for a ScreenCloud screen or an Embeddable Channel. Embeddable channels allow you to share ScreenCloud content in a web player through a link you can use for websites, an intranet, and more. 

 

2.1.5. Set your content and set your Channel to a screen.

Finally, it’s time to set that Channel with your new custom zone to a screen. For instructions on how to do this, please click here.

 

 3. Custom zone ideas

Now that we’ve reviewed a brief sample of how to customize your own zone layout using an existing template, we'll give you a few examples and tips for more advanced customizations:

3.1. Adding five or more sections to your digital screens

3.2. Background zone

3.3. Logo zone

3.4. Cover zone

3.5. Adding Borders to Zones

 

3.1. Adding five or more sections to your digital screens

You can also add five or more sections to your screens using the Config and CSS editor by following the above steps, but by beginning with a 5 zone layout instead. 

 

Simply follow all of the steps from the 2. Customizing your own zone layout section, making sure to set the correct numbers to the new zones, “zoneX” and “#zoneX”, in the Configand CSS configurations.

Please note, you can hover over sections of your zone layouts at any time to also review the exact dimensions needed for your images or content to have a perfect fit. You can also learn more about custom resolutions and image dimensions using Channels in ScreenCloud by clicking here.

 

  

3.2. Background Zone

Because you can place zones above and over each other, it’s possible to place an underlying zone under your main content so that you can create a dynamic background zone that will always be running behind the main content on your screens. This could be used to, for example, compliment the colors of your selected theme: 

 

 

Here we used the Main + Right Bar & Header zone, and we placed the code for the new custom zone before all of the others so that it laid behind. We then adjusted the dimensions of each zone in the CSS configuration so that visible spaces were created between each of the zones. You can see our text configuration below for reference.

 

3.2. CONFIG

 

3.2. CSS

 

 

3.3. Logo Zone

You can also add logos and graphics for branding your screens.

  

 

3.3.1. Before you begin, please ensure you have uploaded a logo to your ScreenCloud media library, with a name that you easily recognize. You would most likely use a PNG image file with transparency. When you select your logo image, please make sure that the zone settings are set to Fit to Zone so that the logo displays without being cut. Otherwise, you could simply look at the zone size and resize your Logo image exactly to the zones dimensions.

 

3.3.2. The following Config settings can be used for all of the below logo zone options and CSS settings:

 

3.3. CONFIG

 

3.3. CSS
In our steps below we’ve chosen to change the margins with each situation, i.e. changing “Top” to “Bottom” instead of writing in a new number value. See iv) CSS step 1.4.


3.3. Landscape

      

 

3.3. Portrait

      

 

3.3.2. If your logo is a square one, simply adjust your zone size accordingly.

3.3.3. And finally, if you are working with a zone layout with more than just one zone below, all you’ll need to do is add this Custom Logo Zone above all other zones so that it lies on the top, either by placing it last in the text field or by making sure it has the highest “z-index” value.

  

3.4. Cover Zone

It’s also possible to set a cover above your zone layout, for example, if you want to make a single content cover zone to highlight one piece of content at a certain time every day. Empty zones with no content playing are hidden if placed above other zones, and as soon as scheduled content in that zone is set to play, it will play above and over the underlying zone layout(s).

 

↕                                                                                                                    ↕

 

 

3.4.1. You will only be able to access the underlying zones by selecting the dropdown menu on the left which shows the available zones. Selecting through the Layout Settings screen on the right will only get you to the topmost cover zone.

 

3.4.2. Make sure that your content selected for the Cover zone is scheduled to not display at all hours so that the zones underneath have their time to show. Please note that the below zones will still be playing at all times, so any videos with sound enabled and playing on repeat will be heard, if your device has the possibility to output audio. 

 

3.4.3. You can find the Config and CSS settings for this setup below:

 

3.4. CONFIG 

 

3.4. CSS

 

3.4.4. This setup can also have a top zone layout consisting of more than just one cover zone, but please note that it will take a lot more text configuring and scheduling to make sure the content flows exactly according to plan.

 

3.5. Adding Borders to Zones

Here we shall get just a little bit more advanced, as we’ll need to be adding completely new lines of CSS code. But don’t worry, as long as you look close and see how everything is written out in our samples, it’s not likely that you shall run into any issues.

  

 

In our example, we’ve selected a 3 zone layout, and we’ve decided to add some black borders to each of the zones. Please see the CSS settings for this zone layout below. You will not need to make any changes to the CONFIG settings with this one. 

 

3.5. CSS

  

As you can see, all we have added is the following text for each zone: 

border: 5px solid black

 or

border: 5px solid #000000

Here you can adjust the border with the pixel size (5px) and the color (black or #000000). 

To pick a different color, you could pick a name from this extensive color list from Mozilla, or you could simply use our color selector by creating a Theme, and then write in the RGB hex code (e.g. #000000) of your chosen color.

 

 4. Frequently asked questions

I want to add borders to my zones, how can I do this?

You can do this by creating a background zone, or by adding borders to each of your zones.

 

I want to have my logo displaying at all times on my screen, is there a way to set this up?

Because it’s possible to lay zones on top of each other, you can make a smaller zone and have it lay anywhere you’d like above your underlying zones. Please see our method of setting up a logo zone here.

 

Is it possible to switch between zone layouts, for example from 3 zones to 2 zones?

This is not yet possible, but it is an upcoming feature. At the moment it is just possible to set a single cover zone over another and have that cover zone only play specifically scheduled content. We’ve created instructions on how you can set up a cover zone here.

 

If you have any additional questions on using zone layouts with ScreenCloud, or any other questions or feedback about ScreenCloud, feel free to reach out to our support team at support@screencloud.com or give us a call at our toll-free support line at +18885575335.

 

 

 

Comments

0 comments
Please sign in to leave a comment.