Better Ui Better Experience | ASP Playground.NET

Better Ui Better Experience — 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.

Better UI, Better Experience — APG vNext Design Philosophy

The visual overhaul introduced in APG vNext 4.0 was driven by a single principle: every interface element should help members participate faster, with less friction. The previous UI accumulated a decade of incremental additions that created a cluttered, inconsistent experience. This post covers the key design decisions made in the redesign and how they benefit community administrators and members.

Reduced Visual Noise

The old interface displayed 14 separate action buttons per post. Member eye-tracking tests showed that most users saw only the "Reply" and "Quote" buttons — the rest were ignored or actively confusing. The new UI collapses all secondary actions into a single contextual menu (the three-dot icon), exposing only the two most common actions inline.

Consistent Component Library

APG vNext 4.0 introduced a unified component library — all buttons, form inputs, badges, and modals now share a single design token system. This means:

/* APG vNext 4.0 design tokens */
:root {
  --apg-color-primary:   #3b82f6;
  --apg-color-bg:        #ffffff;
  --apg-color-bg-alt:    #f8fafc;
  --apg-color-text:      #0f1a2b;
  --apg-color-text-muted:#64748b;
  --apg-radius-sm:       4px;
  --apg-radius-md:       8px;
  --apg-radius-lg:       12px;
  --apg-shadow-card:     0 1px 3px rgba(0,0,0,.08);
}

Performance Impact of the UI Rewrite

The new UI ships 62% less CSS than the previous version (from 180KB to 68KB minified + gzipped). JavaScript was reduced by 40% by removing jQuery UI components and replacing them with native browser APIs. These changes directly improved Largest Contentful Paint (LCP) scores on community homepages by an average of 0.8 seconds.

Mobile-First UI Redesign Details

Prior to APG vNext 4.3, the forum UI was designed desktop-first and adapted (often poorly) to mobile screens. The 4.3 redesign reversed this approach, designing for mobile viewports first and then progressively enhancing for larger screens.

Mobile-Specific Improvements

Fixed-header navigation collapses into a hamburger menu below 768px
Post action buttons (quote, edit, delete) reorganised into a bottom sheet on mobile
Forum thread lists use a card layout on mobile rather than a dense table layout
Font size increased to minimum 16px body text to prevent iOS auto-zoom on tap

Implementing a Sticky Mobile Navigation Bar

/* APG vNext 4.3+ skin — sticky mobile nav */
.apg-mobile-nav {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  height:     56px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  display:    none;
  align-items: center;
  justify-content: space-around;
  z-index:    1000;
}
@media (max-width: 768px) {
  .apg-mobile-nav { display: flex; }
  /* Ensure content is not hidden behind the nav bar: */
  body { padding-bottom: 56px; }
}

Skin Migration from Pre-4.3 to 4.3+ UI

If you are running a custom skin built for APG vNext 4.2 or earlier, the 4.3 UI redesign requires migration work. The template variable names, CSS class names, and widget APIs changed substantially. The APG vNext upgrade guide includes a skin migration checklist with a diff of all changed variables. Allow 4–8 hours for a simple skin migration and up to 2 days for heavily customised skins.

Dark Mode Implementation in APG vNext 4.3+

The 4.3 UI redesign introduced full dark mode support. Dark mode is applied using CSS custom properties (variables) that override the entire colour palette when the member activates dark mode from their preferences panel:

/* APG vNext skin — dark mode via CSS custom properties */
:root {
  --bg-primary:   #ffffff;
  --text-primary: #1a1a1a;
  --border-color: #e2e8f0;
}
[data-theme="dark"] {
  --bg-primary:   #0f172a;
  --text-primary: #e2e8f0;
  --border-color: #334155;
}

Persisting Theme Preference

// Store and apply theme preference on page load:
const theme = localStorage.getItem('apg-theme') ||
  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);

What the 4.3 Redesign Changed for Forum Administrators

Beyond member-facing changes, APG vNext 4.3 updated the Admin Panel UI with the same visual overhaul. Navigation was reorganised into a left sidebar with collapsible sections, reducing the number of clicks required for common admin tasks. Quick-action buttons for the most frequently used functions (approve member, delete post, edit settings) were added to a customisable admin dashboard. These changes reduced reported admin task completion time by an average of 35% in user testing conducted before the release.

Related Resources

Dark Mode Implementation in APG vNext 4.3+

/* APG vNext skin — dark mode via CSS custom properties */
:root {
  --bg-primary:   #ffffff;
  --text-primary: #1a1a1a;
  --border-color: #e2e8f0;
}
[data-theme="dark"] {
  --bg-primary:   #0f172a;
  --text-primary: #e2e8f0;
  --border-color: #334155;
}

Persisting Theme Preference

// Store and apply theme preference on page load:
const theme = localStorage.getItem('apg-theme') ||
  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);