Haus-Anzeigen-Vorlagen

[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]

Was soll ich tun? Ich habe den spezifischen Artikel gefunden, aber er ergab keinen Sinn.

Welchen Teil des Codes muss ich ändern?

[osioke (Osioke Itseuwa)]

Ich verstehe Ihre Frage hier nicht ganz. Wobei benötigen Sie Hilfe? Wenn Sie sich fragen, wo Sie den Code für die Anzeige einfügen sollen, sehen Sie im Tipps-Bereich oben nach:

@tshenry

Erstellen Sie eine Theme-Komponente namens „House Ads“, um jegliches CSS zu speichern, das sich auf Ihre Hausanzeigen bezieht. Sie können damit auch Bilder hochladen, die Sie für die Anzeigen verwenden möchten. Vergessen Sie nicht, die Komponente zu allen relevanten, aktiven Themes hinzuzufügen!

[tshenry (Taylor)]

@Johnny_McIvor danke, dass du das angesprochen hast! Ich habe die CSS-Teile aller Vorlagen aktualisiert, um benutzerdefinierte CSS-Eigenschaften zu verwenden.

In deinem Screenshot siehst du auf Zeile 5 $primary verwendet. Ändere das zu var(--primary).

Ebenso siehst du auf Zeile 6 $secondary. Ändere das zu var(--secondary).

Lass mich wissen, falls du weiterhin Probleme hast.

[Dawn (Dawn Albrecht)]

Wenn ich für meine Hauswerbung zwei verschiedene Grafikgrößen für Desktop- und Mobilwerbung hochladen möchte, muss ich dann die CSS-Komponente für das Responsive Banner Ad 1 verwenden?

Wir haben sehr begrenzte technische Ressourcen, daher versuche ich, dies zu klären, um mehr ROI für die Community zu generieren und so zusätzliche technische Ressourcen zu gewinnen (im Moment ein klassisches Henne-Ei-Problem).

Mit HTML bekomme ich die Anzeige auf dem Desktop zum Laufen, aber nicht auf dem Mobilgerät – und die Mehrheit unserer Nutzer nutzt mobile Geräte.

Jede Hilfe wird geschätzt! Danke!

[cocococosti (Constanza Abarca)]

Hallo @Dawn

Ich habe den Code geprüft, den du in Responsive Banner Ad 1 hast, und dort fehlen ein paar Dinge. Du musst beide Bilder (eines für Desktop und ein kleineres für Mobilgeräte) im HTML für die Anzeige einfügen.

Sieh dir dieses Beispiel von meiner Seite an:

Versuche es mit diesem 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>

Vergiss nicht, die Variable DESTINATION_URL anzupassen. Für DESKTOP_IMAGE_URL und MOBILE_IMAGE_URL empfehle ich dir, die Bilder in einem privaten Thema hochzuladen und die URLs von dort zu übernehmen.

Erstelle anschließend eine Theme-Komponente und füge die CSS-Stile hinzu. Das sollte funktionieren:

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

Ich habe das alles auf meiner Seite getestet, und es funktioniert wie erwartet

[clayg (Clay)]

Gibt es eine Möglichkeit, verschiedene Hausanzeigen in verschiedenen Kategorien anzuzeigen? Wir haben Discourse-Kategorien, die den verschiedenen Berufsrollen unserer Mitglieder entsprechen, und wir möchten Anzeigen für Bildungsevents zeigen, die zu ihrer Berufsrolle passen.

[Dawn (Dawn Albrecht)]

@clayg Es gibt einen Weg, das hat meines Erachtens etwas mit dem CSS zu tun – ich arbeite noch selbst daran. Hier ist ein Referenzlink:

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

Anzeige im „Codefund“-Stil zwischen Beiträgen

Diese Vorlage erstellt eine dezente Anzeige, die als „Hausanzeige zwischen Beiträgen“ verwendet werden kann. Sie ist stark vom Codefund-Anzeige-Stil inspiriert.

Ich möchte dieses Banner oben und unten (vor den Vorschlägen) verwenden. Derzeit sind HTML und CSS nur für den Bereich zwischen den Beiträgen vorgesehen. Kann mir jemand helfen, es auch für andere Positionen funktionsfähig zu machen?

