garethkthomas Posted July 22, 2020 Share Posted July 22, 2020 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): 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. Link to comment
rwp Posted July 22, 2020 Share Posted July 22, 2020 section:first-of-type .section-background { Link to comment
garethkthomas Posted July 22, 2020 Author Share Posted July 22, 2020 Amazing, thank you @rwp. Works perfectly for all pages apart from the blog posts: 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. Link to comment
garethkthomas Posted July 22, 2020 Author Share Posted July 22, 2020 https://lychee-dragonfly-3dts.squarespace.com/news/there-will-be-no-miracles-here Password is just: promont Gareth K Thomas | Clarified.- I will make your website work.- Conversion optimisation, usability testing, analytics. Link to comment
rwp Posted July 22, 2020 Share Posted July 22, 2020 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. Link to comment
garethkthomas Posted July 22, 2020 Author Share Posted July 22, 2020 Well spotted, thank you! Gareth K Thomas | Clarified.- I will make your website work.- Conversion optimisation, usability testing, analytics. Link to comment
rwp Posted July 22, 2020 Share Posted July 22, 2020 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; } Link to comment
garethkthomas Posted July 22, 2020 Author Share Posted July 22, 2020 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. 🙌 Gareth K Thomas | Clarified.- I will make your website work.- Conversion optimisation, usability testing, analytics. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.