Global Styles allow you to set site-wide styles for the elements on your pages. This gives you an easy way to change the look and feel of your design for the entire website at once.
If an element doesn't have styles created specifically for it, the Global Styles will be used.
Global Styles can be edited from Manage > Settings > Global Styles.
Colors
Define sitewide color palettes. Editing a color here will update it everywhere it is used.
See Global Colors for details.
Fonts
Choose the fonts used on your website.
See Global Fonts for details.
Headings
You may specify global styles for the headings (h1, h2, h3, h4, h5, and h6).
For each heading tag, you can customize the following:
- Font Size
- Font Weight
- Line Height
- Color
Body Text
Body text is all text on your site. The settings set for headings override the body text styles.
For body text, you can configure the following:
- Font Size
- Font Weight
- Line Height
- Color
Links
In Oxygen, there are three link elements: Text Link, Link Wrapper, and Button.
Settings within All applies to all types of link elements, and also to links created outside of Oxygen - for example, links in blog post content.
Text Link & Link Wrapper Settings
- Color
- Font Weight
- Text Decoration (underline)
- Hover Color
- Hover Text Decoration
Button Settings
- Font Weight
- Border Radius
Widths & Breakpoints
Page Width: Set the page width for the site. See Page Width for details.
Tablet: Set the tablet breakpoint.
Landscape: Set the landscape breakpoint.
Portrait: Set the portrait (mobile) breakpoint.
You must regenerate Oxygen's CSS cache via Oxygen > Settings > CSS Cache after changing these breakpoints.
Sections
Control the paddings for the containers for Section elements. The defaults are 75 pixels for the top and bottom edges, and 20 pixels for left and right edges.
Header Builder element will use the left and right paddings, but ignore the top and bottom.
Animate on Scroll
Configure animations that are triggered on scroll using the Animate on Scroll library. The settings chosen here will become the default animation settings for any element that has animations enabled. These global animation settings can be overridden on a per-element basis.
- Animation Type - Determines the type of animation that will be used, such as flip, slide, or fade.
- Animation Duration - Determines the number of milliseconds over which the animation takes place.
- Animation Anchor - Defines which position of the element, in relation to the viewport, should trigger the animation.
- Animation Easing - Defines the speed curve of the animation. Ease-in-out, for example, will cause the animation to be slower at the beginning and end and faster in the middle.
- Animation Trigger Offset - Defines offset of animation trigger point (in relation to viewport scroll position) in px. A positive value can be used to ensure the entire element is in the viewport before the animation is triggered, whereas a negative value can be used to trigger the animation before the element enters the viewport.
- Animation Delay - Determines the length of time between the animation being triggered and the animation beginning.
- Animate Only Once - By default, an element leaving the viewport re-sets the animation and causes it to be re-triggered when the element re-enters the viewport. You can disable this behavior by choosing "Yes."
- Disable On - This allows you to choose a viewport width below which animations will be disabled. It's a good idea to disable animations for mobile devices to improve performance.
Scripts
Enable extra functionality via scripts.
Smooth Scroll to Hash Links
The Smooth Scroll to Hash Links script causes hash links, which is a link where the URL references the ID of an element on your page, to smoothly scroll the viewport to the targeted element. To enable it, tick the "Smooth Scroll to Hash Links" check box.
- Scroll Time - The number of miliseconds that it takes for the viewport to scroll to the targeted element.
