房源广告模板

Discourse · 2019 年7 月 3 日 12:29

House Ad Templates

This guide provides templates for creating house ads using the Official Discourse Ad Plugin.

Important: Disable ad blockers (including those built in to browsers, e.g. Brave) before working with these ad customizations.

Before You Start

Create a “House Ads” theme component to store:
- CSS for your house ads
- Uploaded images used in ads
Add the component to all active themes where ads will appear
Optimize images using TinyPNG to reduce file size while maintaining quality

Template Options

1. Simple Logo and Text Ad

A clean design featuring a square logo with accompanying text. The colors automatically adjust to match your site’s color scheme.

Specifications:

Image Type: PNG or JPEG
Image Size:
- Desktop & Mobile: 500x500px (1:1 aspect ratio)
- Retina: 1000x1000px recommended
Additional Notes:
- Square aspect ratio must be maintained
- Colors automatically adapt to site theme
- Image appears left-aligned with text on right

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;
  }
}

2. Responsive Banner Ad - Style 1

A full-width banner that adapts between desktop and mobile views.

Specifications:

Image Type: PNG or JPEG
Image Size:
- Desktop: 690x90px (7.67:1 aspect ratio)
- Mobile: 320x90px (3.56:1 aspect ratio)
- Retina: 1380x180px (desktop) and 640x180px (mobile) recommended
Additional Notes:
- Requires two separate images for desktop/mobile
- Banner adjusts width to container
- Text remains readable at all sizes
- CTA button maintains consistent size across devices

Desktop:

Mobile:

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(var(--topic-body-width) + var(--topic-avatar-width) + (var(--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;
      }
    }
  }
}

3. Responsive Banner Ad - Style 2

Specifications:

Image Type: SVG preferred, PNG/JPEG supported
Image Size:
- SVG: 75x75px viewBox
- Raster Alternative: 150x150px (2x for retina)
- Container height: 90px on desktop
Additional Notes:
- Background uses CSS gradient (no image required)
- Banner width automatically adjusts to container
- SVG logo maintains crisp display at all sizes
- Round CTA button maintains proportions

Desktop:

Mobile:

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(var(--topic-body-width) + var(--topic-avatar-width) + (var(--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;
    }
  }
}

4. Between Posts Text Ad

Specifications:

Image Type: No images required (text-only design)
Image Size: N/A
Additional Notes:
- Container automatically sizes to content
- Consistent padding (10px 5px)
- “Ad” label always visible
- Adapts to mobile view through fluid width
- Background color adjusts to theme

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 {
  margin-left: 0 !important;
  
  a.between-posts-ad {
    color: var(--primary-med-or-secondary-med);
    
    strong {
      color: var(--primary);
    }
    
    .ad-container {
      max-width: calc(var(--topic-avatar-width) + var(--topic-body-width) + (var(--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;
      }
    }
  }
}

Common Issues and Solutions

Mobile Display Issues: Ensure both desktop and mobile images are properly defined in HTML and CSS is correctly handling the responsive breakpoints
Color Scheme Problems: Use CSS custom properties (var(--primary), var(--secondary)) instead of hard-coded colors
Image Loading: Verify images are correctly uploaded and URLs are properly referenced

Each template can be customized to match your site’s branding and specific needs. Remember to test thoroughly on both desktop and mobile devices before deployment.

Last edited by @tobiaseigen 2025-03-11T00:31:17Z

Check document
Perform check on document:

Johnny_McIvor · 2021 年6 月 23 日 08:12

我该怎么办？我找到了那篇具体文章，但完全看不懂。

我需要修改代码的哪一部分？

osioke · 2021 年6 月 23 日 10:41

我不太明白您在这里的问题，您需要什么帮助？如果您想知道在哪里添加广告代码，请查看上方的提示部分：

tshenry · 2021 年6 月 23 日 19:07

@Johnny_McIvor 感谢您提出这个问题！我已将所有模板中的 CSS 部分更新为使用 CSS 自定义属性。

在您的截图中，第 5 行可以看到 $primary。请将其更改为 var(--primary)。

同样，在第 6 行可以看到 $secondary。请将其更改为 var(--secondary)。

如果您仍有问题，请随时告知。

Dawn · 2021 年6 月 24 日 16:38

如果我想为我的房屋广告上传两种不同尺寸的图形（分别用于桌面端和移动端广告），我是否需要使用“响应式横幅广告 1”的 CSS 组件？

我们的技术资源非常有限，因此我正试图解决这个问题，以便为社区创造更多投资回报，从而争取到更多的专职技术资源（目前这确实是一个“先有鸡还是先有蛋”的困境）。

我可以通过 HTML 让广告在桌面端正常运行，但在移动端却无法显示，而我们的绝大多数用户都使用移动设备。

任何帮助都将不胜感激！谢谢！

cocococosti · 2021 年6 月 25 日 21:36

你好 @Dawn

我检查了你在 Responsive Banner Ad 1 中的代码，发现那里缺少了一些内容。你需要在广告的 HTML 中包含两张图片（一张用于桌面端，一张较小的用于移动端）。

看看我网站上的这个示例：

尝试使用这段代码：

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

记得替换 DESTINATION_URL 变量。对于 DESKTOP_IMAGE_URL 和 MOBILE_IMAGE_URL，我建议你先将图片上传到一个私密主题中，然后从那里获取 URL。

接着创建一个主题组件，并添加 CSS 样式。这样应该可以正常工作：


    .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;
            }
        }
    }

