Please note, that you can also use predefined layouts and templates for your screen zones available directly from your Channels section. Pictured above is the Background Zone customization.

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.
​

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.

1.1.1 Cascading Style Sheets (CSS) is a coding language used to describe how HTML elements and customizations are displayed 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.

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

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 on which your content is being displayed. 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 sizes 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.3.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.

1.3.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 the same as the Channel’s dimensions.

1.3.3. If you alter the “width:” value to, 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.

1.3.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.

1.3.5. 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.

1.3.6. 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”

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 a value of 11, now lies above “#zone2”, with its value of 10.

1.3.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.

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 zone layout in the next section.

​

The best way to get started with creating your custom zone is to start with one of our pre-made templates available while editing a Channel. There are several zones available that 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 into a four-zone layout:

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.

To begin, go ahead and give your new zone a title. Notice that you’ll also open 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.

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 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.

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.

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.

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.1. 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.

3.1.2. 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.1. 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:

3.2.2. 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.3. CONFIG (left) and 3.2.4. CSS (right)

3.2.5. You can also add a standard background color to any single zone, if, for example, you would like to display a transparent image above a color other than the default black. In order to do this, you would need to add a "background-color:" segment to your zone in your CSS configuration section so that you can write and display a color of your choosing. You can view the sample below for a use case on how this works:

Image 1. No background vs. custom background-color

3.2.6. In the image above, to the left, you can see a transparent image that lies above the default black background. To the right, you can see the same transparent image above a background that we've selected, as per the settings below:

Image 2. Using "backgound-color:" to enable the color option in your CSS config.

3.2.7. The above example highlights where you would need to adjust or edit your CSS code, depending on which zone you need to apply a background color to. In the above example, we have simply written "blue", but you can pick a less standard and more specific color from this HTML color code selector. Once you save your zone layout changes, the transparent image you've uploaded will be displayed above the color you have written out for your selected zone.

You can also add logos and graphics for branding your screens. We will show you how to set up two different logo-zone setups:

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.3. CONFIG

3.3.4. 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.5. Landscape

3.3.6. Portrait

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

3.3.8. 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.3.9. If your channel has a piece of content that is set to Full-Screen Switching, please use the below code to allow a zone for including a logo. Please note that this method, however, requires a public URL of the image file.

You can insert your image file where [Your-Image-URL] is written. This method doesn't require making adjustments to the layout's Config.

Make adjustments where necessary to place your logo zone exactly where it needs to be.
​

3.4.1. 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.

3.4.2. 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.4.3. CSS
​

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

or

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

3.4.5. 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. Please note that you must be logged into Studio to view your Theme page.

​

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 displayed 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 from a multiple zone layout to a single zone layout?
Yes, you can achieve this by using ScreenCloud's full-screen switching feature by clicking here.

Is it possible to switch from a 3 zone layout to a 2 zone layout?
This is not yet possible, but it is an upcoming feature.