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

Gradient for top section of every page

Asked by garethkthomas

Question

garethkthomas    25

garethkthomas
Posted

Hello,

Hoping someone can help me with a website build I'm working on.

I have some working custom CSS code: 

section[data-section-id="5e8ee9f70ac4ea59df0ec51f"]
	.section-background {
    background-color: #231f45;
    background-image: url("https://static1.squarespace.com/static/5e8ee8871b56fa68d7df7b4b/t/5f0f53c91a35720fae014234/1594840010004/2.png"), linear-gradient(#231f45,#231f45,#231f45,#8d4755);
    background-size: 100%, cover;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain, cover;
}

It does what I want it to (produce a gradient background for the top section of a page):

1494372396_Screenshot2020-07-22at18_07_41.thumb.png.72e28141bfb89c848437cf37ae547195.png

However, I would like this gradient to appear in the top section on every page of the website.

Is it possible to achieve this without getting every data-section-id for each page? The site isn't big, but I would like it to work well for any new pages the client adds (mainly blog posts) without them having to edit the CSS each time.

I've been searching for a couple of hours now (I like to fix things myself if I can) with no luck.

Many thanks – Gareth

Gareth K Thomas | Clarified.
- I will make your website work.
- Conversion optimisation, usability testing, analytics.

Share this post

Link to post

8 answers to this question

Recommended Posts

  • 0

rwp    268

rwp
Posted

OK lets try this: 

body.view-item #header {
    background-color: #231f45;
    background-image: url("https://static1.squarespace.com/static/5e8ee8871b56fa68d7df7b4b/t/5f0f53c91a35720fae014234/1594840010004/2.png"), linear-gradient(#231f45,#231f45,#231f45,#8d4755);
    background-size: 100%, cover;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain, cover;
}

body:not(.view-item) #page section:first-of-type .section-background {
    background-color: #231f45;
    background-image: url("https://static1.squarespace.com/static/5e8ee8871b56fa68d7df7b4b/t/5f0f53c91a35720fae014234/1594840010004/2.png"),linear-gradient(#231f45,#231f45,#231f45,#8d4755);
    background-size: 100%,cover;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain,cover;
}

 

garethkthomas reacted to this

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

Share this post

Link to post
  • 0

rwp    268

rwp
Posted 
section:first-of-type .section-background {

 

garethkthomas reacted to this

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

Share this post

Link to post
  • 0

garethkthomas    25

garethkthomas
Posted

Amazing, thank you @rwp.

Works perfectly for all pages apart from the blog posts:

413971375_Screenshot2020-07-22at19_34_33.thumb.png.2cca2d7b565110ade1dc124fd7d65f75.png

I was thinking of doing something to override the CSS on blog posts only... 

#header {
    background-color: #231f45;
}

Can't seem to find a way to make that apply to blog posts though?

Thank you – Gareth

Gareth K Thomas | Clarified.
- I will make your website work.
- Conversion optimisation, usability testing, analytics.

Share this post

Link to post
  • 0

rwp    268

rwp
Posted

Whats the link to the page?

garethkthomas reacted to this

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

Share this post

Link to post
  • 0

rwp    268

rwp
Posted

Replace with this.  I just realized that takes over the first section of your footer too...... 

#page section:first-of-type .section-background {

I will look into blog posts now.

garethkthomas reacted to this

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

Share this post

Link to post
  • 0

garethkthomas    25

garethkthomas
Posted

Amazing, that works better than I expected. Looking at the code... I would've had no chance of figuring that one out.

Really appreciate your help @rwp. 🙌

rwp reacted to this

Gareth K Thomas | Clarified.
- I will make your website work.
- Conversion optimisation, usability testing, analytics.

Share this post

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Go To Question Listing
×
×
  • Create New...

Support

Community

Developers

Resources