How can I add advertising area on Discourse ? Like Sitepoint

HTML & CSS
1

Hi everyone !
How can I add these?

sitepoint
sitepoint2549×1103 204 KB

2 
.leftad {
    position: fixed;
    top: calc(var(--header-offset, 60px) + 2em);
    left: 20%;
    width: 120px;
    height: 600px;
    background : rgb(62, 62, 88,.7);
    border-radius: 5px;
}
 
.rightad {
    position: fixed;
    top: calc(var(--header-offset, 60px) + 2em);
    right: 20%;
    width: 120px;
    height: 600px;
    background : rgb(62, 62, 88,.7);
    border-radius: 5px;
}

How can I fix position ?
Ads do not appear depending on screen size.

left: 20%;
right: 20%;

Which codes should I write instead of these codes?

3

It’s… probably a plugin. But the Sitepoint Codemonkeys are probably the ones to answer the question, as I dont know if its something custom or done through Discourse.

1 Like
4

Looks like it’s normally done via a Discourse plugin: https://meta.discourse.org/t/discourse-advertising-plugin-ads/33734

4 Likes
5

Hi again.

@ralphm
Thank you for the help. :pray:
But this only serves ads like adsense.
I want to be able to place custom ads.

@m_hutley
Yes, I think they have a plugin. I think I’ll buy this by paying the price, it’s not available.

1 Like
6

Did you read the link @ralphm linked to? It allows for custom ads (though it looks like they have to be hosted on Discourse), as well as five other types of ads. It looks like it will do what you want from that plugin.

As far as I know, the staff here at SP try not to work too far off the beaten path trying to integrate with discourse as they change their structure just enough that it becomes a maintenance nightmare to deal with wholesale changes.

1 Like
7

Hi @ogulcangulcemal,

I asked the SitePoint devs how this had been done and got the following answer:

That layout can be done with a plugin: https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216 or by customizing the Discourse theme or theme component.

The latter is the approach we used for our forum as we want more control when to show the ads.
It was achieved by adding the two div containers inside #main-outlet-wrapper using handlebar templates.

Then the CSS grid layout of the #main-outlet-wrapper container was overridden to position them to the desired location.

I hope that helps you :slight_smile:

3 Likes
8

Thank you James!
I will try it.
I hope I can do that :slight_smile:
Because I can’t write code. :smiley: