How to Show a Content Block on Specific Pages Only

Use CSS to hide a SmugMug content block everywhere except a specific page, or a folder and all its child pages.

Sometimes you want a content block — like a search bar, logo content block, or navigation content block — to appear only in certain parts of your site. With a small piece of CSS, you can control exactly where a content block is visible and where it's hidden.

This tutorial covers two scenarios: showing a content block on a single page only, and showing it on a folder and all its child pages (like a Years folder and every album inside it). You'll need to use your browser's developer tools to find two pieces of information from your site — no coding experience required beyond copy-pasting.

Find your widget ID

Every content block on SmugMug has a unique widget ID — a number that identifies it in the page's HTML. You'll need this to target it with CSS.

Go to any page on your site where the content block is visible
Right-click on the content block and select Inspect (or Inspect Element)
In the developer tools panel that opens, look at the highlighted HTML for a class that starts with sm-page-widget- followed by a number — for example sm-page-widget-39346473
Note down the number — that's your widget ID

Every content block on your SmugMug site has a unique widget ID. This ID stays the same no matter which page you're viewing it on.

Find your node ID

Next, you need the node ID of the page or folder where you want the content block to stay visible. SmugMug assigns a unique node ID to every page, folder, and gallery on your site.

Navigate to the page or folder where you want the content block to remain visible
Right-click anywhere on the page and select Inspect
In the developer tools, find the <body> tag — it's near the top of the HTML
Look at the body's classes for one that starts with sm-page-node- followed by a short code — for example sm-page-node-5WMrqt
Note down the code after sm-page-node- — that's your node ID

SmugMug assigns a unique node ID to every page, folder, and gallery on your site. This ID appears as a class on the <body> tag of each page.

Write the CSS rule

Now combine the two IDs into a single CSS rule. Replace YOUR-NODE-ID with the node ID from step 2, and YOUR-WIDGET-ID with the widget number from step 1:

body:not(.sm-page-node-YOUR-NODE-ID) .sm-page-widget-YOUR-WIDGET-ID {
    display: none !important;
}

Here's what each part does:

body:not(.sm-page-node-YOUR-NODE-ID) — targets every page except the one with your node ID
.sm-page-widget-YOUR-WIDGET-ID — selects your specific content block
display: none !important — hides it

This CSS rule reads like a sentence: "On every page that is not this node, hide this widget."

Add the CSS to your site

Open the SmugMug Customizer
Select Entire Site from the page selector
Add a CSS content block (or use an existing one)
Paste your CSS rule into the content block
Click Save
Visit the target page to confirm the content block is visible, then visit another page to confirm it's hidden

This CSS must be added at the Entire Site level. If you add it to a specific page or folder, it will only load on that page — and the content block won't be hidden anywhere else.

Show on a folder and all its child pages

If you want the content block visible on an entire section of your site — for example, a folder and all the albums inside it — you need a slightly different CSS rule that accounts for child pages too.

When you visit a child page (like an album inside a folder), SmugMug adds a class sm-page-parentnode-YOUR-NODE-ID to the <body> tag, where the node ID is the parent folder's ID. We can use this to keep the content block visible on child pages as well:

body:not(.sm-page-node-YOUR-NODE-ID):not(.sm-page-parentnode-YOUR-NODE-ID) .sm-page-widget-YOUR-WIDGET-ID {
    display: none !important;
}

This rule excludes two types of pages from hiding:

The folder page itself (.sm-page-node-YOUR-NODE-ID)
Any direct child page of that folder (.sm-page-parentnode-YOUR-NODE-ID)

Use this rule instead of the one from the steps above — not in addition to it.

This covers the folder and its direct children only. If you have deeper nesting — like sub-folders inside sub-folders — pages more than one level deep won't be covered by this rule.