X-Plus Flex Columns Widget: Usage and Customizations

With version 3, Weaver added a Flex Columns widget in the “Plus” Plugin, which allows you to define a flexible layout of columns / boxes within a single widget.

This new widget is based on a small CSS jewel called Flexbox. Flexbox has a number of very interesting features, making it easy to create arrays of responsive and flexible boxes.

This tutorial will take you through the existing options of this new Widget, as well as give you tips on how to use simple Flexbox CSS rules to customize it even further, or combine it with other tools to make it even more powerful.

Continue reading →

Responsive Sizing: Two little known CSS properties

Making object sizes proportional to browser sizes This tutorial introduces you to two very powerfull and sometimes less known CSS features – Viewport units – Calc function Viewport Units allow you to express the size of an element as a … Continue reading →

Styling specific pages or devices (like BG Image)

Sometimes you need to change styling for specific pages or devices.
As an example, this tutorial will detail how to change areas background attributes in the following situations

  • Different static pages
  • Different WordPress pages
  • Different devices
  • Any combination of the above
  • Portrait and Landscape

Continue reading →

Scripts: Advanced styling or design changes

This tutorial gives you the bases for using Scripts inside Xtreme, for programmable behaviors, or advanced site modifications.
It is not meant to teach you JavaScript (there are plenty of great Tutorial sites for that)
It will take you through:

  • General advanced modifications practices
  • Base principles of Scripts in Xtreme
  • Concepts and examples

Continue reading →