House Ad Templates

[Discourse]

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

1. Create a “House Ads” theme component to store:
   • CSS for your house ads
   • Uploaded images used in ads
2. Add the component to all active themes where ads will appear
3. 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

1. Mobile Display Issues: Ensure both desktop and mobile images are properly defined in HTML and CSS is correctly handling the responsive breakpoints
2. Color Scheme Problems: Use CSS custom properties (var(--primary), var(--secondary)) instead of hard-coded colors
3. 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]

어떻게 해야 하나요? 해당 기사를 찾았지만 이해가 되지 않았습니다.

코드 중 어떤 부분을 수정해야 하나요?

[osioke (Osioke Itseuwa)]

여기서 질문하신 내용을 정확히 이해하지 못하겠습니다. 어떤 도움이 필요하신가요? 광고 코드를 어디에 추가해야 하는지 궁금하시다면, 위의 팁 섹션을 참고해 주세요:

@tshenry

하우스 광고와 관련된 모든 CSS를 보관하기 위해 테마 컴포넌트를 생성하세요. 광고에 사용하려는 이미지도 업로드할 수 있습니다. 관련 있는 활성 테마에 해당 컴포넌트를 반드시 추가하세요!

[tshenry (Taylor)]

@Johnny_McIvor 이 문제를 알려주셔서 감사합니다! 모든 템플릿의 CSS 부분을 CSS 커스텀 프로퍼티를 사용하도록 업데이트했습니다.

스크린샷에서 5번째 줄에 $primary가 사용된 것을 볼 수 있습니다. 이를 var(--primary)로 변경해 주세요.

마찬가지로 6번째 줄에는 $secondary가 사용되어 있습니다. 이를 var(--secondary)로 변경해 주세요.

여전히 문제가 발생한다면 알려주세요.

[Dawn (Dawn Albrecht)]

데스크톱/모바일용 하우스 광고에 서로 다른 크기의 그래픽을 업로드하려면 Responsive Banner Ad 1에 CSS 컴포넌트를 사용해야 하나요?

저희는 기술 자원이 매우 제한되어 있어서, 커뮤니티에 더 많은 전용 기술 자원을 확보하여 ROI를 높이기 위해 이 문제를 해결하려고 노력하고 있습니다(현재 매우 악순환에 빠져 있는 상태입니다).

HTML을 사용하면 데스크톱에서 광고가 정상적으로 작동하지만 모바일에서는 작동하지 않으며, 저희 사용자의 대부분은 모바일을 이용합니다.

도움 주시면 감사하겠습니다! 감사합니다!

[cocococosti (Constanza Abarca)]

안녕하세요 @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을 가져오는 것을 권장합니다.

그 다음 테마 컴포넌트를 생성하고 CCS 스타일을 추가하세요. 이렇게 하면 작동할 것입니다:

    .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 (Clay)]

다른 카테고리별로 다른 하우스 광고를 표시할 수 있는 방법이 있을까요? 저희는 회원들의 직무에 맞춘 Discourse 카테고리를 운영하고 있으며, 해당 직무와 관련된 교육 이벤트 광고를 표시하고 싶습니다.

[Dawn (Dawn Albrecht)]

@clayg 방법이 있습니다. CSS와 관련이 있는 것 같습니다. 저도 아직研究中입니다. 참고 링크를 공유합니다:

House Ads in the official Ad Plugin

Can you explain your solution with an example? What html/css code did you use?

[Mr.X_Mr.X]

@tshenry

게시물 사이 “Codefund” 스타일 광고

이 템플릿은 “게시물 사이” 하우스 광고로 사용할 수 있는 은은한 광고를 생성합니다. Codefund 광고 스타일에 크게 영감을 받았습니다.

이 배너를 상단과 하단(제안 사항 이전) 위치에 사용하려고 합니다. 현재 HTML과 CSS는 게시물 사이 위치에만 적용되도록 되어 있습니다. 다른 위치에서도 작동하도록 도와주실 수 있나요?

