We make an advertising block Ya. Direct

Hello habro-people! I want to talk to the swami about the undocumented features of the design of the advertisements of Ya.Direkta.

Step-by-step setting up the design of ads with my eyes:
Stage 0.

This is how our original work site looks like.

Stage 1.

Even if you are the owner of only half of the brain and one hand, when you first work with Yandex.Direct ads, you will have a picture similar to the picture above. H-a-a-a-fick these stupid frameworks and explicit ad units - we will strive to maximize the similarity of ad units and website.

Stage 2.

I corrected the blocks: I removed the frames, the background of the ads, picked up the colors.
You see? Ads are indented.
So we frame our ads with div-blocks as follows:

 <div id = "ads">
 Direct Code
 </ div>

In the css we write the following:

 #ads {
 margin-left: -8px;
 }

')
Stage 3.


Not bad really? But why not the headlines of the ads to give the appearance of the page title?
We do it again using css:

 #ads .ad-link a {
 / * Remove the fat content * /
 font-weight: normal! important;
 / * Remove underscore * /
 text-decoration: none! important;
 / * Add an underscore similar to the title * /
 border-bottom: 1px dashed # 87855F! important;
 / * Increase font * /
 font-size: 1.4em! important;
 / * Align * /
 line-height: normal! important;
 }
 #ads .y5_black, #ads .y5_h a {
 color: #FFFF! important;
 / * Make the inscription Ya.Direkt white * /
 }

Done! We admire:


—Are you still not kicked out of Yandex?
-Then we go to you!

Use all of these methods at your own risk. All names are fictitious, all matches are random. I'm out. Thanks to all!

Source - Chernev.Ru