Jump to content

Custom code newsletter block in footer

Recommended Posts

I am using some custom code for the signup button in the footer. For some reason, I can’t get the pink to go all the way to the right and the SUBSCRIBE to be in the center of that pink area. Code below. I can’t find good code anywhere to make this style button!  Site PW: test 

I've attached a screenshot of the design and the current footer. Thanks!

/* Detraform's Minimal Newsletter Block*/

.newsletter-block {
  padding-top: 0 !important;
  .newsletter-form-wrapper {
    background-color: transparent;
    padding: 0 !important;
    .newsletter-form-body {
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -ms-grid-row-align: center;
      align-items:  ;
      display: flex;
      padding-bottom: 0;
      border: 1.5px solid;
      border-color: #ffffff;
      .newsletter-form-fields-wrapper {
        width:  ~"calc(75% - 8px)";
        margin: 0px;
        .newsletter-form-field-wrapper {
          display: block;
          width: 100%;
          padding: 0px;
        }
        input {
          font-family: 'Open Sans Condensed';
          letter-spacing: 0;
          font-size: 14px;
          line-height: 1.4em;
          padding: 15px 20px;
          background-color: transparent;
          @media screen and (max-width: 640px) {
            padding: 15px 15px;
          }
          @media screen and (max-width: 420px) {
            padding: 17px 0 17px 12px;
          }
          display: block;
          border: none;
          &::placeholder{
            font-family: 'Open Sans Condensed';
            font-size: 1.2em;
            line-height: 1.4em;
            letter-spacing: 0;
            color: #ffffff !important; 
          }
        }
        @media screen and (max-width: 1350px) {
          width:  ~"calc(70% - 8px)";
        }
        @media screen and (max-width: 1200px) {
          width:  ~"calc(64%)";
        }
        @media screen and (max-width: 1024px) {
          width:  ~"calc(75%)";
        }
      }
      .newsletter-form-button-wrapper {
        width: 15%;
        height: 100%;
        margin: 0px;
        padding: 0;
        margin-top: 0px;
        vertical-align: middle;
        button {
          background-color: #d92c5a !important;
          border: none !important;
          vertical-align: top;
          box-shadow: none !important;
          padding: 27px;
          width: 100%;
          font-family: 'Open Sans Condensed';
          font-size: 1.2em;
          line-height: 1.5em;
          letter-spacing: 0;
          text-align: left !important;
          span {
            text-align: left !important;
            text-transform: uppercase;
            color: #ffffff !important;
            font-weight: 400;
            &:hover {
              opacity: .7;
            }
          }
          @media screen and (max-width: 1024px) {
            text-align: left;
            padding-left: 0;
            padding-right: 10px;
          }
          @media screen and (max-width: 640px) {
            text-align: left;
            padding-left: 0;
            padding-right: 0;
          }
        }
        @media screen and (max-width: 1350px) {
          text-align: left;
          padding: 0 30px;
          width: 32%;
          .newsletter-form-button {
            padding-right: 0;
          }
        }
        @media screen and (max-width: 1024px) {
          text-align: left;
          padding-top: 0;
          padding-bottom: 0;
          padding-left: 0;
          padding-right: 15px;
        }
        @media screen and (max-width: 640px) {
          padding-right: 0px;
        }
      }
      @media screen and (max-width: 1200px) {
        text-align: right;
        width: 100%;
      }
    }
    .newsletter-form-footnote {
      text-align: left;
      letter-spacing: .0em;
    }
  }
  .newsletter-form-footnote {
    margin-top: 16px;
    p {
      font-family: 'Open Sans Condensed' !important;
      line-height: 1.25em;
      opacity: 1;
      strong {
        font-weight: 400;
        color: #ffffff !important;
      }
    }
  } 
}

 

image.png

image.png

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Thanks for sharing, I can't obviously see the reason, but with the amount of width constraints at different screen sizes, I'm not surprised something went a bit wrong. Where did you get the code from?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Looks like you found it here: https://www.detraform.com/blog/free-squarespace-plugin-minimal-newsletter-block
The way this has been redesigned looks nice, but it doesn't allow for a background color on the button, the border isn't in the right place which is why the button doesn't seem to extend far enough to the right. It would be possible to achieve the look you're after, but probably not with that code.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

@Umlaut  You can try this Custom CSS if you remove the other code:

section[data-section-id="6344830c182f827682537afd"] {
  .newsletter-block .newsletter-form-wrapper .newsletter-form-field-wrapper {
    padding-right:0;
  }
  .newsletter-block .newsletter-form-field-element {
    background:none;
    border-top:2px solid white;
    border-bottom:2px solid white;
    border-left:2px solid white;
  }
  ::placeholder {
    color:#fff !important;
  }
  .newsletter-form-button-wrapper {
    margin-left:-6px;
  }
  .newsletter-form-button {
    background:#d92c5a !important;  
    border-top:2px solid white !important;
    border-bottom:2px solid white!important;
    border-right:2px solid white!important;
  }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.