Native Ads mit CSS stylen (Beispiel)

Dieser JavaScript-Request erzeugt eine einzelne Native-Ad in der Größe 300x250px:

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

Die HTML-Ausgabe sieht wie folgt aus:

Hier sehen Sie die HTML-Klassennamen, die mithilfe von CSS individuell gestaltet werden können.

 <div class="M3Ads M3MedRec1AdCenter">   <a class="a n1" target="_blank" rel="nofollow" href="{{ANZEIGEN-KLICK-URL}}">     <div class="i">       <img alt="" title="" src="{{ANZEIGEN-MEDIA-URL}}">     </div>     <div class="x">       <div class="t">{{ANZEIGEN-TITEL}}</div>       <div class="d">{{ANZEIGEN-BESCHREIBUNG}}</div>       <div class="u">{{ANZEIGEN-DISPLAY-URL}}</div>     </div>   </a> </div> 

Hier sind die entsprechenden CSS-Styles (Sie können diese gerne kopieren und an Ihre Bedürfnisse anpassen).

@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); }