Class lock was one of the more requested features to add to our selector management toolset.
What does it do and how is it beneficial?
Now, since you have Core framework imported, you know that it comes with a bunch of utility classes for CSS grid, spacing, typography etc.
While you are free to edit any classes to your taste (as I also do when working with Core), you may prefer to not edit them or you may want to prevent accidental edits to utility classes, once you are finished with the element or section editing.
With a Class Lock, you can lock any element to either have Core classes, or all classes locked.
When the element is locked, it will not let you select Core class, or any class (based on settings) on that particular element, so it will not let you edit it accidentally as ID will be selected by default.
Once you are finished with working on an element, you can lock it by clicking the lock icon on the right side of the selector.
When the Lock icon color is green, it means the element is unlocked and you have a class SELECTED, so you can edit it (it may also help you to quickly identify that you are editing a class).
When you lock the element, the lock icon becomes blue, which means that it is locked to ID editing only. You cannot select the Core class or any class (again, based on settings explained below), until you unlock it, by clicking on a lock icon again.
There is one very simple option to set. Whether you want to lock all classes or Core classes only.
You can set this by clicking Manage -> Settings -> OxyNinja and you will see ID / Class Lock.
- If you have “Single: All” selected, it will always lock all classes on the element.
- If you have “Single: Core” selected, it will lock Core classes on the element (all classes with prefix c-).
If you have “Global: Core” selected, it will lock just Core framework classes.
Hint: If you want to lock also some of your classes but not all of them, give them a prefix c- same as actually used on Core classes, and select "Single: Core" in Class Lock settings.