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
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: