Customization | ASP Playground.NET

Customization — a customization topic from the APG vNext community covering themes, skins, and UI adjustments.

APG vNext Customization Overview

Skins: Each forum can use a separate skin. Skins are stored in App_Themes/ as CSS + image sets.
Master Pages: The .master files control the overall page layout — header, footer, and navigation.
User Controls: Custom .ascx controls can be added to the header, footer, or sidebar regions.
Theme-specific JS: JavaScript can be loaded per-theme via the skin's master page.
CSS Override: Add a custom.css file to your skin folder for targeted overrides without modifying core files.

See Template Customization Guide and Features Overview.

APG vNext Customisation Overview - Where to Start

APG vNext is designed for deep customisation at every layer: CSS, HTML templates, JavaScript, server-side configuration, and database settings. This page serves as the starting point for new community administrators who want to customise their APG vNext installation without getting overwhelmed.

Customisation Layers (from easiest to most advanced)

Admin Panel settings: colours, logo, forum names, email templates - no code required
Custom CSS file: override any visual element by adding rules to /assets/css/custom.css
Skin template editing: modify header, footer, thread layout ASCX files
Custom JavaScript: add interactive features via /assets/js/custom.js
web.config keys: configure advanced behaviour without code changes
Custom MembershipProvider / RoleProvider: integrate external authentication systems

Quick Start: Custom CSS

/* /assets/css/custom.css - safe to edit, never overwritten by upgrades */
:root {
  --apg-color-primary:   #e63946;  /* Change brand colour */
  --apg-font-family:     'Inter', sans-serif;
}
.site-header { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

Quick Start: Logo Change

Admin Panel -> Appearance -> Site Logo -> Upload new logo (recommended: SVG or PNG 200x50px)

Quick Start: Custom Email Template

<!-- /email-templates/new-reply.html -->
<p>Hi {MemberName}, {AuthorName} replied to your thread "{ThreadTitle}".</p>
<a href="{ReplyUrl}">View Reply</a>

CSS Custom Properties in APG vNext 5.x

APG vNext 5.x moved from LESS/SASS-based theme variables to native CSS Custom Properties (CSS variables). This makes theme customisation significantly simpler — you can override the entire colour scheme, typography, and spacing from a single CSS block at the top of your custom stylesheet:

/* Override APG vNext 5.x CSS variables in custom.css */
:root {
  /* Brand colours */
  --apg-primary:        #2563eb;
  --apg-primary-hover:  #1d4ed8;
  --apg-accent:         #f59e0b;

  /* Typography */
  --apg-font-sans:      'Inter', system-ui, sans-serif;
  --apg-font-mono:      'JetBrains Mono', monospace;
  --apg-font-size-base: 16px;
  --apg-line-height:    1.6;

  /* Layout */
  --apg-content-width:  860px;
  --apg-sidebar-width:  280px;
  --apg-radius:         8px;

  /* Dark mode overrides (applied when data-theme="dark") */
}
[data-theme="dark"] {
  --apg-bg:             #0f172a;
  --apg-text:           #e2e8f0;
  --apg-border:         #334155;
}

Maintaining Customisations Across Upgrades

The key principle for upgrade-safe customisation is to never modify core APG vNext files. All changes should live in:

/assets/css/custom.css — visual overrides (never overwritten by upgrades)
/assets/js/custom.js — JavaScript customisations
/email-templates/ — custom email HTML templates
web.config appSettings keys — configuration without code changes

Core files in /skins/default/, /bin/, and APG template .ascx files are replaced during upgrades. If you have customised these files, maintain a diff of your changes and re-apply them after each upgrade. APG vNext's Admin Panel → Skin → Compare to Default tool highlights which skin templates have been customised versus the upgrade default, making re-application systematic rather than guesswork.

Building a Custom Skin from Scratch

For communities that want a fully bespoke visual identity, building a custom skin rather than overriding the default skin provides cleaner separation and easier upgrade management:

Copy /skins/default/ to /skins/mycommunity/
Edit /skins/mycommunity/skin.json to set the skin name and metadata
Modify templates, CSS, and images within /skins/mycommunity/ freely
Set the active skin in Admin Panel → Appearance → Active Skin → mycommunity
Test across all page types (thread list, thread view, profile, admin panel)

Community-Contributed Customisations

The APG vNext community forum hosts a dedicated section for sharing customisations, snippets, and skins created by community members. Before building a custom feature from scratch, search this section — there is a good chance another administrator has already solved the same problem and shared their implementation. Community contributions cover dark mode implementations, sidebar widgets, custom profile fields, gamification badges, and integration snippets for popular third-party tools including Disqus, Intercom, and Crisp chat.

Performance Budget for Customisations

Every customisation has a performance cost — additional CSS rules increase the browser's style calculation time, custom JavaScript adds parse and execution time, and large banner images increase page weight. Maintain a performance budget for your APG vNext customisations to ensure they don't negate the platform's built-in optimisations. A reasonable starting budget for custom assets:

Custom CSS: under 20KB uncompressed (typically under 4KB gzipped)
Custom JavaScript: under 30KB uncompressed (deferred loading required)
Custom fonts: maximum 2 font families, 2 weights each, in WOFF2 format only
Custom images in header/footer: under 50KB total, served via CDN

Test performance before and after adding customisations using Google PageSpeed Insights or Lighthouse in Chrome DevTools. A customised forum that scores 90+ on mobile PageSpeed is achievable and provides a meaningful SEO and user experience advantage over default or heavily-customised forums with poor scores.

Related Resources

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