Applying Page-Specific CSS Using Body Class Selectors – Pool Queue

Article Summary:
Learn how to apply custom CSS to individual pages on your Pool Queue site using automatic <body> tag class selectors derived from the page's URL.

Overview

Pool Queue automatically adds a unique CSS class to the <body> tag of every public-facing page. This allows you to write CSS that targets specific pages without affecting others.

How It Works

The system assigns a normalized class based on the page’s URL path:

CMS-managed pages (pages created in the "Site" area of Pool Queue):
The class begins with page- followed by the page alias.
System pages (built-in parts of the system like the Pro Shop):
The class begins with system- followed by the URL path.

All parts of the path are lowercased and sanitized (non-alphanumeric characters replaced with dashes).

Examples

Page URL	`<body>` Class
`https://yourclub.poolq.net/pro-shop`	`system-pro-shop`
`https://yourclub.poolq.net/program-info/blue`	`system-program-info-blue`

Writing Custom CSS

To style specific pages, use the class assigned to <body> as a CSS selector:

body.system-pro-shop .pq-block h2 {
    font-size: 1.75rem;
    color: #444;
}

body.page-registration-info .pq-block {
    border-left: 5px solid #2a7ae2;
    padding-left: 1rem;
}

Use Cases

Adjust layout or typography for a specific page.
Highlight or hide blocks on event landing pages.
Modify banners or section styles based on the current page.

Important Notes

These classes are applied at page render based on the URL path.
Use browser developer tools (Inspect Element) to verify the body class.
You must have access to add custom CSS in your site’s CMS settings under Setup > Site -> CSS.

Troubleshooting

CSS not taking effect?

Confirm the class name on the <body> using browser dev tools.
Make sure your CSS selectors are specific enough.
Ensure your CSS is not being overridden by more specific rules or inline styles.