House Ad Templates

The Official Discourse Ad Plugin ships with a House Ad feature that allows you to create ads for your site using HTML and CSS. You can find the discussion for this feature at House Ads in the official Ad Plugin.

The purpose of this topic is to provide basic templates as a starting point for creating your own House Ads.

Tips :mega:

  • You can significantly reduce the file size of an image while maintaining excellent quality by running it through https://tinypng.com
  • Add the CSS to a “House Ads” theme component. You can also upload any images you use to the same component.

Templates

Simple logo and text

This template is set up to use an image with a square aspect ratio. The recommended image size is about 500x500px in order to look good on retina displays. The text and background colors will adjust according to the current color scheme. Replace any capitalized text in the HTML with your unique content.

HTML
<a href="DESTINATION_URL" class="h-creative" target="_blank">
    <div class="container">
        <div class="product-image">
            <img src="IMAGE_URL">
        </div>
        <div>
            <p class="big">LARGER_TEXT</p>
            <p>SMALLER_TEXT</p>
        </div>
    </div>
</a>
CSS
.h-creative {
    display: block;
    clear: both;
    max-width: 500px;
    color: $primary !important;
    background-color: $secondary;
    .container {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 6px 0;
    }
    p {
        margin: 0 20px;
    }
    .product-image {
        width: 150px;
        height: 150px;
    }
    img {
        max-width: 150px;
        max-height: 150px;
    }
    .big {
        font-size: 24px;
        line-height: normal;
        padding-bottom: 10px;
    }
}

.mobile-device .house-creative {
    .product-image {
        width: 120px;
        height: 120px;
    }
    img {
        max-width: 120px;
        max-height: 120px;
    }
}


Responsive Banner Ad #1

This template will create a banner ad that is 90px high and maintains the width of topic posts. You may need to adjust the CSS media query width depending on the banner ad’s content. The template as-is assumes you have different images for desktop and mobile. Replace any capitalized text in the HTML with your unique content.

HTML
<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <img class="desktop" src="DESKTOP_IMAGE_URL">
    <img class="mobile" src="MOBILE_IMAGE_URL">
    <div class="container">
        <div>
            <p class="big">A responsive banner ad</p>
            <p class="small">Customize to your liking.</p>
        </div>
        <button class="btn btn-default cta">
            <span class="d-button-label">Click Here!</span>
        </button>
    </div>
</a>
CSS
$cta-background-color: #FE4644;
$cta-text-color: #FFFFFF;

.banner-ad {
    display: flex;
    clear: both;
    max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
    background-color: #FEF25E;
    border: 1px solid $primary;
    box-sizing: border-box;
    img {
        height: 90px;
        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
        }
    }
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        p {
            margin: 0;
            &.small {
                font-weight: bold;
                text-align: right;
                padding: 1px 5px;
                background-color: #000000;
                color: #FFFFFF;
            }
            &.big {
                font-size: 24px;
                line-height: normal;
                padding-bottom: 5px;
                color: #434343;
                font-weight: lighter;
            }
        }
        .cta {
            color: $cta-text-color;
            background-color: $cta-background-color;
            &:hover {
                background-color: darken($cta-background-color, 20%);
            }
        }
    }
}

@media only screen and (max-width: 672px) {
    .banner-ad {
        img.desktop, p {
            display: none;
        }
        img.mobile {
            display: block;
        }
        .container {
            justify-content: center;
            .cta {
                margin: 0 5px;
                font-size: 12px;
            }
        }
    }
}


Responsive Banner Ad #2

12%20PM

This template will create a banner ad that that maintains the width of topic posts. For demonstration purposes, I’ve included an SVG logo in the template instead of a traditional image. SVG code can be obtained by opening an SVG file in a text editor. You may need to adjust a few aspects of the CSS depending on the banner ad’s content. Replace any capitalized text in the HTML with your unique content.

