Outlines for elements in Bricks

WPCodeBox comes with a repository of snippets that can be downloaded and enabled with a couple of clicks.

A couple of these snippets are for adding outlines for elements in Oxygen and this tutorial shows how the same can be set up in Bricks.

This could be helpful for identifying which element is bleeding off the page and what elements are shown using :before and :after.

Outlines in Bricks Editor

Create a new code snippet in WPCodeBox.

Title: Add outlines in Bricks editor

Description:

Shows outlines for all the elements inside Bricks editor.

Green lines indicate :before pseudo-elements.

Red outlines indicate :after pseudo-elements.

Type: CSS

Where to run the snippet: Custom → Custom PHP Condition is True

<?php 
bricks_is_builder() && ! bricks_is_builder_main() && ! is_admin();

Code:

.brx-body * {
	outline-style: dashed;
	/* Default outline - Few options to try out */
	/* Dark: rgba(0,0,0,0.40) */
	/* Yellow: rgba(255,250,0,0.80) */
	/* Blue: rgba(0,135,255,0.50) */
	outline-color: rgba(0,135,255,0.50);
	outline-width: 1px;
	/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
	outline-offset: 0;
}

.brx-body *::before {
	outline-style: dashed;
	/* Default green for :before rgba(0,255,178,0.40) */
	outline-color: rgba(0,255,178,0.40);
	outline-width: 2px;
	/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
	outline-offset: 2px;
}

.brx-body *::after {
	outline-style: dashed;
	/* Default red for :after rgba(255,0,0,0.50) */
	outline-color: rgba(255,0,0,0.40);
	outline-width: 2px;    
	/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
	outline-offset: 4px;
}

#wpadminbar *::before,
#wpadminbar *,
#wpadminbar *::after {
    outline-style: none;
}

Outlines on Frontend

Same as above except make these changes.

Title: Add outlines on Frontend – Bricks

Where to run the snippet: Custom → Custom PHP Condition is True

<?php 
! bricks_is_builder() && ! is_admin();