Ad Builder Simple Skin format is, as the name suggests, a lean, simple to build skin format that allows you to set your creative as the background of the page, and do the same for gutters / header if you want to.

This format is fully liquid - meaning that it's built for programmatic executions.  For more information on Liquid formats in general, and how to preview the different certified settings, for each of the potential domains of the programmatic channel, please see  Programmatic ready Liquid Custom Formats.

It also supports asymmetric executions, where only one of the gutters is present along with header optionally, as well as the actual skin - background of the site, with it's presence in the build optional as well. 

One of the main features is the capability to add an image background on the publisher's page, this is useful for basic wallpaper executions where the gutters are present as clickable overlays. This allows rapid development, and focus on design and utility, where creative content can be modified with code as well as codelessly via use of platform's custom variables  and additional assets.

An additional layer of logic handles the presence or absence of the gutters, making them hidden if there is no room to display them on the publishers page. This allows for a graceful degradation behavior when the ad is ran on a mobile device or smaller displays, in particular, the gutters are not supported for mobile devices, hence will not show when the ad is viewed in that environment.



Ad Builder Simple Skin is released as a single, apart from the optional header panel, there are 2 gutters (panels) in the template:

  • LeftGutter 
  • RightGutter
  • MainHeader (optional)

The gutters contain an image of Sizmek logo, and the entire visible surface of the creative is clickable. This template makes use of the mdPageBackground custom variable which is enabled by default, and will inject an image to the background of the page spanning from end to end, behind the content and gutters.



SimpleSkin with header panel




Simple Skin Template without header panel



The following table provides a link to the demo for the Skin format.


Preview Demo

Supported Platforms


Supported Version


Internet Explorer 10+, Microsoft Edge, Firefox, Chrome


Safari, Firefox, Chrome


iOS 9.0 and later


iOS 9.0 and later

Android Phone

Android 6.0 and later

Android Tablet

Android 6.0 and later

Supported in Mobile browsers only and not in Apps.

Features and environment limitations:

 Feature / Environment




Scroll Detection


Domain Configuration via Domain Config Tool (f/k/a Programmatic)


Ad Builder Templates Available


Local Preview


Uses AdKit (able to include DCO and Additional Assets)


Polite Loading


Safeframe Support


MRAID (in-app Support)


Secure Serving


Sizmek Advertising Suite Support


Implementing a Simple Skin

Setting Up a New Ad in Ad Builder

The Simple Skin format is available on Ad Builder. To access the Simple Skin format template on Ad Builder, please click on "Template Gallery" button from the Ad Builder welcome screen


Click on Format tab, You should be able to find Simple Skin format from the template list. 


To create a new ad, simply select a template and then click on Create. The new ad will start with a Master_Banner and default (panel) content showing left section of Ad Builder tool. Master_Banner, is a 1x1. You can edit the banner by changing, removing, or adding components based on your requirements.


Gutters Panel contains Sizmek logo and the click through button is transparent over all the Ad



MainHeader Panel contain Sizmek logo, click through button and text with the name of the template


After you have completed editing your ad, you can click on Save to commit the ad to Sizmek MDX platform and preview your ad. 

Customizing Simple Skin

You may remove or replace any existing element in the template with your own creative assets. However, there is some thing you need to be aware of, you can´t modify the name of the panels. If you change the name of some panel the panel will be as a normal panel.

Extra information:

  • Ad Dimensions: The template is 1x1 with 3 panels in total. Two panels as gutters with 120x600 and the mainHeader is 970x250. You can change the size of the banner and the panels. And you can remove some panel if you need it.


  • Gutters: (they are non responsive) the gutters by default are fixed, you can change the behavior with a custom variable. Gutters will be hidden automatically if they don't have enough space between the content and the limits of the browser (height and width)


  • Collapse Panel: You can add a close button for any panel and include the collapse event using the adbuilder actions.


  • Close SimpleSkin and remove the background image: You have a special option to close all the panels of the Simple Skin and remove the background image if you include all the panels that you have automatically the background will be removed, in this case (gutterLeft, gutterRight and mainHeader).



Common Customizations

Change the background image

Automatically an image will be injected in the background of the page. You can change the image and the configuration using the custom variable "mdPageBackground". You will find all the information about this custom variable below.

To change it, please go to the Advanced tab in Ad Settings on Sizmek MDX and change the custom variable mdPageBackground.


Setting up Simple Skin in the Sizmek Platforms

Setting up Simple Skin in the Sizmek MDX2.0 Platform

