Jump to content

Adding a floating contact-button on the Brine?

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution

@LoveMoves Here is HTML (Add to Footer)


<div class="kl-float">
   <a href="https://www.tsiapparel.com/uniform-enquiry">
   <h9 style="color:white">REQUEST QUOTATION</h9>
   </a>
</div>

and CSS (Add to Home > Design > Custom CSS)


.kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #f9674d;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: montserrat;
   font-weight: bold;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

If it doesn't work, keep the code and post site url, i'll check.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
  • 5 months later...
13 hours ago, GooseGuy said:

Hey this worked brilliantly. One thing I wish is that it appeared on the cover page of the site as well. Any suggestions?

I'm not sure this will work on Cover Page

Try adding to Cover Page Settings > Advanced > Header

<div class="kl-float">
   <a href="https://www.tsiapparel.com/uniform-enquiry">
   <h9 style="color:white">REQUEST QUOTATION</h9>
   </a>
</div>
<style>
  .kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #f9674d;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: montserrat;
   font-weight: bold;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks for the quick response. Currently the site isnt live but here are screenshots of the home page using the code you suggested and the rest of the pages. 

 

Some reason the home page exit doesn't look the exact same as the other exit button. Let me know if you have any suggestions on making them look identical

Here is the code I used for the exit button on all but cover page 

CSS 

.kl-float {
   position: fixed;
   opacity: ;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #eb2529;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: Futura;
   font-weight:;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

 

HTML in footer

 

<div class="loader">
  
</div>

<div class="kl-float">
   <a href="https://google.com">
   <h9 style="color:white">EXIT</h9>
   </a>
</div>

Screen Shot 2020-11-09 at 12.32.07 PM.png

Screen Shot 2020-11-09 at 12.31.57 PM.png

Link to comment

This is what I put inside the coding for cover page settings

 

<div class="kl-float">
   <a href="https://google.com/">
   <h9 style="color:white">EXIT</h9>
   </a>
</div>
<style>
  .kl-float {
   position: fixed;
   opacity: ;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #eb2529;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: Futura;
   font-weight: ;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}
</style>

Link to comment
18 minutes ago, GooseGuy said:

I apologize I am very scatter brained today.

 

Here is the link 

redflagspgh.org

password

RedFlags2020

You mean button underline? Add this to Cover Page Header

<style>
  a {
    text-decoration: none;
}
</style>

Also, h9 doesn't exist, please rename h9 to h6

<h6 style="color:white">EXIT</h6>

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
  • 2 months later...
On 2/15/2021 at 9:32 PM, handossary said:

hi @tuanphan ooh thanks. so this will still work with the floating button? do you have an example of this (floating button > form lightbox) so i can see before purchasing? 

Demo page. https://tuanphan.squarespace.com/button-lightbox?noredirect

Pass: abc

(Click Button to Lightbox in right of screen)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
On 11/9/2020 at 2:54 PM, tuanphan said:

I'm not sure this will work on Cover Page

Try adding to Cover Page Settings > Advanced > Header

<div class="kl-float">
   <a href="https://www.tsiapparel.com/uniform-enquiry">
   <h9 style="color:white">REQUEST QUOTATION</h9>
   </a>
</div>
<style>
  .kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #f9674d;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: montserrat;
   font-weight: bold;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}
</style>

 

This one has worked out for me, and I was able to modify it towards my needs, but I'm just after one more thing. Can we make it hide in some degree towards the right side when we start scrolling, and then pop back out when someone hovers over it with the cursor? Or is it asking too much? 😄

Thanks for your answers!

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.