Support Thread

Customization Configure The Header And Footer

Customization Configure The Header And Footer — APG vNext Guide

Customization Configure The Header And Footer — a configuration and setup topic from the APG vNext support community.

Key Configuration Points

  • IIS App Pool: .NET 4.0 Integrated Pipeline mode is required.
  • Connection String: Verify SQL Server name, database, and credentials in web.config.
  • File Permissions: App pool identity needs read/write on the upfiles folder.
  • URL Rewriting: Install IIS URL Rewrite 2.0 module for clean SEO-friendly URLs.
  • Full-Text Search: Enable SQL Server Full-Text Indexing for forum search.

More Help

Configuring the APG vNext Header and Footer

The header and footer in APG vNext are controlled by skin template files that you can edit freely. This guide covers both the basic skin editing workflow and advanced techniques for injecting custom HTML, scripts, and structured data without modifying APG core files.

Header Template Location

-- APG vNext 4.x+:
/skins/[YourSkin]/header.ascx

-- APG vNext 3.x:
/skins/[YourSkin]/templates/_header.htm

Adding a Custom Navigation Bar Item

<ul class="apg-nav-menu">
  <!-- Existing nav items -->
  <li><a href="/community">Forum</a></li>
  <!-- Add custom item: -->
  <li><a href="/dev/">Developer Guides</a></li>
</ul>

Adding Structured Data to Header

<!-- JSON-LD schema in header template -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "APG vNext Community",
  "url": "https://aspplayground.net/community"
}
</script>

Footer Legal Links

<footer class="site-footer">
  <p>&copy; 2026 YourCommunity. All rights reserved.</p>
  <nav>
    <a href="/agreement.asp">Terms</a> ·
    <a href="/privacy">Privacy</a> ·
    <a href="/Contact.aspx">Contact</a>
  </nav>
</footer>

Injecting Custom Scripts Without Editing Core Files

<!-- web.config: custom scripts injected into header -->
<add key="APG.CustomHeadHTML"
     value="<script defer src='/assets/js/custom.js'></script>" />
<add key="APG.CustomFooterHTML"
     value="<div id='cookie-banner'></div>" />

Responsive Header Behaviour on Mobile

APG vNext's header template must handle both desktop and mobile layouts. On mobile viewports (under 768px), the standard horizontal navigation bar should collapse into a hamburger menu to avoid crowding. The APG vNext default skin implements this with a CSS media query and a minimal JavaScript toggle:

/* Header responsive collapse */
.apg-nav-menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.apg-hamburger { display: none; }

@media (max-width: 768px) {
  .apg-nav-menu {
    display:  none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0; right: 0;
    background: var(--bg-header);
    padding: 1rem;
    z-index: 100;
  }
  .apg-nav-menu.open { display: flex; }
  .apg-hamburger { display: block; }
}
// Toggle menu open/closed on hamburger click:
document.querySelector('.apg-hamburger').addEventListener('click', () => {
  document.querySelector('.apg-nav-menu').classList.toggle('open');
});

Sticky Header Implementation

A sticky header that follows the member as they scroll down long forum threads keeps navigation accessible without requiring a scroll back to the top. Implement it with CSS position sticky and a shadow on scroll:

.apg-site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg-header);
  transition: box-shadow 0.2s ease;
}
.apg-site-header.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

// Add scrolled class when user has scrolled:
window.addEventListener('scroll', () => {
  document.querySelector('.apg-site-header')
    .classList.toggle('scrolled', window.scrollY > 0);
}, { passive: true });

Footer SEO Best Practices

The footer of every forum page is an opportunity to reinforce the site's internal link structure and provide additional context for search engine crawlers. Include links to all major forum sections, the sitemap, privacy policy, terms of service, and contact page. Ensure footer links use descriptive anchor text rather than generic phrases like "click here." Avoid stuffing the footer with dozens of keyword-rich links — a clean footer with 8–12 well-chosen links is more credible to both users and search engines than an overcrowded link farm. Structure the footer into logical groups (Product, Support, Resources, Legal) using an HTML list structure that search engines can parse as organised navigation.

Caching Considerations for Header/Footer Changes

The header and footer are rendered on every page of the forum. Changes to these templates take effect immediately on the server, but may be cached by Cloudflare or the member's browser for several minutes. After making header or footer changes, purge the CDN cache for all pages (or at minimum, the homepage and a few representative thread pages) to verify the changes are live. If using Cloudflare, a single-click cache purge from the Cloudflare dashboard updates all edge caches globally within 30 seconds.

Internationalisation in Header and Footer

For multilingual communities, the header and footer templates need to display text in the current member's language. APG vNext's language system provides template variable access to localised strings defined in APG language files. Rather than hardcoding English text in your header template, use language string references that automatically display in the member's active language:

<!-- Header template: use language strings instead of hardcoded text -->
<nav class="apg-nav-menu" aria-label="<%: APGLang.Get("NavAriaLabel") %>">
  <a href="/community"><%: APGLang.Get("NavForum") %></a>
  <a href="/dev/"><%: APGLang.Get("NavDevGuides") %></a>
</nav>

Define the language strings in each APGLang XML file:

<!-- APGLang.en.xml -->
<string name="NavAriaLabel">Main navigation</string>
<string name="NavForum">Community Forum</string>
<string name="NavDevGuides">Developer Guides</string>

<!-- APGLang.fr.xml -->
<string name="NavAriaLabel">Navigation principale</string>
<string name="NavForum">Forum communautaire</string>
<string name="NavDevGuides">Guides développeur</string>

Header and Footer for Print Stylesheets

When members print forum threads, the default header and footer can clutter the printed page. A print stylesheet that hides navigation, the footer, and promotional content produces cleaner printed output. Add a print stylesheet link to the header template to apply these rules automatically when members choose to print a thread:

<link rel="stylesheet" href="/assets/css/print.css" media="print" />

/* print.css */
@media print {
  .apg-site-header,
  .apg-nav-menu,
  .apg-sidebar,
  .apg-footer-links,
  .apg-action-buttons { display: none !important; }

  .apg-post-body { font-size: 11pt; line-height: 1.5; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

Related Resources

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