Jump to content

Inserting wave CSS code in Settings vs Advanced Header code injection

Recommended Posts

Site URL: http://www.qualitycupofcoffee.com/new-index-1

Hey Hey Squarespace Community 👋

I hope you had a great week-end. I am currently editing my website and fixing some awful bugs*.
On my website I use "Wave dividers". The issue is as I am evolving and learning about coding, I am founding new techniques to create these waves. Currently, all my "waves" are just uploaded background images which is not working well across different devices.

>> I finally found a good technique to get it done, however, I would like to inject that CSS code in my "advanced header code injection on the page I would like to customize". 

This code works perfectly when in my Custom CSS area :

/*test pink wave*/
#new-page-4 {
  background: #f0c4b2;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5fc4c62a3c02f22b9da32e1a/1606731306701/1stwavepinkabout.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

When I try to inject this code in my page (> advanced > header code injection) nothing appear. Here is the code I am trying to insert (I just added <script> </script>)

<script>
/*test pink wave*/
#new-page-4 {
  background: #f0c4b2;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5fc4c62a3c02f22b9da32e1a/1606731306701/1stwavepinkabout.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}
</script>

My question may seem stupid but why is it not possible ? Ideally I would like to upload all my custom CSS code for each page on a file that is uploaded to my website or at least injected in the advanced setting area of each page.

Best,
Manon

 

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

The <script> tags are for JavaScript.

As you are adding CSS, you need to use <style> tags instead.

For more information, see The Style Information element.

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Awww actually false alert.
I did write <style> instead of script but it's not working :
 

<style>
 [data-nc-element="primary-nav"]{
   display:none;
 }
.Mobile-overlay-nav--primary { display:none; }
</style>

<style>
#partenaire-2 {
  background: #f0c4b2;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5fc4c62a3c02f22b9da32e1a/1606731306701/1stwavepinkabout.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}
 </style>

That's the weirdest thing.
>> You see the styling for my primary nav. is working perfectly. 
>> I even tried to remove it to only do <style> my code </style> but it does not take any action. 
Is it possible that my section id of that page is wrong ? And I should be using another code to target that page ?

>> https://www.qualitycupofcoffee.com/english

The pink wave section is not appearing under "in partnership with"

Link to comment

Is there a reason why you have removed the CSS from the Custom CSS area? This is the best location to manage all your CSS.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Yes, my custom area CSS is getting full : 

>> as I injected my css coding for my nav. over there, I thought I could move all my css coding to "my individual page" (if that makes sense).

>> Maybe I should leave it in the custom area then ? Could I, if I don't have enough line of code left, combine it in a "file" and upload it on my website ?

You see I have 2 versions of my website eng. / fr. which means I have to repeat the exact same codes twice  that's how I reached my coding limit. 

Link to comment

Hey 👋

Actually I did find a solution :
I put back the code in my custom CSS and I discovered that I can use the same code to target different pages by simply doing this :



 

#partenaire-2, #new-page-4 {
  background: #f0c4b2;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5fc4c62a3c02f22b9da32e1a/1606731306701/1stwavepinkabout.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}



Thus instead of copying my code twice or several time on my website, I can now remove several lines of code. I just target ALL the areas I want that code to be implemented 🙂

I never knew adding a "," could help me do that.

Best!

Link to comment

Archived

This topic is now archived and is closed to further replies.

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