HTML
<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 103 104" data-ember-extension="1">
          <g fill="none" fill-rule="nonzero">
            <path fill="#000" d="M51.87 0C23.71 0 0 22.83 0 51v52.81l51.86-.05c28.16 0 51-23.71 51-51.87C102.86 23.73 80 0 51.87 0z"/>
            <path fill="#FFF9AE" d="M52.37 19.74c-11.1380058.0065739-21.451097 5.8725864-27.1495582 15.4424743C19.5219805 44.7523623 19.2787009 56.6145192 24.58 66.41l-5.72 18.4 20.54-4.64c11.7619991 5.29926 25.5640682 2.9191757 34.8718647-6.0134445 9.3077965-8.9326201 12.2534008-22.6251484 7.4422692-34.5951021C76.9030023 27.5914997 65.3006488 19.7462906 52.4 19.74h-.03z"/>
            <path fill="#00AEEF" d="M77.45 32.12c8.765 11.492 8.616 27.467-.363 38.794C68.11 82.24 52.59 86.03 39.4 80.12l-20.54 4.7 20.91-2.47c13.862 8.12 31.61 4.547 41.25-8.304 9.64-12.851 8.105-30.89-3.57-41.926z"/>
            <path fill="#00A94F" d="M75.32 64.909C67.571 77.11 52.533 82.5 38.8 78l-19.94 6.82 20.54-4.65c14.629 6.608 31.887 1.199 40.127-12.576 8.24-13.776 4.844-31.54-7.897-41.304 9.917 10.514 11.436 26.417 3.69 38.619z"/>
            <path fill="#F15D22" d="M26.47 67.11c-5.725-13.8-1.007-29.722 11.31-38.176 12.319-8.453 28.873-7.128 39.69 3.176-10.018-13.147-28.474-16.356-42.342-7.363C21.26 33.741 16.662 51.901 24.58 66.41l-5.72 18.4 7.61-17.7z"/>
            <path fill="#D0232B" d="M24.58 66.41c-7.103-13.12-4.065-29.421 7.288-39.102 11.353-9.68 27.929-10.105 39.762-1.018-11.351-11.952-29.982-13.176-42.798-2.81-12.817 10.366-15.517 28.84-6.202 42.44l-3.76 18.9 5.71-18.41z"/>
          </g>
        </svg>
        <div>
            <p class="big">A responsive banner ad</p>
            <p>Customize to your liking.</p>
        </div>
        <button class="btn btn-default">
            <span class="d-button-label">Click Here</span>
        </button>
    </div>
</a>
CSS
$cta-background-color: #D70751;
$cta-text-color: #FFFFFF;

.banner-ad {
    display: block;
    clear: both;
    max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)) !important;
    background: linear-gradient(#d7d9e2 0%, #ffffff 75%);
    border: 1px solid #808080;
    box-sizing: border-box;
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 90px;
    }
    svg, img {
        margin-left: 5px;
        height: 75px;
    }
    p {
        color: #222;
        margin: 0 20px;
        font-family: Verdana, Geneva, sans-serif;
        &.big {
            font-size: 20px;
            line-height: normal;
            padding-bottom: 5px;
        }
    }
    .btn {
        width: 20%;
        height: 45px;
        margin-right: 5px;
        background-color: $cta-background-color;
        color: $cta-text-color;
        font-weight: lighter;
        white-space: nowrap;
        border-radius: 50px;
        &:hover {
            background-color: darken($cta-background-color, 5%);
        }
    }
}

@media only screen and (max-width: 575px) {
    .banner-ad {
        p {
            font-size: 10px;
            &.big {
                font-size: 12px;
                font-weight: bold;
            }
        }
        .btn {
            width: 120px;
            height: unset;
            font-size: 12px;
        }
    }
}


Between posts “Codefund” style ad

This template will create a subtle advertisement that can be used as a “Between posts” House Ad. It is heavily inspired by the Codefund ad style.

Desktop

Mobile

HTML
<a class="between-posts-ad" target="_blank" rel="noopener" href="https://discourse.org">
  <div class="ad-container">
    <span class="ad-label">Ad</span>
    <strong>Discourse</strong> - A community platform for civilized discussion on the web 
  </div>
