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.

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.

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.

Layout = 1080p (1920x1080 px), Zone = 720p (1280 x 720 px)
​is_flexible set to false, is_scalable set to false

Layout = 1080p, Zone = iPad (1024 x 768 px)
​is_flexible set to false, is_scalable set to true

Layout = 1080p,, Zone = UHD 4k (3840 x 2160 px)
​is_flexible set to false, is_scalable set to false

Layout = 1080p, Zone = 720p or UHD 4k
​ is_flexible set to true, is_scalable set to true / false

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.

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.

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.

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.

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.

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.

As for the hierarchy of your zones, use the z-index value to adjust this.

Change the “z-index” value to place zones above or below each other. Observe how “#zone1”, with a value of 11, now lies above “#zone2”, with its value of 10.

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.

Add your additional zone, and make sure to name it by ID and name.

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.

Add your new zone with all the same values as the existing zones.

​You can adjust the “width”, “height”, “top” and “left” values of each zone until you create the correct size and positioning for all of your zones.

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.

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:

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.

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

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.

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

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.

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

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

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

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.

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

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.

If your landscape screens display both landscape and portrait videos, black borders around portrait videos can be visually unappealing. To enhance the appearance, set up your channel and zone layout to show a blurred, zoomed-in duplicate of the portrait video as a background. This is the type of effect you might see, on your smartphone, with Instagram and Facebook Stories and Reels, TikTok, Snapchat and YouTube Shorts.

Adjust the zone layout's settings accordingly.

Leave it as it is.

Once you save the custom zone layout, make sure to apply it to your channel and have the playlists both apply as instructed.

Your Channel should appear like this once it plays the same videos from both zones.

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

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.

Yes, you can achieve this by using ScreenCloud's full-screen switching feature by clicking here.

This is not yet possible, but it is an upcoming feature.