Styling and CSS
Jcrop uses a tight mixture of HTML and CSS to present its user interface. This document contains information about modifying the default styling to accomodate your UI/UX needs.
Wrap the element you wish to attach to:
<div class="jcrop-ux-fade-more"> <img id="target" src="..."> </div> <script> Jcrop.attach('target'); </script>
Or add or remove the class on an existing stage:
Several classes can be applied to the container (or parent elements) to perform some visual tweaks.
When widgets are inactive, they will fade more. Without this class, the currect selection is less obvious and the display can be more chatoic if you have many widgets. As such, this class is recommended for multiple-crop interfaces.
Display handles on inactive crop widgets. The behavior without this class is that handles will be hidden on crop widgets that are not the currently active widget.
No outline style on active widget.
For aesthetics and accessibility, the currently focused widget has a
outline style. Applying this class prevents the outline
Active widget retains full opacity even when blurred. Normally, when focus moves away from the active widget, it fades slightly. Applying this class will prevent that behavior and keep the active widget at full opacity.
Jcrop CSS files are compiled using SASS definitions found in the file
build/css/jcrop.css. It is recommended that you review this file
before making CSS changes, as it is well-commented and understanding
how the Jcrop CSS is generated by SASS can be helpful even if you are
not using SASS to make your changes.