JetSloth jetsloth
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-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
/ 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-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
/ gf-collapsible-section-field-title-inside-example.html
Last active
July 20, 2017 09:58
Example markup of Collapsible Section field with section description within collapsible body
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-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
/ 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> |
jetsloth
/ image-choices-gf_list-styles.css
Last active
October 11, 2017 07:06
Gravity Forms Image Choices - List Classes Styling
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.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
/ image-choices-border-box-example.css
Created
October 19, 2017 23:56
Custom CSS for a bordered box image choices based on first example at https://jetsloth.com/gravity-forms-image-choices/
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
| .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
/ image-choices-horizontal-grey.css
Last active
March 29, 2018 01:43
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; | |
| width: 100%; | |
| } | |
| .image-choices-field .gfield_label { | |
| font-size: 2em; | |
| margin-bottom: 1em; | |
| display: block; | |
| text-align: center; | |
| } |
jetsloth
/ Image_Choices_Product_Configurator_Style.css
Last active
December 11, 2018 13:40
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
| /* Global for both forms on page */ | |
| ul.gfield_radio li:not(:last-child), ul.gfield_checkbox li:not(:last-child), | |
| .image-choices-field .image-choices-choice, | |
| .image-choices-field .image-choices-choice .image-choices-choice-selected { | |
| margin-right:0px!important; | |
| border:none!important; | |
| } | |
| .gfield:not(:last-child) { | |
| margin-bottom:0px!important; | |
| } |
OlderNewer