我在自己的网站上测试了所有内容，效果符合预期

clayg · 2021 年7 月 30 日 20:49

是否可以在不同类别中展示不同的站内广告？我们拥有与成员不同职业角色相匹配的 Discourse 类别，希望展示与其职业角色相符的教育活动广告。

Dawn · 2021 年8 月 2 日 17:54

@clayg 有一种方法，据信与 CSS 有关——我自己也还在研究中。这里有一个参考链接：

Mr.X_Mr.X · 2022 年3 月 10 日 20:32

我想在顶部和底部（建议之前）位置使用此横幅。目前 HTML 和 CSS 仅适用于帖子间。有人能帮我让它在其他位置也能正常工作吗？

spdegabrielle · 2022 年10 月 12 日 22:17

如何在 house ads 演示视频中获得真正简单的白色文字渐变背景？

我有一些渐变

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%);

我是否应该创建一个主题组件 h-creative

然后添加 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>

它奏效了

更正：我的文字是小型大写字母并且是蓝色的——但背景不起作用。也不是指定的颜色：蓝色。

从…复制

我现场的 CSS：

hoangphuctran93 · 2023 年4 月 18 日 09:31

我有一个关于添加类似“顶部标题”显示位置的建议。

thaidb · 2024 年5 月 19 日 15:47

在我的安卓设备上，文本未按设置显示。
在笔记本电脑上显示正常。
我该如何解决？谢谢。

thaidb · 2024 年6 月 25 日 13:39

这是我的视频

tobiaseigen · 2025 年3 月 10 日 23:52

我刚测试了使用此主题中描述的模板设置广告，它们效果很棒！

尽管我很确定我已密切按照说明操作，但我无法在此广告中显示 CSS。其他三个广告都按预期工作。

Arkshine · 2025 年3 月 11 日 00:26

您可以移除 .house-post-bottom 类。
奇怪的是，除了 CSS 之外，我在代码中看不到任何引用。

tobiaseigen · 2025 年3 月 11 日 00:28

那奏效了！！谢谢。也会更新 OP。

Arkshine · 2025 年3 月 11 日 00:47

@tobiaseigen 实际上是正确的，我的错！
该模板用于帖子之间。
代码添加了 house-<placement> 类，在此情况下为 house-post-bottom。

该模板期望设置此选项：

另外，相关的：

tobiaseigen · 2025 年3 月 11 日 00:54

嗯……我为“帖子之间”和“主题之间”选择了那个广告。删除那段代码后，它就能正常工作了？

它之前也出现在那些地方，只是没有正确的 CSS。

我将 house ads after nth post 设置为 2，所以它现在显示出来了。

那么 house-post-bottom 是做什么用的？

Arkshine · 2025 年3 月 11 日 00:56

.house-post-bottom 默认添加了此 CSS：

github.com/discourse/discourse-adplugin

assets/stylesheets/adplugin.scss

main


      
            margin: 0 auto;
          }
          
          .house-creative.house-post-bottom {
            margin: 0 0 10px 52px;
            clear: both;
          }
          
          @include viewport.until(sm) {
            .house-creative.house-post-bottom {

在主题之间，它会添加 house-topic-list-between 类，但默认不添加任何 CSS。

您可以通过以下方式进行调整并共享 CSS：

.house-creative {
  &.house-topic-list-between,
  &.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; // 设置“广告”标签的颜色
          border-radius: 5px;
        }
      }
    }
  }
}

kiefferr · 2025 年4 月 13 日 21:33

关于这个：有没有办法将广告与用户关联，并根据自定义用户组（例如 Gold/Silver 等）和/或个人用户状态（例如他们是否被暂停或处于活动状态）来控制可见性？例如：会员网站上的不同合作伙伴级别享有不同的广告福利。“Gold”合作伙伴获得 3 个广告和 3 个展示位置；“Silver”获得 2 个广告和 2 个展示位置，依此类推。

具体来说，我正在研究在一个 WordPress => Discourse 同步的网站上实现这一点的可行性，其中 Discourse 是客户端，WordPress 是提供者。用户数据、自定义组放置以及活动/暂停状态已经通过自定义 SSO 负载传递。那么，为什么不传递一些额外的广告数据呢？

话题		回复	浏览量
House Ads in the official Ad Plugin Announcements advertising	157	19182	2025 年5 月 13 日
[PAID] Make House Ads Responsive Marketplace	6	1620	2019 年10 月 18 日
Request: House Ads Plugin Feature	12	3291	2020 年5 月 18 日
Discourse Advertising Plugin (Ads) Plugin official , advertising , included-in-core	26	63280	2026 年2 月 2 日
House Ads, Codefund style codes not working Development	4	189	2024 年5 月 20 日

房源广告模板

House Ad Templates

Before You Start

Template Options

1. Simple Logo and Text Ad

2. Responsive Banner Ad - Style 1

3. Responsive Banner Ad - Style 2

4. Between Posts Text Ad

Common Issues and Solutions

相关话题