Fred and Bootstrap carousel

Support Extras
7

Here’s how I get around the setting selection dilema - plus a few other nice-to-haves for my FRED editing.

I have a chunk called “fred-css” with this:

<style>
.mce-content-body {
    line-height: inherit !important; /** Prevents TinyMCE messing with your line-height **/
}

div[data-fred-dropzone]{
    outline:1px dashed red;
}
.fred--active .row {
    /*margin:5px;*/
}

.carousel-inner{
    z-index:1;
    margin-bottom:20px;
}
.carousel{
    z-index:0;
}
.carousel-control-prev, .carousel-control-next{
    margin-bottom:300px;
}

.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>

The carousel related entries above fix most of the setting selections issues - these can be modified or expanded on to suit. All the classes are applied during editing using this custom plugin code, that is set to run on the “FredBeforeRender” system event:

<?php
$cust_styles = $modx->getChunk('fred-css');
$modx->event->_output = [
    'includes' => $cust_styles
];

This applies the styles defined in the chunk. The red dashed outlines applied to Fred dropzones has been super helpful to my editors.

1 Like