Should you wish to style your path within the Page Builder follow these steps:
- Add the Path Element to your page
- Click on the Path Element
- Click on Trait Manager
- Copy the Path ID (this ID is crucial in the code editor)
- Open the Code Editor
- Scroll to the CSS section
The following guidelines can be used when styling the CSS of your path:
Note: do not include brackets when pasting in your Path ID
#(Path ID) button {
color: #color hex code; ==> #ffffff, Changes text color of button
background-color: #color hex code; ==> #ffffff, changes background color of button
border: width of border type of border color of border; ==> 1px solid #ffffff, gives the button a border
border-top: width of border type of border color of border; ==> 1px solid #ffffff, gives the button a border at position 'top' (above item)
border-bottom: width of border type of border color of border; ==> 1px solid #ffffff, gives the button a border at position 'bottom' (below item)
border-left: width of border type of border color of border; ==> 1px solid #ffffff, gives the button a border at position 'left' (left side of item)
border-right: width of border type of border color of border; ==> 1px solid #ffffff, gives the button a border at position 'right' (right side of item)
border-radius: radius of border; ==> 11px, adds a curve to the corners of the button
}
Path Text Field Styles // :not is to exclude checkboxes and radio buttons
#(Path ID) input:not([type='checkbox']):not([type='radio']) {
color: #color hex code; ==> #ffffff, Changes text color of text field
background-color: #color hex code; ==> #ffffff, changes background color of text field
border: width of border type of border color of border; ==> 1px solid #ffffff, gives the text field a border
border-top: width of border type of border color of border; ==> 1px solid #ffffff, gives the text field a border at position 'top' (above item)
border-bottom: width of border type of border color of border; ==> 1px solid #ffffff, gives the text field a border at position 'bottom' (below item)
border-left: width of border type of border color of border; ==> 1px solid #ffffff, gives the text field a border at position 'left' (left side of item)
border-right: width of border type of border color of border; ==> 1px solid #ffffff, gives the text field a border at position 'right' (right side of item)
border-radius: radius of border; ==> 11px, adds a curve to the corners of the text field
}
The same applies to LABEL, TEXTAREA, SELECT, CHECKBOX, RADIO BUTTONS, ETC.
#(Path ID) label, #(Path ID) textarea, #(Path ID) select, #(Path ID) checkbox, #(Path ID) input([type='radio'])
TO GIVE IT AN 'ON HOVER' EFFECT
Simply add :hover to the end of the class/ID function
example -> #(Path ID) button:hover {}
example2 -> #(Path ID) input:not([type='checkbox']):not([type='radio']):hover {}
TO GIVE IT AN 'ON CLICK' EFFECT
Simply add :active to the end of the class/ID function
example -> #(Path ID) button:active {}
example2 -> #(Path ID) input:not([type='checkbox']):not([type='radio']):active {}
Note: If applying your styles does not return the expected result, it could mean that you have styles overriding these new changes, in this case you would have to make use of the !important tag, an example of it's use below.
#(Path ID) input {
background-color: #ffffff !important;
color: #000000;
}
Should you need to style an individual item only, the following CSS will help you achieve this;
#item_(Item ID) {
color: #color hex code;
background-color: #color hex code;
border: width of border type of border color of border;
border-top: width of border type of border color of border;
border-bottom: width of border type of border color of border;
border-left: width of border type of border color of border;
border-right: width of border type of border color of border;
border-radius: radius of border;
}
Notice the selector(#item_ID) being different as we are calling the item only.
If you are unsure as to what your Item ID is, you can find it in your Items List (highlighted in yellow on the image below).
Example of #Path ID:
Example of #Item_(item_ID):
#item_2{
background-color: red !important;
}