Skip to main content

More Columns


What Are the Minimum System Requirements?

More Columns requires:

  • PHP: 8.2.0 or newer
  • YOOtheme Pro: 5.0.42 or newer
  • Joomla: 5.4.8 or newer, or WordPress: 7.0.4 or newer
  • A current version of Chrome, Firefox, Safari or another modern browser for YOOtheme Pro Builder

Install the package created for your CMS. The Joomla and WordPress packages use the same shared More Columns module but have different platform adapters.

What Does the More Columns Plugin Do?

More Columns extends supported YOOtheme Pro grid and slider width selectors with choices from 7 Columns through 24 Columns. This makes it possible to build denser lists of logos, counters, thumbnails, navigation items and other compact content without writing the additional UIkit width classes yourself.

The plugin preserves the element's existing options, field conditions and saved values. It does not replace the element or create a separate Builder element of its own.

How Do I Install and Enable More Columns?

Joomla: Install plg_system_fs_more_columns_{version}_joomla.zip through System → Install → Extensions, then enable System - [FS] More Columns plugin for YOOtheme Pro in the Plugin Manager.

WordPress: Upload wp_fs-more-columns_{version}_wordpress.zip through Plugins → Add New Plugin → Upload Plugin, then activate it.

Reload YOOtheme Pro Builder after installation. Do not install the GitHub source archive or a package intended for the other CMS.

How Do I Use the Additional Column Widths?
  1. Open a supported element in YOOtheme Pro Builder.
  2. Open its Columns, Element Columns or Item Width setting.
  3. Choose a value from 7 Columns through 24 Columns for the required breakpoint.
  4. Save the layout and check the result at the relevant screen sizes.

The selected value means that one item occupies one part of an equal-width row. For example, 8 Columns gives each item one eighth of the available row width.

Which Native YOOtheme Pro Elements Are Supported?

More Columns extends the responsive width fields in these native YOOtheme Pro elements:

  • Grid
  • Gallery
  • Panel Slider
  • Overlay Slider

Only compatible grid or slider fields are changed. Other fields and unsupported element types pass through unchanged.

Which Flart Studio Elements Are Supported?

The plugin supports the compatible width fields used by current Flart Studio elements, including:

  • Grid Pro and its nested items
  • Switcher Pro and its nested items
  • Marquee
  • Palette
  • Teaser
  • Counter
  • Progress and the existing Circle Progress compatibility type

Support follows the element's actual field structure. An element receives extra grid choices, slider choices or both only where those fields exist.

Does More Columns Add Every Width from 1 to 24?

The plugin adds only the extra whole-column choices from 7 through 24. Widths 1–6 remain native to YOOtheme Pro or to the element that owns the field.

In a normal supported selector, the native choices and the additional choices appear together, giving you a practical range up to 24 columns. If an element intentionally omits a native choice below 7, More Columns does not invent it.

How Do Responsive Breakpoints and Inherit Work?

Supported elements can define widths for phone portrait, phone landscape, tablet landscape, desktop and large screens. A later breakpoint may use Inherit to keep the value selected for the previous smaller breakpoint.

You only need to set a new value where the layout should change. For example, use 2 columns on a phone, 4 on a tablet, 8 on desktop and let the remaining breakpoints inherit.

How Do Grid and Slider Width Options Differ?

Grid fields and slider item-width fields store their choices in different formats internally. More Columns detects the supported field and supplies the correct value automatically.

For visitors and Builder authors, the result is consistent: whole widths are shown as readable labels such as 7 Columns or 12 Columns. You do not need to calculate or enter the underlying width class.

Why Do Some Slider Options Use Percentages?

Slider elements may provide fractional item widths that do not represent a whole number of columns. More Columns keeps those saved values and gives them clearer labels such as 80% of Column, 75% of Column or 60% of Column.

Fractions that equal a whole column count keep a column label. For example, 50%, 33%, 25%, 20% and 16% correspond to 2, 3, 4, 5 and 6 columns. The plugin does not add a fractional value to an element that does not already provide it.

What Do Auto and Expand Mean?

Auto lets an item use the width required by its content. This is useful for text labels, badges, logos or mixed-size items that should flow naturally across a row.

Expand allows flexible items to grow into available row space. It can be useful when only a few items remain visible at a breakpoint and you want them to fill the row.

These are native element choices. More Columns preserves them when the element provides them and does not add them to fields where they are unsupported.

What Happens When There Are More Items Than the Selected Column Count?