</a>
CSS
.house-creative.house-post-bottom {
    margin-left: 0 !important;
    a.between-posts-ad {
        color: dark-light-choose($primary-medium, $secondary-medium);
        strong {
            color: $primary;
        }
        .ad-container {
            max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2));
            padding: 10px 5px;
            text-align: center;
            background-color: $primary-very-low;
            border: 1px solid $primary-low;
            box-sizing: border-box;
            .ad-label {
                margin-right: 2px;
                padding: 2px 5px;
                color: $primary-very-low;
                font-weight: bold;
                background-color: #EAC34E;   // Sets color of "Ad" label
                border-radius: 5px;
            }
        }
    }
}


:warning: This guide is a work-in-progress. Feel free to respond with your own template ideas

30 Likes

Can we get a template for this style, too?

5 Likes

Are we missing a template for that style @tshenry?

4 Likes

It’s in the works! My plan is to pull at least one or two more templates from what we have on Meta right now. I’ll update this topic as I finish them up.

The one you were looking for is up @jtbayly :slight_smile:

6 Likes

Awesome. Thanks much. I’m terrible at figuring out CSS, and that seems to be the most important part of getting these to display nicely. Looking forward to using the new one, too.

3 Likes

This is awesome guys, today we deployed these ads, but dear taylor see the picture below:

this is for the ads between the posts and above the suggestions, the space with the above one is ruining the view especially on the mobile view.
how we can push the ad to the right that way can be on the same level as the one at the bottom.

see the mobile view:

That margin is actually built into the plugin. I believe the idea is to keep it inline with the post content. You can override it using the following CSS:

.house-creative.house-post-bottom {
  margin-right: 0;
}
4 Likes

Hello @tshenry, this is me again.

is there any way we can label the ads with (Ad) ? like the picture

**

**

Just to make it look more professional

Yes you can add it to your house ad’s html and css as needed.

4 Likes

Yes, the thing is how ? I am not good with coding so i need your help to achieve that.

Here’s some CSS to get you started that will place an ad indicator on the bottom corner of the “Simple logo and text” ads. You will need to adjust it on your own to meet your needs:

.h-creative .container {
    position: relative;
    &:before {
        content: "Ad";
        position: absolute;
        bottom: 0;
        right: 0; // remove to position on left side of ad
        background: #EAC34E;
        border-radius: 5px;
        padding: 0 5px;
        color: #FFF;
        font-weight: bold;
    }
}

Result:

13 Likes

I might sound like a noob, but I fail to do this (I assume it is simple):

  • Add a standard banner JPG-image ad at the bottom of each thread with a fixed aspect ratio, that resizes in width depending on screen, and that I can easily switch out when I get a new advertiser. Like I have in my Wordpress website.

Any help is appreciated. Preferable a bullet list of what I should do if there are several steps. :slight_smile:

Hello @tshenry

This is jay again.

The picture below is for the ad above suggested topics, see how showing in full width on mobile view.

And this picture for same ad but between the posts and see the space on left shrinking the ad. How i can do it in full width as the one above suggested topics ?

The space is ruining the ads

I guess the first thing to verify is that you have the Advertising Plugin installed :slight_smile: See if you can access /admin/plugins/adplugin/house_ads on your site.

Be sure to read all of the information (including linked information) in the OP of this topic and House Ads in the official Ad Plugin. Also be sure to watch the video example.

The ad slot you are looking for is called “Topic above suggested.” You will need add and remove your House Ads from the list as needed.

If you’re still having trouble, let me know at which part you are getting stuck.


@Jay91 try the following:

// Remove left margin for right to left languages
.rtl .house-creative.house-post-bottom {
  margin-left: 0;
} 
9 Likes

Hello,
Could you help me make a simply a House Ads

I’ve added a template to the OP for a very similar style :slight_smile:

All the info you should need is in the first post of this topic :wink:

6 Likes