Style Native Ads with CSS (Example)

This Javascript request renders a single Native Ad in a 300x250px size:

<script type="text/javascript" data-params="jsads">
  m3ads_system="Solads";
  m3ads_containerclass="M3Ads M3MedRec1AdCenter";
  m3ads_partnernumber={{YOUR-PUBLISHERID}};
  m3ads_sectors="2007";
  m3ads_numberadverts=1;
  m3ads_logoimagewidth=240;
  m3ads_logoimageheight=120;
  m3ads_cssurl="300x250-1ad.css";
  m3ads_notitle=true;
</script>
<script type="text/javascript" src="https://cdn.feed.solads.media/resources/scripts/jsAds-1.4.min.js"></script>

The HTML output will appear as follows:

You can observe the HTML class names, which can be styled using CSS.

<div class="M3Ads M3MedRec1AdCenter">
  <a class="a n1" target="_blank" rel="nofollow" href="{{AD CLICK URL}}">
    <div class="i">
      <img alt="" title="" src="{{AD MEDIA}}">
    </div>
    <div class="x">
      <div class="t">{{AD TITLE}}</div>
      <div class="d">{{AD DESCRIPTION}}</div>
      <div class="u">{{AD DISPLAY URL}}</div>
    </div>
  </a>
</div>

Here are the corresponding CSS styles (feel free to copy and customize them to suit your needs).

@font-face {
  font-family: "Roboto";
  font-weight: 300;
  src: url(https://cdn.solads.media/fonts/roboto/v30/roboto-v30-latin-300.woff2) format("woff2"), 
  url(https://cdn.solads.media/fonts/roboto/v30/roboto-v30-latin-300.woff) format("woff");
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  src: url(https://cdn.solads.media/fonts/roboto/v30/roboto-v30-latin-500.woff2) format("woff2"), 
  url(https://cdn.solads.media/fonts/roboto/v30/roboto-v30-latin-500.woff) format("woff");
}
@font-face {
    font-family: "Roboto";
    font-weight: 700;
    src: url(https://cdn.solads.media/fonts/roboto/v30/roboto-v30-latin-700.woff2) format("woff2"), 
    url(https://cdn.solads.media/fonts/roboto/v30/roboto-v30-latin-700.woff) format("woff");;
}
.Solads *,
.Solads:after,
.Solads:before,
.advert *,
.advert:after,
.advert:before,
.m3_container *,
.m3_container:after,
.m3_container:before {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
.M3Ads .a {
    display: block;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}
.M3Ads:after {
    clear: both;
}
.M3Ads:after,
.M3Ads:before {
    content: "";
    display: table;
}
.M3Ads .t,
.M3Ads .d,
.M3Ads .u {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.M3Ads {
  --adContainerBackgroundColor: #fff;
  --advertBorderColor: #dfe1e5;
  --advertBorderRadius: 0;  
  --advertBackgroundColor: #fff;
  --imageBorderColor: #dfe1e5;
  --contentBackgroundColor: #fbfbfb54;
  --fontStyle: normal 100% "Roboto", Arial, Helvetica, sans-serif;
  --titleColor: #1a0dab;
  --descColor: #000;
  --urlColor: #1a0dab;
  --urlBackgroundColor: #f4f4f4;
  --urlBackgroundColorHover: #eceaea;
  --urlTopBorderColor: #dfdfdf;
  background-color: var(--adContainerBackgroundColor);
  font: var(--fontStyle);
  font-weight: 300;
}
.M3MedRec1AdCenter {
  width: 297px;
  height: 247px
}
.M3MedRec1AdCenter .a {
  width: 295px;
  height: 245px;
  border: 1px solid var(--advertBorderColor);
  border-radius: var(--advertborderRadius);
  background-color: var(--advertBackgroundColor);
  box-shadow: 3px 3px 5px #bebebe
}
.M3MedRec1AdCenter .i {
  width: 295px;
  height: 154px;
  border-bottom: 1px solid var(--imageBorderColor);
}
.M3MedRec1AdCenter .i img {
  width: 298px;
  height: 154px;
}
.M3MedRec1AdCenter .x {
  padding: 3px 10px;
  background-color: var(--contentBackgroundColor);
  text-align: center;
  height: 60px;
}
.M3MedRec1AdCenter .t {
  font-size: 18px;
  color: var(--titleColor);
  -webkit-line-clamp: 2;
  font-weight: 500;
}
.M3MedRec1AdCenter .d {
  font-size: 15px;
  color: var(--descColor);
  -webkit-line-clamp: 1;
  font-weight: 300;
  margin: 2px 0;
  line-height: 1.2em;
}
.M3MedRec1AdCenter .u {
  position: absolute;
  width: 298px;
  height: 18px;
  bottom: 0;
  left: 0;
  padding-top: 4px;
  background-color: var(--urlBackgroundColor);
  border-top: 2px solid var(--urlTopBorderColor);
  color: var(--urlColor);
  font-size: 12px;
  font-weight: 500;
  -webkit-line-clamp: 1;
  text-decoration: none;
  word-break: break-all;
  text-align: center;
}
.M3MedRec1AdCenter .u:hover {
  text-decoration: underline;
  background-color: var(--urlBackgroundColorHover);
}