House Ad Templates

: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.

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.

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

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: 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!

Last edited by @JammyDodger 2024-05-25T06:27:03Z

Check documentPerform check on document:
58 Likes

What do I do? I found the specific article but it didn’t make any sense.

What part of the code do I change?

2 Likes

I don’t quite understand your question here, what do you need help with? If you are wondering where to add the code for the Ad, see the Tips section above:

1 Like

@Johnny_McIvor thanks for bringing this up! I’ve updated the CSS parts of all of the templates to use CSS custom properties.

In your screenshot you will see $primary used on line 5. Change that to var(--primary)

Similarly on line 6 you will see $secondary. Change that to var(--secondary)

Let me know if you continue to have any issues.

3 Likes

If I want to upload two different size graphics for my house ads for desktop/ mobile ads, do I need to use the CSS Component for the Responsive Banner Ad 1?

We’ve got very limited technical resources, so I’m trying to figure this one out to generate more ROI for the Community to increase the dedicated technical resources (very much a catch 22 at this point).

I can get the ad working on a desktop with the HTML but not on Mobile and the majority of our users are mobile.

Any help is appreciated! Thanks!

Hello :wave:t4: @Dawn

I checked the code you had in Responsive Banner Ad 1 and you are missing a few things there. You need to include both images (one for desktop and a smaller one for mobile) in the HTML for the add.

Check this example from my site:

Try it with this code:

<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <img class="desktop" src="DESKTOP_IMAGE_URL">
    <img class="mobile" src="MOBILE_IMAGE_URL">
</a>

Remember to replace the DESTINATION_URL variable. For the DESKTOP_IMAGE_URL and MOBILE_IMAGE_URL I recommend you upload the images to a private topic and take the URLs from there.

Then create a theme component, and add the CCS styles. This should work:


    .banner-ad {
        display: flex;
        clear: both;
        max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
        box-sizing: border-box;
        img {
            height: 100%;
            &.desktop {
                display: block;
            }
            &.mobile {
                display: none;
            }
        }
    }

    @media only screen and (max-width: 672px) {
        .banner-ad {
            img.desktop, p {
                display: none;
            }
            img.mobile {
                display: block;
            }
        }
    }


I tested all of this in my site and works as expected :+1:t4:

8 Likes

Is there any way to have different house ads on different categories? We have Discourse categories that match with different job roles of our members, and we want to show ads for educational events that align with their job role.

1 Like

@clayg there is a way, it’s got something to do with the CSS I believe – I’m still working on it myself. Here’s a reference:

3 Likes

I’d like to use this banner on top and bottom (before suggestions) position. Currently the HTML and CSS is for between-posts only. Can someone help me make it work on other positions as well?

2 Likes

How did you get the really simple white text gradient background in the house ads demo video?

I have some gradient

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

Do I create a theme component h-creative

and add css

.h-creative {

    font-variant: small-caps;
    font-weight: bold; 
    .container {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 6px 0;
        background: rgb(131,58,180);
        background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    }
        
    .big {
        font-size: 24px;
        line-height: normal;
        padding: 10px;
        color:lightgrey;
    }
}
<a href="https://con.racket-lang.org/" class="h-creative">
    <div class="container">
        <span class="big">(twelfth  RacketCon) October 28-30, 2022</span>
    </div>
</a>

It works

Correction: my text is small caps and blue - but background isn’t working. Not is the specified colour:blue.


copied from

my css in-situ:

1 Like

I have a suggestion about adding a similar “above header” display position.

1 Like


In my Android device don’t display Text as setting
In laptop is ok,
How can i fix them? Thank you

Here is my video