Hello,
I would like to achieve something like this on the leaderboard ad (and the rest also).
Could you please assist me?
thanks
Hi,
Add this custom CSS in Theme Panel > Custom CSS:
/* responsive monitor */
@media (min-width: 1200px) {
.td-visible-desktop:after {
content: "Advertise here"; background-color: yellow;
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
position: absolute;
top: 37px;
right: -53px;
width: 90px;
text-align: center;
line-height: 15px;
font-size: 12px;
}
}
/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1199px) {
.td-visible-tablet-l:after {
content: "Advertise here"; background-color: yellow;
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
position: absolute;
top: 18px;
right: 50px;
width: 60px;
text-align: center;
line-height: 12px;
font-size: 12px;
}
}
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
.td-visible-tablet-tp:after {
content: "Advertise here"; background-color: yellow;
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
position: absolute;
top: 18px;
right: -42px;
width: 60px;
text-align: center;
line-height: 12px;
font-size: 12px;
}
}
/* responsive phone */
@media (max-width: 767px) {
.td-visible-phone:after {
display: none;
}
}Result: http://screencast.com/t/wnMRU8iXk8S
You can change the background-color, content, position… as you like.
Thanks
Hi Lucian,
thanks for taking the time to help me with this, but unfortunately it didn’t work.
I have added the code on my css but nothing appears on the page. If I do a view source, the css code is there, but no display of the text..
Am I supposed to add some class somewhere? Or have I missed something else..?
thanks
Hi,
The code depends on the type of ad you use in the header. For example the code i gave you it’s for ads that use an image as it use the .td-visible-desktop or -tablet-l or -tablet-tp or -phone classes and adds content after it, if you decide to use AdSense ads the classes changes and you also need to change the class in the css code i gave you http://screencast.com/t/zuPw34Trbrm
Try changing the classes according to your ad type.
If you can’t do it please send me your site URL so i can check.
Thanks
hi Lucian,
thanks again, but I only managed to make it work with Googleads but it never shows up when I have a usual image as banner. You can demo it at http://www.ministryofrun.com
But there is a deeper/bigger problem: I cannot add html inside the content. I wanted to make this an active link… any alternatives?
Hi,
You have to use this class .td-a-rec-id-header in the code i gave you, as i said before, the class changes if the ad type it’s changed.
You can draw it on the image like this http://screencast.com/t/RcBrKx2fB and then set the image to be displayed in the your header ad section in Theme Panel and place the link you want as well.
Thanks
