Fred Editor Tip - Highlighting Editable Sections

Support Extras
,
1

If you have a client that is just getting into using Fred, or you want to use this for yourself, here is a simple way to highlight the editable fields in the Fred frontend editor. Will make it easier for a person just starting with Fred to easily see what they can and cannot edit in the editor.

For me, I actually found one of my elements I created that did not have the Fred name attribute assigned and therefore the section was not editable (a copy/paste of existing site code into the new element and never caught the omission!).

Create a custom CSS file and adjust the settings for border size, color and alpha. Or add whatever else you might need! And since the Fred attributes are not presented in the actual page source, visitors do not see the highlighting.

/* Use attribute selectors to select all elements for 
   targeting the Fred items and setting a border. So 
   they can be easily spotted for editing. */
   
*[data-fred-name] {
outline: 2px solid rgba(247, 77, 77, 0.18);
}

/* End Fred Editor stylings. */

You can remember to add a reference to this stylesheet in any project where you want it.

You can also create a dedicated Fred system setting where this file reference can be used whenever you like. See image for what to use when creating a new setting.

Then add the reference to your project HTML or template using the Key value:
<link href="[[++fred.fred_custom_css]]" rel="stylesheet">

FredCSS1
FredCSS1801×666 194 KB

Fred Element Highlights
Fred Element Highlights499×738 138 KB

1 Like
2

nice idea! this will help a lot those getting used to Fred as content editors indeed.
Thanks!

1 Like
3

I like your methods :D.

Try this though:

  • Create a plugin like fredCSS that fires on the FredBeforeRender event, then add something like:
<?php
$cust_styles = $modx->getChunk('fred-css');
$modx->event->_output = [
    'includes' => $cust_styles
];
  • Then create a chunk called fred-css and put your custom styles i.e.
<style>
.mce-content-body {
    line-height: inherit !important; /** Prevents TinyMCE messing with your line-height **/
}
 
.fred--active .stretched-link::after {
    position: relative !important;
   display:none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

[data-fred-render="false"] {
    color: #dedede;
    letter-spacing: 2px;
    font-family: monospace;
    font-size: 16px;
}

*[data-fred-name] {
outline: 2px solid rgba(247, 77, 77, 0.18);
}
</style>

Doing it this way allows you to create a library of styles that you can use across projects. It also means you don’t add unnecessary CSS to your stylesheets :smiley:

4 Likes
4

I learn something new here all the time! Thanks for the suggestion.

Works well…and better than my hack! :smile:

5

This is awesome - thanks! Will be keeping this one handy!