Once you have saved the ad to the platform, you can now use the settings from the Platform to setup your ad.

  1. Go to Ad Settings on MDX2.0 platform.
  2. For the Panel Settings, please make sure Show Single Panel at a Time is uncheck and Auto Expand Default Panel when Ad is Loaded is not selected.
  3. Set Default Panel Frequency to unlimited or the desired settings.
  4. Save the ad.
  5. Create a new placement for the ad.
  6. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  7. After you’ve saved your placement, you can then generate preview tags to test on your web site.


Setting up Simple Skin on Sizmek Advertising Suite

Once you have saved the ad to the platform, you can now use the settings from the platform to setup your ad.

  1. Go to Ad Settings in the Sizmek Advertising Suite.
  2. For the Advanced Panel Settings, please make sure Overwrite Creative Settings: Always auto-expand under Auto-Expand is selected.
  3. Set Panel Frequency to Unlimited.
  4. Make sure Show Single Panel at a Time under Multiple Panels is uncheck.
  5. Save the ad.
  6. Create a new placement for the ad.
  7. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  8. After you have saved your placement, you can then generate preview tags to test on your web site.

Note: Custom Script Notice Since the Simple Skin format is a HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used:

Custom Variables

L, R, C (for Left, Right, and Center, respectively)

Custom Variable Name



Default Value



Gutters div positioning style. fixed or scroll




You will be able to inject a background image only once when the Ad is loaded in the publisher's page. You can select the element and the behavior to inject.

 (more information here)

enabled:true, img:background_default.jpg, color:#000000, size:cover,position:top center, repeat:no-repeat, attach:fixed, fade:fade-in, fade_time:3000, inject:body, injectType:div, clickable:false



Panel reposition interval. 0 for turn off the interval. Panels reposition in every "n" milliseconds.




Page content width




The default z-index of the eye div.




To define the top position of the Gutters. First JavaScript will try to get value from the current page and apply that value to set the top position of the gutters, but if JavaScript failed to get any value from the page it will take value from this custom variable.




Number of pixels of padding between the width of the content and the start of the gutter panels.




Div reference to detect content of page. A valid CSS selector should be present in this variable to successfully detect the content location and width. When this var is set to anything other than undefined, mdContentWidth, mdContentAlignment, and mdContentXPosOffset are ignored and are instead calculated by using the width and location of this element. This is used for purposes of positioning the gutter elements

There is a new and experimental method to get automatically the widest element from any page. You can enable with this:

{"automaticDetection": true}

Note: You will find more details about this feature below.




Header panel injection type

First: Insert as a first child a div.

Last: Insert as a last child of a div.

After: Insert after a div.

Before: Insert before a div.




Div reference to inject header panel. A valid CSS selector should be present in this variable to successfully push header panel. If undefined, will inject header at tag location




Whether or not to load the programmatic settings.




Location from which to load the programmatic settings files.




In mobile and tablet devices when the orientation is changed automatically the scrollbar will be moved to the position of the header. In the case that there is no header will be moved to the top of the page.




Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display an image that is not a 1x1 even though the tag is a 1x1 tag. Template workspace includes a file that could be used here as an example, if this custom var were set to "images/970x250_Default.jpg" When set to undefined, the normal 1x1 fallback occurs.




Alignment of the content on the page. This var is only used if mdContentPlacementSelector is undefined. This is used for purposes of positioning the gutter elements




This var is ONLY for the mdBackupImage experience. If you set this var to true, then the min-width and min-height of the parent elements of the ebDiv tag will be set to the dimensions of the backup image, so that the backup image will not be cropped/clipped



Inject a background image on the publisher's page

It´s possible change the body or a specific element in the DOM of the page to inject your background image. You can use a simple background or you can setup a advance setup using breakpoints to select when you want load a specific background. For example you will be able to have a background for mobile devices in portrait mode or for low/higth resolution.


  • How to add a new background image

In Ad Builder you can open the Asset Library and upload the image that you want to use.

1. Open the Asset Library



2. Select your asset: You can choose an image from the platform or from your computer, after select it, it will be shown in the list of the assets. 


3. The last setp you need to do it´s change the name of the image in the custom variable "mdPageBackground". Please go to the Advanced tab in Ad Settings on the platform and change the custom variable mdPageBackground. By default uses: "img:background_default.jpg" you can modify it with the name of your asset uploaded.

Example: img:myNewBackground.jpg



  •  The custom Variable "mdPageBackground"

