Шаблоны рекламы в доме

Discourse · 03.Июль.2019 12:29:11

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 · 23.Июнь.2021 08:12:10

Что мне делать? Я нашел конкретную статью, но она не имеет никакого смысла.

Какую часть кода нужно изменить?

osioke · 23.Июнь.2021 10:41:45

Я не совсем понял ваш вопрос: чем именно вам нужна помощь? Если вы хотите узнать, куда добавить код для рекламы, см. раздел Советы выше:

tshenry · 23.Июнь.2021 19:07:58

@Johnny_McIvor спасибо, что подняли этот вопрос! Я обновил CSS-части всех шаблонов, чтобы использовать пользовательские свойства CSS.

На скриншоте вы увидите $primary на строке 5. Замените это на var(--primary).

Аналогично, на строке 6 вы увидите $secondary. Замените это на var(--secondary).

Дайте знать, если у вас продолжат возникать проблемы.

Dawn · 24.Июнь.2021 16:38:54

Если я хочу загрузить графику двух разных размеров для моих внутренних объявлений (для десктопа и мобильных устройств), нужно ли использовать CSS-компонент для адаптивного баннерного объявления 1?

У нас очень ограниченные технические ресурсы, поэтому я пытаюсь разобраться в этом вопросе, чтобы увеличить ROI для сообщества и, как следствие, получить больше выделенных технических ресурсов (сейчас это настоящий замкнутый круг).

Мне удалось настроить показ объявления на десктопе с помощью HTML, но на мобильных устройствах это не работает, хотя большинство наших пользователей заходят именно с мобильных.

Любая помощь будет очень кстати! Спасибо!

cocococosti · 25.Июнь.2021 21:36: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 рекомендую загрузить изображения в приватную тему и взять ссылки оттуда.

Затем создайте компонент темы и добавьте стили 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 · 30.Июль.2021 20:49:36

Можно ли показывать разные внутренние объявления в разных категориях? У нас в Discourse есть категории, соответствующие разным должностным ролям участников, и мы хотим показывать рекламу образовательных мероприятий, которые соответствуют их должности.

Dawn · 02.Август.2021 17:54:54

@clayg способ есть, думаю, дело в CSS — я сам ещё в процессе. Вот ссылка:

Mr.X_Mr.X · 10.Март.2022 20:32:11

Я хотел бы использовать этот баннер в позициях сверху и снизу (перед рекомендациями). В настоящее время HTML и CSS предназначены только для размещения между постами. Кто-нибудь может помочь мне сделать так, чтобы это работало и в других позициях?

spdegabrielle · 12.Октябрь.2022 22:17:02

Как вам удалось получить очень простой градиентный фон с белым текстом в демо-видео с рекламными объявлениями?

У меня есть градиент:

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>

Это работает.

Исправление: мой текст написан прописными буквами и синего цвета, но фон не отображается. Не работает и указанное свойство цвета:blue.

скопировано из

мой CSS на месте:

hoangphuctran93 · 18.Апрель.2023 09:31:21

У меня есть предложение добавить аналогичное положение отображения «над заголовком».

thaidb · 19.Май.2024 15:47:32

На моём Android-устройстве текст не отображается в настройках.
На ноутбуке всё в порядке.
Как мне это исправить? Спасибо.

thaidb · 25.Июнь.2024 13:39:11

Вот моё видео

tobiaseigen · 10.Март.2025 23:52:51

Я только что протестировал настройку рекламы, используя шаблоны, описанные в этой теме, и они просто супер!

Однако мне не удалось отобразить CSS для этого варианта, хотя я уверен, что внимательно следовал инструкциям. Остальные три работают как положено.

Arkshine · 11.Март.2025 00:26:31

Вы можете удалить класс .house-post-bottom.
Странно, но я не вижу никаких ссылок на него в коде (кроме CSS).

tobiaseigen · 11.Март.2025 00:28:13

Сработало!! Спасибо. Обновлю и первый пост.

Arkshine · 11.Март.2025 00:47:11

@tobiaseigen На самом деле всё было верно, моя ошибка!
Шаблон предназначен для между постами.
Код добавляет класс house-<placement>, в данном случае house-post-bottom.

В шаблоне должно быть установлено следующее значение:

Также, по теме:

tobiaseigen · 11.Март.2025 00:54:07

Хм… Я выбрал эту рекламу и для вставок между постами, и для вставок между темами. После удаления этого кода всё заработало?

Раньше она появлялась в этих местах, но без правильного CSS.

Я установил значение house ads after nth post равным 2, поэтому она отображается.

Так что же делает house-post-bottom?

Arkshine · 11.Март.2025 00:56:28

.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 · 13.Апрель.2025 21:33:49

Как насчёт этого: есть ли способ привязать рекламу к пользователям и управлять её видимостью на основе пользовательских групп (Gold/Silver и т.д.) и/или статуса отдельного пользователя (например, активен или приостановлен)? Например: партнёры разных уровней на сайте с подпиской получают различные рекламные преимущества. Партнёры уровня «Gold» получают 3 объявления в 3 рекламных блоках, «Silver» — 2 и 2 и так далее.

Конкретно я исследую возможность реализации этого на сайте с синхронизацией WordPress → Discourse, где Discourse выступает клиентом, а WordPress — провайдером. Данные пользователей, принадлежность к пользовательским группам и статус (активен/приостановлен) уже передаются через кастомные SSO-нагрузки. Так почему бы не передавать и дополнительные данные о рекламе?

Тема		Ответов	Просм.
House Ads in the official Ad Plugin Announcements advertising	157	19458	13.05.2025
[PAID] Make House Ads Responsive Marketplace	6	1625	18.10.2019
Request: House Ads Plugin Feature	12	3300	18.05.2020
Discourse Advertising Plugin (Ads) Plugin official , advertising , included-in-core	27	63612	20.04.2026
House Ads, Codefund style codes not working Development	4	194	20.05.2024

Шаблоны рекламы в доме

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

Связанные темы