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

Injected Code Affecting All Pages Instead of Just One


MarkFreeman

Question

Site URL: https://nymn.org

Hello,

I'm using some custom HTML to create a fixed floating button on my website's homepage that visitors can click to join our mailing list. The code is injected into the Homepage HTML, with the goal being for the button to only appear on the Homepage. However, the button is persistent across the entire site, which we do not want. On the Squarespace backend, the button acts as expected, appearing on the Homepage but disappearing on all other pages. However, when the webpage is opened up seperately, the button is visible on all pages. I've posted the HTML as well as the CSS we are using down below. Any help is appreciated, thank you!

Quote

<div class="kl-float">
   <a href="https://mailchi.mp/nyministrynetwork/nymn-communication-signup">
   <h9 style="color:white">JOIN OUR MAIL LIST</h9>
   </a>
</div>

Quote

.kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #1d6b69;
   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;
}

 

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

Just to confirm, you pressed the gear next to the home page -> advanced -> code injection.

Not the site wide code injection?

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
17 hours ago, rwp said:

Just to confirm, you pressed the gear next to the home page -> advanced -> code injection.

Not the site wide code injection?

@rwpI do not believe I put it in the sitewide code injection. I did as you mentioned, clicking the gear next to the specific page and adding the code their in the advanced tab. The CSS however is sitewide.

Link to post
  • 0

Try adding the css to the page code injection as well, and remove it from the sitewide CSS.

<style>
  .kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #1d6b69;
   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>

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

I have this exact same problem ... I know Im putting it in the correct place. Clicking the gear icon > advanced ... and it works in the backend builder but as soon as I preview it in the browser the code is affecting every page. Did you manage to figure it out?

Link to post
  • 0

Hi. Add this to Home > Design > Custom CSS to remove button on other pages

body:not(.homepage) .kl-float {
	display: none;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...