House Ad Templates

documentation admins
,
1

:warning: IF YOU ARE RUNNING AN AD BLOCKER RIGHT NOW, YOU MAY HAVE A VERY BAD TIME TRYING TO SET THIS UP! TURN IT OFF BEFORE WORKING WITH AD RELATED CUSTOMIZATIONS! You’ve been warned. :dragon:

Also be aware of browsers with built-in ad-blocker functionality (eg. Brave)

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
  • Create a “House Ads” theme component to hold any CSS that relates to your house ads. You can also use it to upload any images you want to use for the ads. Be sure to add the component to any relevant, active themes!

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.

house_ad
house_ad1066×648 124 KB

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: var(--primary) !important;
    background-color: var(--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.

banner_ad
banner_ad1630×530 98.6 KB

banner_ad_mobile
banner_ad_mobile640×575 89.5 KB

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 var(--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

06%20PM
06%20PM1558×512 51.3 KB

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

56%20AM
56%20AM1620×772 100 KB

Mobile

mobile
mobile828×671 38.9 KB

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: var(--dynamic-color);
        strong {
            color: var(--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: var(--primary-very-low);
            border: 1px solid var(--primary-low);
            box-sizing: border-box;
            .ad-label {
                margin-right: 2px;
                padding: 2px 5px;
                color: var(--primary-very-low);
                font-weight: bold;
                background-color: #EAC34E;   // Sets color of "Ad" label
                border-radius: 5px;
            }
        }
    }
}
Color Definitions 
$dynamic-color: dark-light-choose($primary-medium, $secondary-medium);

:root {
  --dynamic-color: #{$dynamic-color};
}

:memo: More template ideas? Suggest them below, or add them in!

58 Likes