Published on Dec 3, 2020

Anti-Ant Mode for Luci

Sridhar Katakam

Luciana over in the Facebook group isn’t happy about the low-contrast dotted border around interface elements in the Oxygen editor indicating the active or selected ones.


Let’s fix this, shall we?


Here’s how:

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Anti-Ant Mode for Luci


add_action( 'oxygen_enqueue_ui_scripts', 'wpdd_custom_css_oxygen_editor' );
* Load custom CSS in the Oxygen editor.
function wpdd_custom_css_oxygen_editor() {
// if this is not an Oxygen editor page, abort.
if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
// if this is the Oxygen's frame, abort.
if ( defined( 'OXYGEN_IFRAME' ) ) {
$css = '
body .oxygen-button-list .oxygen-button-list-button-default {
outline: 2px dotted rgba(70,136,200);
wp_add_inline_style( 'oxygen', $css );

Set the snippet to run everywhere. Save changes and activate.

If there is anything else you would like to change in the Oxygen interface CSS-wise, add your custom CSS rules in the above.

Update on January 12, 2021: This has been added as an option under Editor Tweaks module of Oxy Toolbox.