Support Thread

Customizing Css With Firebug Or Any Browser Developer Tools

Customizing Css With Firebug Or Any Browser Developer Tools — APG vNext Guide

Customizing Css With Firebug Or Any Browser Developer Tools — this archived support thread from the APG vNext community covers a reported issue and its resolution.

Troubleshooting This Issue

  1. Set customErrors mode="Off" in web.config to expose the full error and stack trace.
  2. Check Windows Event Viewer → Application log for ASP.NET exceptions.
  3. Review Admin Panel → Logs → Error Log for timestamped application errors.
  4. Restart the IIS Application Pool to clear stale state.
  5. Verify the database connection string and run any pending upgrade SQL scripts.

Related Resources

Customising APG vNext CSS with Browser Developer Tools

Browser developer tools (Chrome DevTools, Firefox DevTools, Edge DevTools) are the most efficient way to identify which CSS rules control a specific element in APG vNext and test style changes live before committing them to your skin's custom CSS file.

Identifying the Right CSS Selector

  1. Open Chrome DevTools: F12 or right-click -> Inspect
  2. Click the element picker (cursor icon) and click the element you want to style
  3. In the Elements panel, the selected element is highlighted in the DOM
  4. In the Styles panel on the right, all applied CSS rules are listed with their source file and line number
  5. Click any property value to edit it live - changes are visible instantly

Common APG vNext CSS Selectors

/* Thread list items */
.apg-thread-card { }

/* Post content area */
.apg-post-body { }

/* Member avatar */
.apg-member-avatar { }

/* Navigation bar */
.apg-nav-menu { }

/* Site header */
.site-header { }

/* Reply editor */
.apg-editor-toolbar { }

Copying DevTools Changes to Your Skin CSS

After testing in DevTools, copy the rules to your custom CSS file:

/* /assets/css/custom.css */
/* Changes tested in Chrome DevTools 2025-07-01 */
.apg-thread-card {
  border-radius: 8px;
  box-shadow:    0 1px 3px rgba(0,0,0,.06);
  margin-bottom: .5rem;
}

Using the CSS Coverage Tool

Chrome DevTools -> More Tools -> Coverage shows which CSS rules are actually used on the current page. Use this to identify unused styles in your custom CSS that can be safely removed to improve page performance.

Debugging Specificity Conflicts

The most common CSS frustration when customising APG vNext is writing a rule that doesn't apply because another rule with higher specificity overrides it. Browser DevTools shows this clearly — overridden rules appear with a strikethrough. Increase the specificity of your rule to override the core skin style:

/* Core skin rule (specificity: 0,1,0 — one class selector): */
.apg-post-body { color: #333; }

/* Your custom rule MUST have equal or higher specificity to win:
   Option 1: Add a parent selector (specificity: 0,2,0): */
.apg-thread-view .apg-post-body { color: #1a1a1a; }

/* Option 2: Use a CSS custom property override (always wins): */
.apg-post-body { color: var(--apg-post-text-color, #333); }
/* Then override the variable: */
:root { --apg-post-text-color: #1a1a1a; }

CSS custom property overrides are the cleanest approach because they don't require selector specificity battles and are well-supported in all modern browsers.

Mobile CSS Testing in DevTools

Browser DevTools device emulation lets you test how APG vNext looks on different screen sizes without a physical mobile device. Use the responsive design mode (Ctrl+Shift+M in Chrome) to resize the viewport and verify your CSS changes work correctly across mobile, tablet, and desktop breakpoints. Pay particular attention to:

  • The navigation menu collapsing correctly below 768px
  • Thread list cards not overflowing their container on narrow viewports
  • The post editor toolbar fitting within the mobile viewport
  • Avatar images not causing layout shift when they load

Using DevTools Network Tab for Performance Inspection

While testing CSS changes, also check the Network tab for CSS file size and load time. Large custom CSS files (over 50KB uncompressed) can delay page rendering. Use the DevTools Coverage tool to identify unused CSS selectors, then remove them from your custom CSS file. For APG vNext forums served through Cloudflare, CSS files are automatically compressed and cached — but the compressed size is still visible in the Network tab as the "transferred" size, which should ideally be under 15KB for the combined main CSS bundle.

Saving DevTools CSS Snippets as Workspace Overrides

Chrome DevTools Workspace feature allows you to map your local skin CSS file to the browser's network requests, so changes made in DevTools are saved directly to your file system rather than being lost on page refresh. This is particularly useful when iterating on complex layout changes that require seeing the full page context rather than a small element in isolation. Enable it in DevTools → Sources → Overrides, then map your local custom.css file to the corresponding URL path on your development server.

Documenting Your CSS Changes

As your custom CSS file grows over time, it becomes harder to remember why specific rules were added. Add brief comments above non-obvious rules to document the intent, the browser or situation that required the fix, and the date the rule was added. This reduces time spent understanding historical decisions during future upgrades and makes it easier for a new team member to take over skin maintenance without inadvertently removing a rule that was fixing a subtle cross-browser rendering issue.

Related Resources

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