If you use this method you will be able to inject a background image only once when the Ad is loaded. It´s not necesary extra code in the workspace and you can setup different option to show the image in the publisher's page.


Default value:
enabled:true, img:background_default.jpg, color:#000000, size:cover, position:top center, repeat:no-repeat, attach:fixed, fade:fade-in, fade_time:3000, inject:body, injectType:div, clickable:false


Note: You have to be careful to use this option at the same time with the mediaqueries option. Because maybe you can overwrite the custom variable result when the Ad is loaded in the page and you will not get the result.






You can enable or disable this feature. If it´s TRUE the background will be injected in the publisher's site

Default: true

Options: true/false


You can put the path of an image which has been uploaded to the platform.

Default: background_default.jpg



You can select a Hex color or you can write a color name like "red", "green", etc.. it will be the background color of the page.

(more information here)

Default: #000000

Options: Hex. numbers, Red, Blue, transparent, etc..


The background's size will be different in the page depending on the option selected.

(more information here)

Default: cover

Options: cover ,contain, auto, percentage, etc..



The background will be positioned horizontaly or vertically depending of the option selected

(more information here)


Default: top center

Options: top, center, left, right, bottom, x% y%, xpos, ypos.


The background will be repeated or not. If you want use the repeat option you should be use a small image for a good result.

(more information here)

Default: no repeat

Options: repeat, repeat-x, repeat-y, no-repeat


The background will be injected in the plublisher page with different behaviour when you scroll up/down

(more information here)

Default: fixed

Options: fixed, scroll, loca, inherit, initial

fade The background will have a tween and you can select between these three options to change the tween animation style. With the value 'none' the background will be shown suddenly without any animation.

Default: fade-in

Options: fade-in, fade-out, fade-in-out, none

fade_time It´s the duration of the tween animation when the background is injected in the site.

Default: 3000

Options: number in miliseconds

inject It´s the element in the DOM that it will be applied all the setup. You can select a class(.myClass) or id (#myDiv) or a tag name (header)

Default: body

Options: any element in the DOM of the page.


There are 2 ways to inject the background in the publisher´s page.

  1. div: the background will be inject inside of a Div (mdBackground) and this Div will be insert it in the element that you have selected in the "inject" variable

  2. style: the background will be inject it in the Style (CSS) of the element that you have selected in the "inject" variable.

Note: This option will not have a fade-in/out (tween) when the image is shown


Default: Div

Options: style or div

clickable if it´s TRUE the background will be clickable on the page with two dynamic, which will be created using 2 divs (without panels for gutters)

Default: false

Options: true/false


Automatic detection of the widest element (Experimental feature)

This new feature will search on the content of any page the widest element to setup automatically the custom variables mdContentPlacementSelector and mdContentWidth. it´s designed to use the Immersive Takeover format in networks with the same tag in rotation.

If you want to enable the automatic detection only will need to change the value of the custom variable mdContentPlacementSelector

The basic method is use:

{"automaticDetection": true}


If you want to customize the searching of the element you have some parameters to change:





It´s the type of the element you want to search on the page

Default: "div"

Options: div, header, span, button, etc..


You can control the maximum and minimum of the width of the pixels for the element you are searching

Default: "300,1800"

Options: Numbers - minimum/maximum


All the elements names that you want to skip in the searching process of the widest element



Options: String


The ID or Class names that you want to prioritize in the searching process of the widest element. In the case of a "priority" element is found it will be checked if this element isn't in the "avoid" elements.

Example: "#container hide" will be avoided because contain the word "hide" to avoid



Options: String




Custom Interactions

The following custom interactions are reported by the ad and can be reviewed in Sizmek reporting (besides standard ad interactions).

Interaction Name


click_left_gutter Clickthrough fired once the users click on clickthrough button appearing in the left gutter.
click_right_gutter Clickthrough fired once the user clicks on clickthrough button appearing in the right gutter.
click_header Clickthrough fired once the user clicks on clickthrough button appearing in the header.


Change Log

Release: May 10, 2018 (v1.0.0)


  • Initial release


Known Issues

  • A known bug in iPad and iPhone is not possible to use "fixed" property on the background when you use mdPageBackground variable or mediaQueries option or changePageBackground function, instead of "fixed" will be changed to "scroll" only on iPad and iPhone devices 
  • Clickthrough urls are missing when you edit the Ad in the platform setting
  • Special characters are removed after updating some custom variables from adBuilder tool. You can edit the value of some custom variable if you edit the Ad from the platform


Copyright 2017 Sizmek. All rights reserved.

The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice.


Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries.

Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request