Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding a floating contact-button on the Brine?


LoveMoves

Question

Recommended Posts

  • 3

@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.

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
  • 0
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.

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
  • 0

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
  • 0

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
  • 1
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.

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
  • 0
On 2/11/2021 at 4:32 PM, handossary said:

Thanks so much @tuanphan the code worked perfectly. 

I wondered if anyone know how I can link to a lightbox form from this floating button? Currently it looks like I can only link to a url.

My website is: https://www.containerville.co.uk/

Any help would be appreciated

You can use Anything Lightbox plugin. + Code I posted above. Replace link in a tag above with lightbox url.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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.

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
  • 0
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...