Modèles d'annonces immobilières

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

Que dois-je faire ? J’ai trouvé l’article spécifique, mais cela n’a aucun sens.

Quelle partie du code dois-je modifier ?

[osioke (Osioke Itseuwa)]

Je ne comprends pas tout à fait votre question ici. De quoi avez-vous besoin pour vous aider ? Si vous vous demandez où ajouter le code pour la publicité, consultez la section Astuces ci-dessus :

@tshenry

Créez un composant de thème « Publicités internes » pour contenir tout le CSS lié à vos publicités internes. Vous pouvez également l’utiliser pour télécharger toutes les images que vous souhaitez utiliser pour les publicités. Assurez-vous d’ajouter ce composant à tous les thèmes actifs pertinents !

[tshenry (Taylor)]

@Johnny_McIvor merci d’avoir soulevé ce point ! J’ai mis à jour les parties CSS de tous les modèles pour utiliser des propriétés CSS personnalisées.

Dans votre capture d’écran, vous verrez $primary utilisé à la ligne 5. Remplacez-le par var(--primary).

De même, à la ligne 6, vous verrez $secondary. Remplacez-le par var(--secondary).

Faites-moi savoir si vous rencontrez toujours des problèmes.

[Dawn (Dawn Albrecht)]

Si je souhaite télécharger deux graphiques de tailles différentes pour mes annonces maison destinées aux publicités de bureau et mobiles, dois-je utiliser le composant CSS pour l’annonce bannière réactive 1 ?

Nous disposons de ressources techniques très limitées, je tente donc de résoudre ce problème afin de générer un meilleur retour sur investissement pour la communauté et ainsi augmenter les ressources techniques dédiées (un véritable cercle vicieux pour l’instant).

Je parviens à faire fonctionner l’annonce sur un bureau avec le code HTML, mais pas sur mobile, alors que la majorité de nos utilisateurs sont sur mobile.

Toute aide serait appréciée ! Merci !

[cocococosti (Constanza Abarca)]

Bonjour @Dawn

J’ai examiné le code que vous aviez dans Responsive Banner Ad 1 et il vous manque quelques éléments. Vous devez inclure les deux images (une pour le bureau et une plus petite pour mobile) dans le HTML de la bannière publicitaire.

Voici un exemple provenant de mon site :

Essayez avec ce 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>

N’oubliez pas de remplacer la variable DESTINATION_URL. Pour DESKTOP_IMAGE_URL et MOBILE_IMAGE_URL, je vous recommande de télécharger les images dans un sujet privé et d’en récupérer les URL.

Ensuite, créez un composant de thème et ajoutez les styles CSS. Cela devrait fonctionner :

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

J’ai tout testé sur mon site et cela fonctionne comme prévu

[clayg (Clay)]

Existe-t-il un moyen d’afficher des publicités internes différentes selon les catégories ? Nous disposons de catégories Discourse correspondant aux différents rôles professionnels de nos membres, et nous souhaitons afficher des publicités pour des événements éducatifs qui correspondent à leur rôle professionnel.

[Dawn (Dawn Albrecht)]

@clayg il y a un moyen, cela a quelque chose à voir avec le CSS, je crois — je travaille moi-même dessus. Voici une référence :

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

Publicité de style « Codefund » entre les publications

Ce modèle créera une publicité subtile qui peut être utilisée comme une publicité interne « entre les publications ». Il est fortement inspiré du style de la publicité Codefund.

J’aimerais utiliser cette bannière en position supérieure et inférieure (avant les suggestions). Actuellement, le HTML et le CSS sont uniquement pour l’espace entre les publications. Quelqu’un peut-il m’aider à le faire fonctionner sur d’autres positions également ?

[spdegabrielle (Stephen De Gabrielle)]

Comment avez-vous obtenu le dégradé de fond blanc très simple du texte dans la vidéo de démonstration des annonces de la maison ?

J’ai un dégradé

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

Dois-je créer un composant de thème h-creative

et ajouter du 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>

Ça marche

Correction : mon texte est en petites majuscules et en bleu - mais le fond ne fonctionne pas. Ni la couleur spécifiée : bleu.

---

copié de

mon css in-situ :

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

J’ai une suggestion concernant l’ajout d’une position d’affichage similaire « au-dessus de l’en-tête ».

[thaidb]

Sur mon appareil Android, le texte ne s’affiche pas comme dans les paramètres.
Sur l’ordinateur portable, c’est bon.
Comment puis-je résoudre ce problème ? Merci.

[thaidb]

Voici ma vidéo

[tobiaseigen]

Je viens de tester la configuration de publicités en utilisant les modèles décrits dans ce sujet, et elles sont vraiment géniales !

@Discourse

4. Publicité de style « Codefund » entre les messages

Je n’ai pas réussi à faire apparaître le CSS pour celle-ci, bien que je sois à peu près sûr d’avoir suivi les instructions de près. Les trois autres fonctionnent comme prévu.

[Arkshine]

@Discourse

.house-creative.house-post-bottom {

Vous pouvez supprimer la classe .house-post-bottom.
Étrangement, je ne vois aucune référence dans le code (à part dans le CSS).

[tobiaseigen]

Ça a marché !! Merci. Je mettrai aussi à jour le message initial.

[Arkshine]

@tobiaseigen En fait, c’était correct, désolé !
Le modèle est pour entre les publications.
Le code ajoute la classe house-<placement> et dans ce cas house-post-bottom.

Le modèle s’attend à ce que ce paramètre soit défini :

Aussi, en relation :

[tobiaseigen]

Hmm.. J’avais sélectionné cette annonce pour les deux, entre les publications et entre les sujets. Après avoir supprimé ce code, cela a fonctionné ?

Elle apparaissait à ces endroits auparavant, mais juste sans le CSS approprié.

J’ai défini house ads after nth post sur 2, donc elle s’affiche.

Alors, que fait house-post-bottom ?

[Arkshine]

.house-post-bottom ajoute ce CSS par défaut :

assets/stylesheets/adplugin.scss

Entre les sujets, il ajoute la classe house-topic-list-between mais aucun CSS par défaut.
Vous pouvez ajuster et partager du CSS avec :

.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; // Définit la couleur de l'étiquette "Ad"
          border-radius: 5px;
        }
      }
    }
  }
}

[kiefferr (Ryan Kieffer)]

Qu’en est-il de celui-ci : existe-t-il un moyen de lier les publicités aux utilisateurs et de contrôler la visibilité en fonction de groupes d’utilisateurs personnalisés (Or/Argent/etc) et/ou du statut individuel de l’utilisateur (c’est-à-dire s’il est suspendu ou actif) ? Par exemple : différents niveaux de partenaires sur un site d’adhésion bénéficient d’avantages publicitaires différents. Les partenaires « Or » obtiennent 3 publicités dans 3 emplacements d’affichage ; les « Argent » 2 et 2, etc.

Plus précisément, j’examine la viabilité de faire cela sur un site synchronisé Wordpress => Discourse, où Discourse est le client et Wordpress le fournisseur. Les données utilisateur, le placement de groupe personnalisé et le statut actif/suspendu sont déjà transmis avec des charges utiles SSO personnalisées. Alors pourquoi ne pas transmettre également des données publicitaires supplémentaires ?