White Builder Guides

Support
#1

I build a lot of websites on black backgrounds. Because of this, the guides that pop up as I drag an element from one section to another are invisible. Can I make them white?

#2

Hello @mikewolf1127,

Thanks for asking.

You can’t really change the color of preview highlight color in page builder. May be while the website is being developed, try changing the background color from black to something else?

Thanks.

#3

I had done this before in X/Cornerstone with this code. But doesn’t work in Pro/Builder.

X Theme – Cornerstone Guides on Black

// Custom Empty Column Borders
// =============================================================================

add_action('wp_head','dotted_coloring');
function dotted_coloring () { ?>

  <style type="text/css">

    body .x-column.cs-empty { outline: 2px dashed rgba(200,200,200,1) !important; }
    body .cs-empty-column .cs-custom-icon {fill: rgba(150,150,150,1) !important;}
    #cs-content.gu-unselectable .x-column { outline: 2px dashed rgba(200,200,200,1);}

  </style>

<?php }
//
#4

Hey @mikewolf1127,

Please go to wp-content/themes/pro/cornerstone/assets/dist-app/css/ and edit preview.css. Go to line 2403 or find this selector #cs-content .cs-element-preview.x-column.cs-empty and change the outline’s color to white.

For the icon, go to line 2508 or find this selector .cs-element-preview.x-column .cs-empty-column .cs-custom-icon

Though I understand the usefulness of this modification, we could not provide a function that will modify the interface as that is outside the scope of our support. I will however, add this as feature request so that our development team would be made aware of this scenario once they go through the list of reports.

Thanks.

#5

Awesome, yes that worked. Empty sections look good. You rock.

One more thing- what line do I need to change so that when I am dragging an element, the receiving location gets the white highlight as well?

Thanks-
Mike

#6

So I actually changed every instance of ‘rgba (0, 0, 0’ to ‘rgba (255, 255, 255’. Works perfectly. Now all section, column, gap, slider placeholders with arrows, etc… all work on a black background.

This would be SO useful as a feature.

Thank you!!!
-Mike

#7

Glad you figure things out Mike, we’ve added this as a feature request so it can be taken into consideration for future development.

Cheers!

#8

I so appreciate you getting way under the hood for this one. You guys rock.

Until it becomes a feature, I can work well with this fix.

All good!

-Mike

#9

Thank you for your kind words, Mike.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.