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 →

Optimizing Parallax images for portrait and landscape

In a parallax design, the background image of the parallax area is stretched to cover the whole browser area.
As a result, when the browser ratio differs from the image ratio, some cropping will occur (vertically or horizontally).
This Tutorial explains how to minimize cropping by using different Parallax images for Portrait and Landscape orientations

Continue reading →

Comments: Advanced Styling

Xtreme has a few general options to style comments.
If you need more detail styling changes, below are some key rules to target the various elements of the comment section.

The rules below are mostly here to show you which CSS selector to use to target any given part of the comments.
You can include different properties in these rules to match your requirement.

Continue reading →

Posts: Changing Featured Image Layout on Mobile

Xtreme offers many Featured Image layout options for posts, including the ability to hide them on selected devices.
But the Layout you choose will the same on all devices.

When using layouts like “Beside page/Post” and Right/Left align, the text sits besides the Featured Image.
On narrow devices, you can end up with a narrow column of content besides the Featured Image, and you may want to have the text drop below the image.

The Tutorial below will review some of these cases, and ways to workaround the problem.

Continue reading →

Display Posts in more than 3 columns

Although for posts with text content 3 columns seems like plenty, if using posts to display images, or making reference pages with just featured image and title, you may want to create more columns.

This tutorial will give you the custom CSS rules to Display posts in as many columns as you like, and set a different number for each mobile device or browser size.

Continue reading →

Responsive Columns and Widgets

You often need to organize your content in responsive columns or widgets. They need to scale with the browser and eventually stack differently on mobile devices so individual columns / widgets do not become too narrow.

This tutorial will guide you through existing tools available in Weaver Xtreme to organize your own content in such layouts.

Note: If you have the Xtreme “Plus” Plugin, there is now a very powerful widget called “X-Plus Flex Columns” that can do all this and much more in a much easier manner.
Check its guide article below.

Continue reading →