How Do I Customize The Look And Feel — 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
.masterfiles control the overall page layout — header, footer, and navigation. - User Controls: Custom
.ascxcontrols 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.cssfile to your skin folder for targeted overrides without modifying core files.
See Template Customization Guide and Features Overview.
Customising APG vNext Look and Feel
Four levels from admin panel settings to full custom skin. Start with Level 1 (no code) and escalate only as needed.
Level 1 - Admin Panel
Appearance -> Logo, Colours, Fonts, Custom CSS field
Level 2 - Custom CSS
/* /assets/css/custom.css */
:root { --apg-color-primary: #0070f3; }Level 3 - Skin Templates
/skins/[YourSkin]/header.ascxLevel 4 - Full Custom Skin
Copy default skin, rename, set active in web.config.
Related Resources
Customising APG vNext Appearance
APG vNext's appearance is customisable at three levels: CSS variable overrides (changing colours, fonts, and spacing without touching template files), custom CSS injection (adding or overriding specific component styles), and full skin customisation (modifying the HTML template structure). For most branding requirements, CSS variable overrides are sufficient and easiest to maintain across APG vNext upgrades. Define overrides in Admin Panel → Appearance → Custom CSS, which injects the CSS after the APG vNext default styles:
:root {
--apg-primary: #0057a8; /* Brand primary colour */
--apg-accent: #ff6b00; /* Call-to-action colour */
--apg-bg: #f5f7fa; /* Page background */
--apg-header-bg: #003366; /* Header background */
--apg-font-family: 'Inter', system-ui, sans-serif;
}Custom Logo and Favicon
Replace the APG vNext default logo with your community's brand logo in Admin Panel → Appearance → Branding → Logo Upload. The logo upload supports SVG (recommended for scalability), PNG, and JPEG formats. For the best appearance across all display densities including retina screens, use SVG format. If using raster format, provide a 2x resolution image (e.g., 400×100px for a 200×50px display area). Upload a custom favicon (16x16, 32x32, and 180x180px Apple Touch Icon) to complete the browser tab and bookmark branding. APG vNext generates the appropriate HTML link tags for all favicon sizes from a single high-resolution favicon upload.
Responsive Design Customisation
APG vNext's default skin is fully responsive, adapting to mobile, tablet, and desktop viewports. Custom CSS changes must be tested across all three viewport sizes to ensure the customisation does not break the mobile layout. Use CSS media queries to apply mobile-specific overrides when needed. APG vNext's responsive breakpoints are: mobile below 640px, tablet 640px-1024px, desktop above 1024px. Target these breakpoints in custom CSS using the same values to ensure custom styles align with the skin's existing responsive behaviour. The Admin Panel Preview feature allows previewing the forum at different viewport widths without needing a physical device for each screen size.
CSS Architecture for Maintainable APG vNext Themes
Well-structured CSS is critical for long-term maintainability of APG vNext theme customisations. As the forum evolves and APG vNext is updated, custom CSS that tightly couples to the internal structure of APG vNext's default skin classes can break when the default skin changes. Reduce this coupling by using CSS custom properties for all design tokens (colours, font sizes, spacing values) and writing custom rules that target semantic class names rather than deeply nested structural selectors. Separate custom CSS into logical files: variables (custom property definitions), base (global element styles), components (forum-specific component overrides), and utilities (helper classes). Maintain these files in version control and document the purpose of each override with comments to make future maintenance by other developers straightforward.
Web Font Integration in APG vNext
Custom web fonts significantly impact forum personality and brand consistency. APG vNext supports web font loading via the Admin Panel → Appearance → Custom Fonts or via the Custom CSS/Head Scripts settings. The recommended approach for web font loading is to use the font-display: swap CSS property to prevent render-blocking while the font loads, and to preload the font file in the HTML head for the primary font that affects above-the-fold content. Self-hosting web fonts (by copying the font files to the skin's assets folder) is preferred over third-party CDN loading for privacy (no third-party request on page load) and performance (no DNS lookup required). Google Fonts can be downloaded and self-hosted using tools like google-webfonts-helper.
Animation and Micro-Interactions
Subtle animations and micro-interactions in APG vNext forum skins improve the perceived responsiveness of the interface and communicate state changes clearly to members. Use CSS transitions for hover effects on buttons, navigation items, and thread list items to provide visual feedback that the element is interactive. Use CSS animations for loading states (skeleton screens while content loads, spinner during form submission) to communicate that an action is in progress. Keep animations short (under 300ms for hover states, under 500ms for loading indicators) to avoid slowing down the perceived interaction speed. Respect the member's motion preference by wrapping all non-essential animations in a prefers-reduced-motion media query to disable them for members who have indicated a preference for reduced motion in their operating system accessibility settings.
Looking for more help? Browse the support forum or check the Knowledge Base.