Published on Nov 2, 2018

Boxed Layout in Oxygen

Sridhar Katakam

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

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-down