LESS Copy: Copy LESS Variables from the YOOtheme Styler

LESS Copy is for everyone who customises their YOOtheme theme with LESS in a child theme. In the Style section of the customizer, YOOtheme only shows a variable name as a tooltip, and you end up typing it. With LESS Copy you copy it instead: a click on the label puts the variable on the clipboard, and you can tick several and copy them one per line. If you like, you copy the value along with it as a ready LESS line. On Joomla and on WordPress.

One variable or a whole selection

Click the label of a setting in the Style section, for example Margin Vertical in the Align component, and @align-margin-vertical lands on the clipboard. A dark box at the bottom of the panel shows for a few seconds what is now on the clipboard. Every label has a checkbox in front of it. As soon as you select something, a yellow copy button appears to the right of the component heading, with the number of selected variables next to it.

One click on it copies the whole selection, one variable per line in the order of the panel, for example @global-color and below it @global-font-size. You paste them straight into your LESS file. Settings that are hidden and not shown in the panel right now are not copied.

With value: ready LESS lines

Next to the heading there is a "With value" switch. When it is on, LESS Copy copies a ready declaration such as @global-font-size: 16px; instead of the bare name, and one line per variable for a selection. That way you override values in your child theme without typing them. Your browser remembers the switch.

The value copied is the one your style has right now. For settings that are calculated automatically, marked with an A in the Styler, that is the result and not the formula behind it: a reference to @global-primary-background becomes #1e87f0, for example. Variables without a value are copied by name only.

Fits into the customizer

LESS Copy changes no values and nothing on your website. The checkboxes sit in front of each label, aligned with the heading, and selected rows are highlighted. The dot YOOtheme uses to reset a value stays free to the left. The plugin runs in the customizer only and loads neither CSS nor JavaScript on the website itself. You keep editing values as usual: a click on a value opens YOOtheme's editor as always. The checkboxes appear when you hover a row or reach it with the keyboard, and stay visible while something is selected.

Quick start

• Install the plugin. On Joomla it enables itself, on WordPress you activate it in the plugin list.
• Enter the download key from your customer account for updates: on Joomla under System, Update Sites, on WordPress under Settings, LESS Copy.
• Open the Style section in the YOOtheme customizer and choose a component, for example Global or Button.
• Optionally switch on "With value" next to the heading if you need name and value.
• Click a label to copy one variable, or tick several and use the copy button next to the heading.
• Paste the variables into the LESS file of your child theme.

If something does not show up

• No checkboxes visible: they only appear when you hover a row. If they are missing entirely, check that the plugin is enabled and reload the customizer.
• The Google Fonts panel has no checkboxes: there you set font variants, not LESS variables.
• Copying fails: some browsers only allow clipboard access for an active window. Click into the customizer once and try again.

Requirements

• Joomla 5 or 6 with YOOtheme Pro 4.5 or 5 and PHP 8.2 or newer
• WordPress 6.5 or newer with YOOtheme Pro 5 and PHP 8.2 or newer
• The license covers unlimited own projects, with updates and support during its term. Whether you buy once or subscribe, you choose at checkout via CopeCart.