JetSloth jetsloth
jetsloth
/ circle-style-1-gf-image-choices.css
Last active
July 6, 2019 02:34
Gravity Forms Image Choices - Circle Style 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ shadow-box-1-gf-image-choices.css
Last active
July 6, 2019 02:36
Gravity Forms Image Choices - Shadow Box Style 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ polaroid-style-1-gf-image-choices.css
Last active
March 1, 2023 22:47
Gravity Forms Image Choices - Polaroid Style 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ gf-image-choices-product-option-field-example.html
Last active
April 8, 2020 02:06
Example markup of Image Choices with a Product Option field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ gf-image-choices-field-example.html
Created
March 13, 2017 09:51
Example markup of Image Choices with a normal field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ image-choices-auto-size-image.css
Created
June 30, 2017 00:38
Gravity Forms Image Choices - auto sized image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ collapsible-sections-custom-styles-1.css
Last active
July 20, 2017 07:06
Gravity Forms Collapsible Sections - Custom Styles 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ collapsible-sections-custom-styles-2.css
Last active
July 20, 2017 07:06
Gravity Forms Collapsible Sections - Custom Styles 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ collapsible-sections-custom-styles-3.css
Last active
July 20, 2017 07:06
Gravity Forms Collapsible Sections - Custom Styles 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ gf-collapsible-section-field-description-title-example.html
Last active
July 20, 2017 09:58
Example markup of Collapsible Section field with section description within section title bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
OlderNewer