Save for Later
This guide was created with Scribe in
2 minutes.
Sign in and create your own!
Exercise 7: Styling Webforms with CSS Classes
Riley Skipper
|
0 step
|
2 minutes
Pantheonsite
1
Click "Structure"
Zoom Saved
2
Click "Webforms"
Zoom Saved
3
Click "Build" on your webform.
Zoom Saved
4
Click "Edit" on the "Section" field. We want to add some custom styling to this field.
Zoom Saved
5
Click "Advanced"
Zoom Saved
6
Click "Element attributes" to expand.
Zoom Saved
7
Click "custom…"
Zoom Saved
8
Click the "Enter custom classes…" field.
Zoom Saved
9
Type "bg-gold" to make the background of the section field a golden yellow.
10
Save.
Zoom Saved
11
Save elements.
Zoom Saved
12
Click "View"
Zoom Saved
13
"Section" field is now yellow.
Zoom Saved
14
Scroll back up and click "Build" to edit.
Zoom Saved
15
Click "Edit" on "Section" field. We want to add some padding around the background and text.
Zoom Saved
16
Click "Advanced"
Zoom Saved
17
Click the "Enter custom classes…" field.
Zoom Saved
18
Beside "bg-gold", add "p-3". This gives the element some medium padding.
19
Click "Title attributes"
Zoom Saved
20
Click the "Title CSS classes" field.
Zoom Saved
Have something to say?
Create an account to leave messages for the author to see!
Create an account
Feedback
This Scribe is in tip-top shape!
Leave feedback if there are any issues with this Scribe