Let's take a look at how you can add and remove classes (for example .my-class) from elements on the page.
Require selected element
In Pinegrow you can use multiple tools to do a single task. This is also true for editing classes. Choose the tool that best suits the task at hand:
Open the Element properties panel.
There you'll find the Classes section with the list of all classes that are assigned to the selected element and the
button.Remove the class by clicking on the x icon 1.
Toggle the class (switch it on and off on the element) by clicking on its name 2.
Add a class to the element by clicking on the
button 3.This will open the Add classes tool:
Include Add classes tool
The Style panel is used for styling page elements with CSS rules. But classes can be added and removed from there as well:
Open the Style panel.
RIGHT_CLICK on any rule that contains .class selector(s). The context menu contains commands for adding and removing such classes from the selected elements.
Open the Style / Active panel.
Both "Quick create rule" 1 and "Create with selector maker" 2 tools have the option to add any classes mentioned in the new rule to the selected elements - if those classes are not assigned to the element already.
NoteThis feature will not only add the class to the element but will also create a corresponding CSS rule for the class.
Open the Element properties panel.
There you'll find the Attribute editor section:
Add or edit the class attribute. Note that according to HTML specification multiple class names must be separated by a space character, not by a comma.
Open the Element code panel.
The element code panel shows the code of the selected element.
Edit the class attributes of the element in the HTML code:
Or switch to simplified Pug syntax 1 and edit classes prefixed by '.' after the element tag name:
Add classes tool is a floating panel that lets you quickly add and remove classes from the selected elements.
You can use the tool to:
Shortcut Use CMD+L_KEY to open the Add classes tool.
Shortcut RIGHT_CLICK on the element and select Add classes from the menu.