Skip to content

Instantly share code, notes, and snippets.

JetSloth jetsloth

Block or report user

Report or block jetsloth

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View image-choices-horizontal-grey.css
.image-choices-field {
display: block;
width: 100%;
}
.image-choices-field .gfield_label {
font-size: 2em;
margin-bottom: 1em;
display: block;
text-align: center;
}
@jetsloth
jetsloth / image-choices-border-box-example.css
Created Oct 19, 2017
Custom CSS for a bordered box image choices based on first example at https://jetsloth.com/gravity-forms-image-choices/
View image-choices-border-box-example.css
.gform_wrapper .gfield.image-choices-field .image-choices-choice,
.image-choices-field .image-choices-choice {
padding: 5% 15px 6%!important;
border-radius: 9px;
box-shadow: inset 4px 4px 10px transparent, 4px 4px 10px transparent;
border: 3px solid rgba(0, 0, 0, 0);
width: 30%;
margin-left: 1% !important;
margin-right: 1% !important;
background-color: transparent;
@jetsloth
jetsloth / image-choices-gf_list-styles.css
Last active Oct 11, 2017
Gravity Forms Image Choices - List Classes Styling
View image-choices-gf_list-styles.css
.image-choices-field.gf_list_1col,
.image-choices-field.gf_list_2col,
.image-choices-field.gf_list_3col,
.image-choices-field.gf_list_4col,
.image-choices-field.gf_list_5col,
.gform_wrapper .gfield.image-choices-field.gf_list_2col,
.gform_wrapper .gfield.image-choices-field.gf_list_3col,
.gform_wrapper .gfield.image-choices-field.gf_list_4col,
.gform_wrapper .gfield.image-choices-field.gf_list_5col {
margin-right: -2% !important;
@jetsloth
jetsloth / gf-collapsible-section-field-title-inside-example.html
Last active Jul 20, 2017
Example markup of Collapsible Section field with section description within collapsible body
View gf-collapsible-section-field-title-inside-example.html
<li id="field_x" class="gfield gsection collapsible-sections-field collapsible-sections-description-inside">
<h2 class="gsection_title">Section Title</h2>
</li>
<div class="collapsible-sections-collapsible-body" id="collapsible-section_x">
<div class="gsection_description">Section Description</div>
<li id="field_x" class="gfield">
<label class="gfield_label" for="input_x">Field Label</label>
<div class="ginput_container">
<input name="input_x" id="input_x" type="text" value="" class="medium">
</div>
@jetsloth
jetsloth / gf-collapsible-section-field-description-title-example.html
Last active Jul 20, 2017
Example markup of Collapsible Section field with section description within section title bar
View gf-collapsible-section-field-description-title-example.html
<li id="field_x" class="gfield gsection collapsible-sections-field collapsible-sections-description-title">
<h2 class="gsection_title">Section Title</h2>
<div class="gsection_description">Section Description</div>
</li>
<div class="collapsible-sections-collapsible-body" id="collapsible-section_x">
<li id="field_x" class="gfield">
<label class="gfield_label" for="input_x">Field Label</label>
<div class="ginput_container">
<input name="input_x" id="input_x" type="text" value="" class="medium">
</div>
@jetsloth
jetsloth / collapsible-sections-custom-styles-3.css
Last active Jul 20, 2017
Gravity Forms Collapsible Sections - Custom Styles 3
View collapsible-sections-custom-styles-3.css
.form-has-collapsible-sections_wrapper {
margin: 0;
text-align: right;
width: 100%;
max-width: none;
}
.form-has-collapsible-sections {
display: inline-block;
width: 520px;
max-width: 100%;
@jetsloth
jetsloth / collapsible-sections-custom-styles-2.css
Last active Jul 20, 2017
Gravity Forms Collapsible Sections - Custom Styles 2
View collapsible-sections-custom-styles-2.css
.form-has-collapsible-sections_wrapper {
margin: 0 auto;
text-align: left;
width: 460px;
max-width: 100%;
}
.form-has-collapsible-sections .gsection.collapsible-sections-field {
background-color: #fff;
border-color: #ededed !important;
@jetsloth
jetsloth / collapsible-sections-custom-styles-1.css
Last active Jul 20, 2017
Gravity Forms Collapsible Sections - Custom Styles 1
View collapsible-sections-custom-styles-1.css
.form-has-collapsible-sections_wrapper {
margin: 0 auto 30px;
text-align: left;
width: 460px;
max-width: 100%;
}
.form-has-collapsible-sections {
border-radius: 5px;
background-color: #fff;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.15);
@jetsloth
jetsloth / image-choices-auto-size-image.css
Created Jun 30, 2017
Gravity Forms Image Choices - auto sized image
View image-choices-auto-size-image.css
.gfield.image-choices-field .image-choices-choice-image-wrap {
background-image: none !important;
height: auto;
}
.gfield.image-choices-field .image-choices-choice-image {
display: block;
margin: 0 auto;
}
@jetsloth
jetsloth / gf-image-choices-field-example.html
Created Mar 13, 2017
Example markup of Image Choices with a normal field
View gf-image-choices-field-example.html
<li 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">
<li 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>
You can’t perform that action at this time.