[spdegabrielle (Stephen De Gabrielle)]

Wie hast du den wirklich einfachen weißen Textverlauf-Hintergrund im Demo-Video der Hausanzeigen erhalten?

Ich habe einen Verlauf

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

Erstelle ich eine Themenkomponente h-creative

und füge CSS hinzu

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

Es funktioniert

Korrektur: Mein Text ist in Kleinbuchstaben und blau – aber der Hintergrund funktioniert nicht. Auch nicht die angegebene Farbe: blau.

---

kopiert von

mein CSS vor Ort:

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

Ich habe einen Vorschlag, eine ähnliche Anzeigeposition „über dem Header“ hinzuzufügen.

[thaidb]

Auf meinem Android-Gerät wird Text nicht als Einstellung angezeigt
Auf dem Laptop ist es in Ordnung
Wie kann ich das beheben? Vielen Dank

[thaidb]

Hier ist mein Video

[tobiaseigen]

Ich habe gerade versucht, Anzeigen mit den in diesem Thema beschriebenen Vorlagen einzurichten, und sie sind echt super!

@Discourse

4. Anzeige im „Codefund“-Stil zwischen Beiträgen

Ich konnte das CSS für diese Anzeige jedoch nicht zum Laufen bringen, obwohl ich ziemlich sicher bin, dass ich die Anweisungen genau befolgt habe. Die anderen drei funktionieren wie erwartet.

[Arkshine]

@Discourse

.house-creative.house-post-bottom {

Sie können die Klasse .house-post-bottom entfernen.
Seltsamerweise sehe ich keinen Verweis im Code (außer im CSS).

[tobiaseigen]

Das hat funktioniert!! Danke. Werde auch die OP aktualisieren.

[Arkshine]

@tobiaseigen Tatsächlich war es richtig, mein Fehler!
Die Vorlage ist für zwischen Beiträgen.
Der Code fügt die Klasse house-<placement> hinzu und in diesem Fall house-post-bottom.

Die Vorlage erwartet, dass diese Einstellung vorgenommen wird:

Außerdem, verwandtes:

[tobiaseigen]

Hmm.. Ich habe diese Anzeige sowohl für „zwischen Beiträgen“ als auch für „zwischen Themen“ ausgewählt. Nachdem ich diesen Code entfernt hatte, funktionierte es?

Sie erschien vorher auch an diesen Stellen, nur eben ohne das richtige CSS.

Ich habe house ads after nth post auf 2 gesetzt, also wird sie angezeigt.

Was macht also house-post-bottom?

[Arkshine]

.house-post-bottom fügt standardmäßig dieses CSS hinzu:

assets/stylesheets/adplugin.scss

Zwischen Themen fügt es die Klasse house-topic-list-between hinzu, aber standardmäßig kein CSS.
Sie können dies anpassen und gemeinsames CSS mit Folgendem haben:

.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; // Setzt die Farbe des "Ad"-Labels
          border-radius: 5px;
        }
      }
    }
  }
}

[kiefferr (Ryan Kieffer)]

Wie sieht es damit aus: Gibt es eine Möglichkeit, Anzeigen an Benutzer zu binden und die Sichtbarkeit basierend auf benutzerdefinierten Benutzergruppen (Gold/Silber/usw.) und/oder dem individuellen Benutzerstatus (d. h. ob sie gesperrt oder aktiv sind) zu steuern? Als Beispiel: Unterschiedliche Partnerstufen auf einer Mitgliedschaftsseite erhalten unterschiedliche Anzeigen-Vorteile. „Gold“-Partner erhalten 3 Anzeigen auf 3 Anzeigeflächen; „Silber“ 2 und 2 usw.

Insbesondere untersuche ich die Machbarkeit, dies auf einer synchronisierten WordPress-zu-Discourse-Website zu tun, wobei Discourse der Client und WordPress der Anbieter ist. Benutzerdaten, benutzerdefinierte Gruppenzuordnung und aktiver/gesperrter Status werden bereits mit benutzerdefinierten SSO-Payloads übergeben. Warum also nicht auch einige zusätzliche Anzeigendaten übergeben?