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
@jetsloth
jetsloth / circle-style-1-gf-image-choices.css
Last active Jul 6, 2019
Gravity Forms Image Choices - Circle Style 1
View circle-style-1-gf-image-choices.css
.image-choices-field {
max-width: 100%;
width: 100%;
}
.image-choices-field,
.gform_wrapper .gfield.image-choices-field {
margin-right: -3%;
}
.image-choices-field .image-choices-choice,
.gform_wrapper .gfield.image-choices-field li.image-choices-choice {
@jetsloth
jetsloth / shadow-box-1-gf-image-choices.css
Last active Jul 6, 2019
Gravity Forms Image Choices - Shadow Box Style 1
View shadow-box-1-gf-image-choices.css
.image-choices-field {
display: block;
max-width: 100%;
width: 100%;
}
.image-choices-field .gfield_label {
font-size: 2em;
margin-bottom: 1em;
display: block;
text-align: center;
@jetsloth
jetsloth / polaroid-style-1-gf-image-choices.css
Last active Jul 6, 2019
Gravity Forms Image Choices - Polaroid Style 1
View polaroid-style-1-gf-image-choices.css
.image-choices-field {
max-width: 100%;
margin-right: -3%;
}
.image-choices-field .image-choices-choice,
.gform_wrapper .gfield.image-choices-field li.image-choices-choice {
display: inline-block;
position: relative;
padding: 13px !important;
overflow: visible;
@jetsloth
jetsloth / gf-image-choices-product-option-field-example.html
Last active Mar 13, 2017
Example markup of Image Choices with a Product Option field
View gf-image-choices-product-option-field-example.html
<li id="field_x" class="gfield gfield_price gfield_price_x gfield_option_x 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_checkbox">
<ul class="gfield_checkbox" id="input_x">
<li class="gchoice_x image-choices-choice">
<input name="input_x" type="checkbox" value="Choice Label|1" checked="checked" id="choice_x">
<label for="choice_x" id="label_x" price=" +$ 1.00">
<span class="image-choices-choice-image-wrap" style="background-image: url(path/to/your/image);">
<img src="path/to/your/image" class="image-choices-choice-image" alt="Choice Label">
</span>
@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>
@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 / 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 / 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-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 / 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>
You can’t perform that action at this time.