The selected value controls each item's width; it does not limit the number of items. Once a row is full, the remaining items continue on the next row according to the element's normal grid or slider behavior.

Very high column counts create narrow items. Use them for compact content and choose smaller counts at phone and tablet breakpoints so text, controls and images remain usable.

Will Updating More Columns Change Existing Layouts?

No saved-layout migration is required. More Columns preserves existing option values, including native fractions and flexible choices, when the plugin is updated.

Layouts saved with earlier width values continue to use those values. As with any Builder update, review important responsive layouts after updating and clear stale caches if the Builder still shows older labels.

Is the Builder Interface Translated?

Yes. More Columns includes translations for its width labels in 28 YOOtheme Pro locales. The plugin selects the catalog that exactly matches the current YOOtheme locale.

Native field names and native choices such as Auto and Expand remain translated by YOOtheme Pro. If a More Columns catalog is unavailable, the original English source text is used.

How Are the Additional Width Styles Added to My Theme?

More Columns adds the required UIkit width rules to YOOtheme Pro's LESS compilation. It generates only the additional 7–24 column utilities; YOOtheme Pro continues to own its native widths.

The rules include the supported responsive suffixes, so breakpoint choices work like native YOOtheme widths. The plugin also places a version marker in compiled CSS so its style listener can detect when the active theme stylesheet needs one rebuild.

Do I Need to Recompile the YOOtheme Style After Updating?

Normally, More Columns detects an older compiled stylesheet and asks YOOtheme Pro to rebuild it when the required version marker is missing. This should make the new width rules available without manual CSS editing.

If the Builder shows widths 7–24 but the frontend does not apply them, open YOOtheme Pro → Style and save or recompile the active style. Then clear YOOtheme, CMS, optimization, CDN and browser caches that may still serve an older stylesheet.

Why Are Widths 7–24 Missing from the Builder?
  • Confirm that More Columns is installed and enabled in Joomla or activated in WordPress.
  • Confirm that the installed YOOtheme Pro version meets the minimum requirement.
  • Reload or reopen the Builder after installing or updating the plugin.
  • Check that you are editing a supported element and a compatible grid or slider field.
  • Clear stale Builder, CMS and browser caches.

If only one particular field is unaffected, that field may use a different schema or may not expose a supported width selector.

Why Does a New Width Appear in the Builder but Not on the Frontend?

This usually means the Builder definition has been extended but the active compiled theme CSS is stale. Recompile the active YOOtheme style, clear all stylesheet and optimization caches, and reload the page without the browser cache.

Also confirm that another custom stylesheet is not overriding the generated uk-width-1-N or uk-child-width-1-N rule at the same breakpoint.

Why Is a Fractional, Auto or Expand Option Missing?

More Columns preserves these options but does not create them universally. A fractional width, Auto or Expand appears only when the original element provides that value for the specific field and breakpoint.

This prevents invalid choices and keeps each element's native behavior intact. The plugin's own additions are limited to whole-column widths from 7 through 24.

Does More Columns Have Its Own Settings Panel?

No. After activation, the plugin extends supported selectors automatically. You continue working in each element's native YOOtheme Pro settings.

Responsive behavior, gaps, alignment, dividers, sliders and item content remain controlled by the element itself. More Columns owns only the additional width choices, their translations and the required width CSS.

Can I Use the Generated Width Classes in Custom Layouts?

The compiled stylesheet contains UIkit-compatible utilities for widths 7–24, including responsive variants. Advanced users can therefore use classes following the same pattern as YOOtheme Pro, such as uk-width-1-8@m for one element or uk-child-width-1-8@m for direct children.

Use Builder selectors where possible because they keep the saved layout readable and assign the correct class for the element's field type and breakpoint.

How Do I Disable or Remove More Columns?

Disable the system plugin in Joomla or deactivate the plugin in WordPress. To remove its generated width rules from the active theme stylesheet, recompile the YOOtheme style after disabling or uninstalling the plugin and clear relevant caches.

Layouts that still store a 7–24 column value may no longer have the corresponding CSS after removal. Change those fields to native widths before uninstalling when you want the layouts to keep the same visual structure without More Columns.

What Should I Include When Requesting Support?

Include the More Columns version, CMS and version, PHP version, YOOtheme Pro version, affected element name, field and breakpoint, plus a screenshot of the selector and the frontend result.

Also mention whether the options are missing in Builder or only the frontend CSS is missing, whether the active style was recompiled, and which CMS, optimization, CDN and browser caches were cleared. This separates a field compatibility issue from a stale stylesheet quickly.