javascriptcssgoogle-dfpgoogle-ads-api

Add Google DFP ad unit heading ("Advertisement") to all the ads with a white background and a padding


We have Google DFP ad units on our site and we need to add an "Advertisement" text heading and a white background with padding to all the ads. The design should be as follows.

enter image description here

Can someone please help me to achieve the above ?


Solution

  • To do so, i will use css. Let's suppose all your ad slots have a class "adstyle" :

    <div id="banner" class="adstyle">
    here is where the GAM iframe will be inserted
    </div>
    
    <style>
    .adstyle {
      width:auto;
      background: #fff;
      padding:20px;
      position:relative;
     }
    
    .adstyle:before {
      content : '- ADVERTISEMENT -';
      display : block;
      witdh: 100%;
      height: 30px;
      font-weigt:14px;
      text-align : center;
      margin : 0 0 20px 0;
    }
    </style>