Adding Custom CSS
It’s really easy to add custom CSS for styling the image choices in your forms. Of course if you’re a theme developer or have the ability to edit your theme’s CSS file you can add your styles there. As an alternative we’ve provided an area for global custom CSS on the plugin settings page, and and area for form specific custom CSS on the form settings page.
For the global custom CSS just visit the Gravity Forms Settings page and click on the Image Choices tab – the same page where you enter your license key. The CSS you enter here will be loaded for all forms by default.
For custom CSS on specific forms visit the form settings page and click on the Image Choices tab. The CSS you enter here will only be loaded for that form. You also have a setting option here to ignore the global custom CSS. If this option is enabled, then the global custom CSS won’t be loaded for this form. Else by default both the the global and form custom CSS will be loaded.
Adding your own CSS
If you’re not already using Image Choices, you can add custom CSS to your theme in a few ways suggested below:
- Install a custom CSS plugin such as Simple Custom CSS
- Add your CSS using your theme editor or customiser
- User the Image Choice custom CSS setting if you are adding Images to your choices
Image Choices Markup
Below are a couple of examples of the field markup for image choices that might help you work out how you can apply custom styles. Radio button and checkbox fields are very similar in their structure. The main differences are the field type and some of the default gf classes. The Image Choices markup and classes are no different.
<div id="field_x" class="gfield image-choices-field image-choices-use-images image-choices-show-labels image-choices-layout-horizontal ">
<label class="gfield_label">Field Label</label>
<div class="ginput_container ginput_container_radio">
<ul class="gfield_radio" id="input_x">
<div class="gchoice_x image-choices-choice">
<input name="input_x" type="radio" value="Choice Value" id="choice_x">
<label for="choice_x" id="label_x">
<span class="image-choices-choice-image-wrap" style="background-image:url(path/to/your/image)">
<img src="path/to/your/image" alt="Choice Label" class="image-choices-choice-image">
</span>
<span class="image-choices-choice-text">Choice Label</span>
</label>
</div>
</ul>
</div>
</div>Additional classes
There are some additional classes that are toggled on the image-choices-choice element. When a user’s cursor is over a choice it will receive the image-choices-choice-hover class. And when a choice is selected it will receive the image-choices-choice-selected class. You can use these to style the hover and selected states of image choices.