Where is the Global Container width set in the Blank Theme

Support
#1

I have started to use the blank theme on a few projects but i could do with bit of guidance on setting things up. My first scenario is when setting up an archive layout i need to apply the global container setting to box the content on larger screens but i need to understand how i set that global width so it behave similarly to how the global container option works in the other stacks.
I found myself reading the Global Variables document page but i don’t have a Globals or a Variables tab in the Globals area. I suppose what i am saying is i could do with a getting started with the blank stack cheat sheet. I did think i could dig into how the starter stack was setup but i feel like i am missing something as all the documentations show a Globals tab or a variables tab. If you could explain the starting point of configuring the blank theme that would be great. Many thanks

#2

Hey @The_Capture_Factory,

Here is a guide to help you get started with the Blank Stack in Pro, explaining why you don’t see the tabs and how to configure your container width.

1. Why you don’t see the “Globals” or “Variables” tab

The “Variables” graphical user interface (GUI) tab in the Globals panel was introduced in Pro v6+ / v7+. If you are on an older version of Pro, this tab does not exist in the builder UI.

Additionally, make sure you check your Cornerstone preferences:

  • Click the Cog / Settings icon in the bottom-left corner of the Cornerstone builder.
  • Go to Preferences and ensure developer options or advanced controls are enabled.
  • If you are fully updated and still don’t see it, it is likely restricted under Pro > Settings > Permissions in your WordPress admin dashboard for your current user role.

2. Setting up a Global Container in the Blank Stack

In traditional stacks (like Integrity, Renew, etc.), Pro automatically injects global CSS classes like .x-container using the values set under Theme Options > Layout & Design.

Because the Blank Stack is designed to load absolute minimal styling, it does not output these framework container styles by default. Instead, you define and apply them yourself.

Step A: Define your global width in CSS

Since you may not have the Variables GUI, you can define your global widths directly in your site’s global CSS:

  1. Navigate to Pro > Theme Options and click the CSS editor button (or use the global builder CSS).
  2. Add your custom properties to the :root element:
    :root {
  --site-max-width: 1200px;
  --site-width: 88%;
}

Step B: Apply it to your Archive Layout

  1. Open your archive layout in the Layout Builder.
  2. Add a Section and insert a Row.
  3. Inspect the Row element and configure its layout parameters:
    • Set Width to var(--site-width) (or 88%).
    • Set Max Width to var(--site-max-width) (or 1200px).
    • Ensure the Row’s left and right margins are set to auto (this keeps the container centered on larger screens).

3. Blank Stack “Getting Started” Cheat Sheet

  • The “Zero-CSS” Mindset: The Blank Stack is a clean slate. Standard margins, paddings, and column container behaviors from other stacks are stripped away. You must define them on your elements.
  • Use Presets: To avoid manually typing var(--site-max-width) and margin settings on every row, configure a Row element once, right-click it, and save it as a Preset (e.g., “Global Container Row”). You can then apply this preset instantly to any new row.
  • Leverage Components: For recurring layouts (like headers, sidebars, or container patterns), use the Component Builder to build them once globally and reuse them across your layouts.