[spdegabrielle (Stephen De Gabrielle)]

하우스 광고 데모 비디오에서 정말 단순한 흰색 텍스트 그라디언트 배경은 어떻게 만들었나요?

저는 다음 같은 그라디언트가 있습니다.

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>

동작은 합니다

수정: 제 텍스트는 소형 대문자(small caps)이고 파란색인데, 배경은 작동하지 않습니다. 지정된 색상인 파란색도 아닙니다.

---

복사한 출처

실제 적용된 제 css:

[hoangphuctran93 (Hoàng Phúc Trần)]

상단 헤더 표시 영역과 유사한 위치를 추가하는 것에 대한 제안입니다.

[thaidb]

제 안드로이드 기기에 텍스트가 설정값으로 표시되지 않습니다.
노트북에서는 정상적으로 보입니다.
어떻게 수정할 수 있을까요? 감사합니다.

[thaidb]

제 영상입니다

[tobiaseigen]

이 주제에서 설명된 템플릿을 사용해 광고 설정을 테스트해 봤는데, 꽤 마음에 듭니다!

@Discourse

4. 게시물 사이 “Codefund” 스타일 광고

다만 이 광고의 경우 CSS가 표시되지 않는데, 지시를 꼼꼼히 따랐다고 생각해요. 나머지 세 개는 모두 정상적으로 작동하고 있습니다.

[Arkshine]

@Discourse

.house-creative.house-post-bottom {

.house-post-bottom 클래스를 제거할 수 있습니다.
이상하게도 코드에서 이 클래스에 대한 참조를 찾지 못했습니다(CSS 제외).

[tobiaseigen]

성공적으로 작동했어요!! 감사합니다. 원본 게시물에도 업데이트하겠습니다.

[Arkshine]

@tobiaseigen 사실은 맞았습니다. 제 실수였어요!
이 템플릿은 게시물 사이에 사용됩니다.
이 코드는 house-<placement> 클래스를 추가하며, 이 경우 house-post-bottom이 됩니다.

이 템플릿은 이 설정이 지정되어 있어야 합니다:

또한 관련 내용:

[tobiaseigen]

음.. 해당 광고를 게시글 사이와 토픽 사이 모두에 선택했었어요. 그 코드를 제거한 뒤에는 작동하더라고요.

그 전에는 해당 위치에 표시되기는 했는데, 적절한 CSS가 적용되지 않았을 뿐이었어요.

house ads after nth post를 2로 설정했는데, 이제 정상적으로 표시되고 있습니다.

그렇다면 house-post-bottom은 무엇을 하는 건가요?

[Arkshine]

.house-post-bottom는 기본적으로 이 CSS를 추가합니다:

assets/stylesheets/adplugin.scss

토픽 사이에는 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; // "Ad" 레이블의 색상을 설정합니다
          border-radius: 5px;
        }
      }
    }
  }
}

[kiefferr (Ryan Kieffer)]

이건 어떨까요: 광고를 사용자와 연결하고, 사용자 정의 사용자 그룹(골드/실버 등) 및/또는 개별 사용자 상태(예: 정지됨 또는 활성 상태)에 따라 표시 여부를 제어할 수 있는 방법이 있을까요? 예를 들어, 회원제 사이트에서 서로 다른 파트너 등급이 서로 다른 광고 혜택을 받는 경우입니다. ‘골드’ 파트너는 3개 디스플레이 위치에 3개의 광고를, ‘실버’ 파트너는 2개 위치에 2개의 광고를 노출하는 식이죠.

구체적으로, 저는 WordPress => Discourse 동기화 사이트에서 이 기능을 구현할 수 있는지 검토하고 있습니다. 여기서 Discourse는 클라이언트이고 WordPress는 제공자 역할을 합니다. 사용자 데이터, 사용자 정의 그룹 배치, 활성/정지 상태는 이미 사용자 정의 SSO 페이로드를 통해 전달되고 있습니다. 그렇다면 추가적인 광고 데이터도 함께 전달하는 건 어떨까요?