Support Thread

Banner alignment

📅 👤 ASP Playground
Banner alignment — APG vNext Guide

This archived community thread from the APG vNext support forum discusses: Banner alignment.

About This Topic

Hello, I've run into a small problem with a seemingly easy to set up thing.Trying to change the top banner, did everything as stated in Template Customizatio...

Getting Help with APG vNext

APG vNext is a powerful ASP.NET forum and community platform. For questions related to this topic:

If you need direct assistance, the support team is active in the community forum.

Banner Alignment Issues in APG vNext — Responsive Layout Fix

Forum banners in APG vNext — whether used as a site header banner, a forum-specific banner, or a category header — frequently display misaligned on mobile or tablet viewports if not styled with responsive CSS. Common symptoms include the banner overflowing its container, appearing off-centre, or sitting too close to the navigation bar. This guide covers the correct HTML structure and CSS for properly aligned banners across all screen sizes.

Correct Banner HTML Structure

APG vNext renders forum banners inside the skin's header.ascx or as part of the forum index template. The recommended markup:

<!-- APG vNext site banner — responsive structure -->
<div class="apg-banner-wrapper">
  <img src="/assets/images/banner.webp"
       alt="Forum Banner"
       class="apg-banner-img"
       width="1200" height="200"
       loading="lazy"
       decoding="async" />
</div>

Always specify width and height attributes on the img tag. This reserves space before the image loads, preventing CLS (Cumulative Layout Shift) which hurts Core Web Vitals scores.

Responsive Banner CSS

/* APG vNext — responsive banner styles */
.apg-banner-wrapper {
  width:     100%;
  max-width: 100%;
  overflow:  hidden;
  line-height: 0;   /* removes inline gap below image */
  text-align: center;
}
.apg-banner-img {
  width:     100%;
  max-width: 1200px;
  height:    auto;
  display:   block;
  margin:    0 auto;
  object-fit: cover;
}
@media (max-width: 768px) {
  .apg-banner-img {
    max-height: 120px;
    object-position: center top;
  }
}
@media (max-width: 480px) {
  .apg-banner-img {
    max-height: 80px;
  }
}

Per-Forum Banner Alignment

APG vNext supports per-forum banners set in Admin Panel → Forums → [Forum Name] → Banner. To prevent individual forum banners from inheriting site-wide styles incorrectly:

.apg-forum-banner .apg-banner-img {
  object-position: left center;  /* align forum banner to left */
}

WebP Conversion for Banner Images

Replace JPEG/PNG banners with WebP for 25–35% smaller file sizes without visible quality loss:

# Convert banner to WebP (cwebp tool):
cwebp -q 85 banner.png -o banner.webp

# Serve with HTML picture element for fallback:
<picture>
  <source srcset="/assets/images/banner.webp" type="image/webp" />
  <img src="/assets/images/banner.png" alt="Banner" class="apg-banner-img" />
</picture>

Dark Mode Banner Handling

If your APG vNext skin supports a dark mode toggle, your banner image needs to adapt. The CSS prefers-color-scheme media query and the HTML picture element combine to serve a dark-friendly version automatically:

<picture>
  <source media="(prefers-color-scheme: dark)"
          srcset="/assets/images/banner-dark.webp" />
  <source srcset="/assets/images/banner-light.webp" />
  <img src="/assets/images/banner-light.png"
       alt="Forum Banner"
       class="apg-banner-img"
       width="1200" height="200" />
</picture>

Alternatively, if your banner is an SVG or uses CSS-controlled colours, you can adapt it entirely in CSS:

@media (prefers-color-scheme: dark) {
  .apg-banner-wrapper {
    filter: brightness(0.85) contrast(1.1);
    /* Slightly dim the banner in dark mode to reduce harsh contrast --*/
  }
}

Forum-Specific Banners vs. Site-Wide Banners

APG vNext allows a banner at three levels, each overriding the level above:

  • Site-wide banner: Admin Panel → Settings → Appearance → Site Banner
  • Category banner: Admin Panel → Forums → [Category] → Category Banner
  • Forum banner: Admin Panel → Forums → [Forum Name] → Forum Banner

The banner hierarchy means a category's banner overrides the site banner for all forums within that category, and a per-forum banner overrides the category banner for that specific forum. Set a neutral site-wide banner and customise banners for specific sections where brand differentiation adds value (e.g., a product support forum vs. a general discussion forum).

Debugging Banner Display Order

-- Check which banner is configured at each level:
SELECT 'site' AS level, SettingValue AS banner_url
FROM   apg_Settings WHERE SettingKey = 'SiteBanner'
UNION ALL
SELECT 'category: ' + CategoryName, BannerUrl
FROM   apg_ForumCategories WHERE BannerUrl IS NOT NULL
UNION ALL
SELECT 'forum: ' + ForumName, BannerUrl
FROM   apg_Forums WHERE BannerUrl IS NOT NULL
ORDER  BY level;

Core Web Vitals Impact of Banner Images

The banner is typically the largest visible image on the page and is a strong candidate for the LCP (Largest Contentful Paint) element. To ensure it does not harm your Core Web Vitals score:

  • Preload the banner with <link rel="preload" as="image"> in the page head
  • Serve via CDN with a short geographic round-trip time
  • Compress to WebP at quality 80-85 — most banners are under 50KB at 1200×200
  • Add fetchpriority="high" to the banner <img> element to signal the browser to prioritise it
<!-- In APG vNext skin <head> section: -->
<link rel="preload" as="image"
      href="/assets/images/banner.webp"
      type="image/webp" />

<!-- On the img element: -->
<img src="/assets/images/banner.webp"
     alt="Forum Banner"
     width="1200" height="200"
     fetchpriority="high"
     class="apg-banner-img" />

Related Resources

Looking for more help? Browse the support forum or check the Knowledge Base.