Form Widget Visual Modifications

The Ceremony, Energy and Newsroom layouts got a mini face lift today. :)

As these layouts were created before the Form Widget was an available Squarespace feature, they required minor CSS adjustments for the Form Widget to meet our visual standards and to stay contained within the sidebar. If you are using one of our public layouts and one of our default styles, you don’t need to do anything. These changes will be seamless.

If you are using a custom layout or custom style, below I have outlined these changes, and how to revise them if you prefer.

• Navigate to ‘Structure & Style > Appearance > Customize > Custom CSS’
• For Ceremony, insert this code at the bottom of your Custom CSS:
  

  .form-body .singlelinetext-small-inline, .form-body .singlelinetext-medium-inline, .form-body .singlelinetext-large-inline, .form-body .paragraphtext-small-inline, .form-body .paragraphtext-medium-inline, .form-body .paragraphtext-large-inline, .content-passthrough .form-body .singlelinetext-small, .content-passthrough .form-body .singlelinetext-medium, .content-passthrough .form-body .singlelinetext-large  {  border: 1px solid #CCC; font-weight: normal !important; color: inherit !important; font-family: inherit !important; padding: 5px; width: 110px !important;  } 
  
  .content-passthrough .search-form-pt .queryField { border: 1px solid #CCC;  }

• For Energy, insert this code at the bottom of your Custom CSS:
  

  .form-body .singlelinetext-small-inline, .form-body .singlelinetext-medium-inline, .form-body .singlelinetext-large-inline, .form-body .paragraphtext-small-inline, .form-body .paragraphtext-medium-inline, .form-body .paragraphtext-large-inline, .content-passthrough .form-body .singlelinetext-small, .content-passthrough .form-body .singlelinetext-medium, .content-passthrough .form-body .singlelinetext-large  { font-weight: normal !important; color: inherit !important; font-family: inherit !important; padding: 5px; width: $(NavigationColumnWidth-70)$ !important; }

• For Newsroom, insert this code at the bottom of your Custom CSS:
  

  .form-body .singlelinetext-small-inline, .form-body .singlelinetext-medium-inline, .form-body .singlelinetext-large-inline, .form-body .paragraphtext-small-inline, .form-body .paragraphtext-medium-inline, .form-body .paragraphtext-large-inline, .content-passthrough .form-body .singlelinetext-small, .content-passthrough .form-body .singlelinetext-medium, .content-passthrough .form-body .singlelinetext-large  { font-weight: normal !important; color: inherit !important; font-family: inherit !important; padding: 5px; width: $(NavigationColumnWidth-50)$ !important; } 

• Don’t forget to save your changes!