Plantillas de Anuncios de Casa

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

¿Qué debo hacer? Encontré el artículo específico, pero no tuvo ningún sentido.

¿Qué parte del código debo modificar?

[osioke (Osioke Itseuwa)]

No termino de entender tu pregunta aquí, ¿en qué necesitas ayuda? Si te preguntas dónde agregar el código para el anuncio, consulta la sección de consejos anterior:

@tshenry

Crea un componente de tema de «Anuncios internos» para alojar cualquier CSS relacionado con tus anuncios internos. También puedes usarlo para subir cualquier imagen que quieras utilizar para los anuncios. ¡Asegúrate de agregar el componente a cualquier tema relevante y activo!

[tshenry (Taylor)]

@Johnny_McIvor ¡gracias por mencionarlo! He actualizado las partes CSS de todas las plantillas para que utilicen propiedades personalizadas de CSS.

En tu captura de pantalla verás $primary usado en la línea 5. Cámbialo por var(--primary).

De manera similar, en la línea 6 verás $secondary. Cámbialo por var(--secondary).

Avísame si sigues teniendo algún problema.

[Dawn (Dawn Albrecht)]

Si quiero subir dos gráficos de diferentes tamaños para mis anuncios de la casa, uno para escritorio y otro para móvil, ¿necesito usar el componente CSS para el Anuncio Banners Responsivo 1?

Tenemos recursos técnicos muy limitados, así que estoy tratando de resolver esto para generar más ROI para la comunidad y así poder aumentar los recursos técnicos dedicados (es un verdadero círculo vicioso en este momento).

Puedo hacer que el anuncio funcione en escritorio con HTML, pero no en móvil, y la mayoría de nuestros usuarios son de dispositivos móviles.

¡Agradecemos cualquier ayuda! ¡Gracias!

[cocococosti (Constanza Abarca)]

Hola @Dawn

Revisé el código que tenías en Responsive Banner Ad 1 y te faltan algunas cosas. Debes incluir ambas imágenes (una para escritorio y una más pequeña para móvil) en el HTML del anuncio.

Mira este ejemplo de mi sitio:

Prueba con este código:

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

Recuerda reemplazar la variable DESTINATION_URL. Para DESKTOP_IMAGE_URL y MOBILE_IMAGE_URL, te recomiendo subir las imágenes a un tema privado y obtener las URLs desde allí.

Luego, crea un componente del tema y agrega los estilos CSS. Esto debería funcionar:

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

Probé todo esto en mi sitio y funciona como se espera

[clayg (Clay)]

¿Existe alguna manera de mostrar anuncios propios diferentes en distintas categorías? Tenemos categorías en Discourse que coinciden con los distintos roles profesionales de nuestros miembros, y queremos mostrar anuncios de eventos educativos que se alineen con su rol profesional.

[Dawn (Dawn Albrecht)]

@clayg hay una forma, creo que tiene algo que ver con el CSS; todavía estoy trabajando en ello. Aquí tienes una referencia:

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

Anuncio estilo “Codefund” entre publicaciones

Esta plantilla creará un anuncio sutil que se puede usar como un anuncio interno “entre publicaciones”. Está fuertemente inspirado en el estilo del anuncio de Codefund.

Me gustaría usar este banner en la posición superior y en la inferior (antes de las sugerencias). Actualmente, el HTML y CSS son solo para entre publicaciones. ¿Alguien puede ayudarme a que funcione también en otras posiciones?

[spdegabrielle (Stephen De Gabrielle)]

¿Cómo obtuviste el fondo degradado de texto blanco realmente simple en el video de demostración de los anuncios de la casa?

Tengo un degradado

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

¿Creo un componente temático h-creative?

y añadir 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>

Funciona

Corrección: mi texto está en mayúsculas pequeñas y es azul, pero el fondo no funciona. Tampoco es del color especificado: azul.

---

copiado de

mi css in situ:

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

Tengo una sugerencia sobre la adición de una posición de visualización “encima del encabezado” similar.

[thaidb]

En mi dispositivo Android, el texto no se muestra como en la configuración.
En el portátil funciona bien.
¿Cómo puedo solucionarlo? Gracias.

[thaidb]

Aquí está mi video

[tobiaseigen]

¡Acabo de estar probando la configuración de anuncios usando las plantillas descritas en este tema, y son geniales!

@Discourse

4. Anuncio estilo “Codefund” entre publicaciones

Sin embargo, no pude hacer que el CSS apareciera en este, aunque estoy bastante seguro de que seguí las instrucciones de cerca. Los otros tres funcionan como se esperaba.

[Arkshine]

@Discourse

.house-creative.house-post-bottom {

Puedes eliminar la clase .house-post-bottom.
Curiosamente, no veo ninguna referencia en el código (aparte de en el CSS).

[tobiaseigen]

¡Eso funcionó! Gracias. También actualizaré el OP.

[Arkshine]

@tobiaseigen En realidad era correcto, ¡mi error!
La plantilla es para entre publicaciones.
El código agrega la clase house-<placement> y en este caso house-post-bottom.

La plantilla espera que esta configuración esté establecida:

También, relacionado:

[tobiaseigen]

Hmm… Seleccioné ese anuncio tanto para “entre publicaciones” como para “entre temas”. Después de eliminar ese código, ¿funcionó?

Estaba apareciendo en esos lugares antes, pero simplemente sin el CSS adecuado.

Establecí house ads after nth post en 2, así que se está mostrando.

Entonces, ¿qué hace house-post-bottom?

[Arkshine]

.house-post-bottom añade este CSS por defecto:

assets/stylesheets/adplugin.scss

Entre temas, añade la clase house-topic-list-between pero sin CSS por defecto.
Puedes ajustar y tener CSS compartido con:

.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; // Establece el color de la etiqueta "Ad"
          border-radius: 5px;
        }
      }
    }
  }
}

[kiefferr (Ryan Kieffer)]

¿Hay alguna forma de vincular anuncios a los usuarios y controlar la visibilidad según grupos de usuarios personalizados (Oro/Plata/etc.) y/o el estado individual del usuario (es decir, si está suspendido o activo)? Como ejemplo: diferentes niveles de socios en un sitio de membresía obtienen diferentes ventajas publicitarias. Los socios ‘Oro’ obtienen 3 anuncios en 3 ubicaciones de visualización; ‘Plata’ 2 y 2, etc.

Específicamente, estoy investigando la viabilidad de hacer esto en un sitio sincronizado de Wordpress => Discourse, donde Discourse es el cliente y Wordpress el proveedor. Los datos del usuario, la ubicación del grupo personalizado y el estado activo/suspendido ya se pasan con cargas útiles personalizadas de SSO. Entonces, ¿por qué no pasar también datos publicitarios adicionales?