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?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: