Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
docs PHP, CSS & JS

Global Styles

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.


Define sitewide color palettes. Editing a color here will update it everywhere it is used.

See Global Colors for details.


Choose the fonts used on your website.

See Global Fonts for details.


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


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.


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.


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.
Last modified: June 19, 2020
Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram