WPCE v3 Docs

Appearance

Per-Element Custom CSS v3.18 ​

There are situations where you need such a one-off CSS rule for a single element that it doesn't make sense to create a separate element variant for it.

However, even for well-versed users, targeting exact elements with some appended CSS is a non-trivial task.

Therefore, WPCE offers a way to write custom CSS for individual elements.

Technical Implementation ​

To enable custom CSS for an element, set allowCustomCss: true in its definition.

Since WPCE does not enforce strong structural restrictions on element templates, not all element templates may have a single root HTML element. Therefore, you as the element designer are responsible for marking up the appropriate HTML element for application of custom CSS.

To do this, you need to set the data-css-locator attribute with the element's GUID as its value:

php
add_filter('wpce_render_my-element', function ($wpce, $element) {
	return <<<HTML
		<div class="my-element" data-css-locator="{$element->guid}">
			<!-- ... -->
		</div>
		HTML;
});

TIP

If you don't want to put the data-css-locator attribute all over your HTML output, you can check whether there is any custom CSS attached to the element with !empty($element->properties->_customCss).

Authoring Custom CSS ​

The CSS is added through the node's edit dialog window by switching to the "developer settings". (These settings can only be accessed by WPCE Developers.)

Arbitrary CSS can be added there. The selector used to as a placeholder for the current element is [this]:

css
[this] {
  background-color: red;
}