This tutorial provides the steps to change the full-width layout to a boxed look in Oxygen.

Step 1

Edit your Main Catch-all sitewide Template with Oxygen.

Go to Manage > Selectors and click the “Add Selector” button

Enter body for the selector and hit return.

a) Go to Advanced > Background Color and set your desired body background color which will appear on all 4 sides of the boxed frame.

In my test site, I set it to #e9ebee.

b) Size & Spacing

Padding: 40px on all sides
Margin: auto on left and right
Max-width: 1200px

Step 2

Bring up the Structure panel and select the Body element.

Add a Div.

Move all other elements inside this Div.

Step 3

Select the Div added in the earlier step.

Horizontal Item Alignment: Stretch

Background Color: #ffffff

Advanced > Effects > Box Shadow
Color: rgba(0,0,0,0.05)
Horizontal Offset: 0
Vertical Offset: 0
Blur: 20
Spread: 5

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

6 comments on “Boxed Layout in Oxygen”

  1. Dear Sridhar,

    How does the body max-width setting above correlate to the following settings:
    1. Manage > Settings > Global Styles > Page Width > Page Width
    2. Manage > Settings > Page Settings > Page Width

    In other words, what is their purpose and why don’t we use them if their purpose is to specify boxed layout widths? Also, what is the difference between the two?

    Thank you in advance!

    1. As Alexander answered in Facebook,

      Global Styles > Page Width – For all page.

      Page Settings > Page Width – For the current page. Overrides the global

      Each Section in Oxygen will have an inner element, .ct-section-inner-wrap which has the default width of 1120px.

      That is what the Page Width will be changing.

  2. Dear Sridhar,

    Thank you for this tutorial. It worked fine on desktop but made my mobile version of the page appear like a desktop version. Any ideas how to fix that?

      1. Sorry for the late reply. I have removed the steps you provided for now. I might replicate it and get back to you should I really need to switch to a boxed layout. Thank you anyway!

  3. Hi Sridhar, I hope you are fine 🙂
    Would be nice to add the fix for the sticky and overlay header when you want to use a boxed layout. I found the header to jump all over the screen when sticky and not confine in the div (wrapper for the boxed layout)
    thanks

magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: