When would custom CSS styling be applied to ads?

How to code ad styling using custom CSS for all placeholders?

How to add custom CSS for a single placeholder?







When would custom CSS styling be applied to ads?



Class styles/ custom styles are part of CSS (Cascading Style Sheets) and these can be used to apply a style to selected elements on a webpage. The following article describes how you can apply custom CSS styling to ads. You might, for example, want to use custom CSS to apply the label "advertisement" to ads showing on your website.



Here are the CSS Classes you'll need for Ezoic placeholders:



adtester-container
adtester-container-[placeholder_id]



How to code ad styling using custom CSS for all placeholders?


If you'd like to style all of the ads the same way, you can use the CSS class 'adtester-container'.

For example, adding the following to either a CSS file or style on the page, will apply 4px of padding to the top and bottom of all ads.



.adtester-container {
  padding-top: 4px;
  padding-bottom: 4px;
}



How to add custom CSS for a single placeholder?


If you have one ad that you'd like to have a particular styling, you can use the CSS class 'adtester-container-[placeholder_id]'. Where [placeholder_id] must match the individual placeholder ID you want to style.


For example, adding the following to either a CSS file or style on the page, will add 2px of padding to the left and right of 'placeholder 100'.



.adtester-container-100 { padding-left: 2px; padding-right: 2px; }



*Note: If you have styling for all ad placeholders already in place and then you apply further styling for a specific placeholder, the more specific CSS class 'adtester-container-[placeholder_id]' will overwrite the less specific 'adtester-container'.