Branding Day

The setBrandingDay function expects an object with the following options as a parameter:

type SetBrandingDayOptions = {
  bgColor?: string, // will be set as css background (gradients are also possible)
  bgImgUrl?: string | bgImgUrlOptions, // single img url or bgImgUrlOptions (will be set as css background url)
  bgFixed?: boolean, // default true (css background-attachment)
  paddingTop?: number, // default number
  clickUrl?: string, // The Publisher create an Clickarea over the hole Background
  bgCover?: boolean // default false (sets background-size: cover;)
  hideHpa?: boolean // default true (set display: none on the ad-sky css class)
  siteShift?: boolen // default is false (set Website to centered position if necassary)
} 
​
// This Setting is for RASCH Websites. To give the Advertiser an better solution with the Breakpoints and Background-Image
type bgImgUrlOptions = {
  960: string; // img url to be used for 960px - 1679px
  1680: string; // img url to be used for 1680px and up
}

Call setBrandingDay() with proper options to render it. (See examples below)

window.top.admTagMan.pApi.setBrandingDay(options);

Testlink Blick: https://www.blick.ch/?admforce=bd_blick

Examples

BrandingDay with background color

window.top.admTagMan.pApi.setBrandingDay({
    bgColor: 'cyan',
    bgFixed: false,
    paddingTop: 200,
    clickUrl: 'https://my-tracking-url.com',
    siteShift: false,
  });

BrandingDay with single image

window.top.admTagMan.pApi.setBrandingDay({
  bgImgUrl: 'https://media.giphy.com/media/Yy26NRbpB9lDi/giphy.gif',
  bgFixed: true,
  paddingTop: 200,
  clickUrl: 'https://my-tracking-url.com',
  bgCover: true,
  siteShift: false,
});

BrandingDay with images and breakpoints

window.top.admTagMan.pApi.setBrandingDay({
    bgImgUrl: {
        960: 'https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3155&q=80',
        1680: 'https://images.unsplash.com/photo-1477430210384-572db91c6c40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2749&q=80'
    },
    bgFixed: false,
    paddingTop: 200,
    clickUrl: 'https://my-tracking-url.com',
    bgCover: true,
    siteShift: true,
  });

Blue News CSS and JS Example

 .o-tickerbar {
        background-color: #ecf1f6;
        width: calc(100% + 20px);
        margin-top: -20px;
        margin-left: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .o-footer {
        margin-top: 280px;
    }

    .main-wrapper {
        background-color:##{AB_BG_COLOR} !important;
    }

    body {
        background-color:##{AB_BG_COLOR} !important;
    }

    .page {
        top: 260px;
        position: relative;
    }

    .ads-group--top-right {
        background-color: transparent;
        position: absolute !important;
        top: -255px !important;
        height: 250px;

    }

    .js-o-header {
        height: 140px;
        z-index: 10000;
    }

    .main-wrapper .container {
        left: 0px;
    }

    .c-tickerbar {
        margin: 0 auto;
        background-color: #ecf1f6;
    }

    .footer--full {
        margin-top: 263px;
    }

    #WB_2-PA-ECB {
        width: 100%;
        margin-left: 7px;
    }

    .ad-wideboard {
        margin-top: 5px !important;
    }

    .m-navigationgroup--top {
        background-color: white;
    }

    .m-navigationgroup--bottom {
        /*background-color: white;*/
        padding-bottom: 1px;
    }

    .m-slider__action--right {
        right: 17px;
    }

​