Jump to content

Changing Margin and Header on Individual Event Pages

Go to solution Solved by tuanphan,

Recommended Posts

Hi! Looking for some help customizing the margins and background image for event pages (all the individual event pages, as opposed to the Event page where all the events are listed). The default side margins are very thick in both the desktop and mobile views on these pages (which isn't happening anywhere else on the site). Ideally, I'd like the background image to fill the entire page (the same way it does on Home, About, FAQ, etc.). I also want my header style and background to carry over since they seem to be overridden here for some reason. Any help would be appreciated!

[updated] Site URL: https://www.hastyfaun.com/upcoming-events
[updated] Password: codinghelp1

image.thumb.png.d096a3605fec95f94d1e8ac59c4d4f57.png

image.thumb.png.f8d85d5480d1005d00361e9ac53f85e8.png

 

Edited by littlecrow
Updated URL and password
Link to comment

(Sorted out the margins! I had put some CSS in for the main page previously that was apparently affecting the individual pages too, so I removed that. So the header format/style is the only thing I need help with now!)

Link to comment

Combed through more CSS and found this bit that I had to add a background color/image to a section on the main Upcoming Events page, which seems to carry over to the individual events. Removing it doesn't solve the issue with the header (and only affects the desktop view, not the mobile), but thought I'd mentioned it!

Quote

//Adding color and background image to Upcoming Events page//
section[data-section-id="65ebe4140e8c8f1671502c97"]{
    background-color: #f7e76f;
  background-image: url('https://static1.squarespace.com/static/65ea61bd51b55338cbb59aa6/t/65ee5b2543cecc0ef3d02b4f/1710119723287/misc-background-yellow-mono.png');
    background-size: cover;
    background-repeat: no-repeat;
}

Link to comment

Ok, another update! I got my header colors back-- it looks like the event pages are essentially being treated as one section and it's the same section ID as the section (with the same background image) on the "Upcoming Events" page. So they also adopted the same color profile, which was an easy fix once I understood what was happening. I am still confused as to why the desktop and mobile backgrounds are different and, though I could live with it as it is, I'd really prefer to have the blue checkered image be the background behind the header and have the yellow background be only behind the event details.

Link to comment

Not quite, I got the margins sorted but I wasn't able to figure out how the  background images on the individual Event pages. Apart from the margins, they still look the same as in the "current" screenshots I first posted (rather than how I'd like them to look in the "mockup" image). Help would be appreciated if there's a way to do that!

Link to comment
On 3/19/2024 at 9:06 AM, littlecrow said:

Not quite, I got the margins sorted but I wasn't able to figure out how the  background images on the individual Event pages. Apart from the margins, they still look the same as in the "current" screenshots I first posted (rather than how I'd like them to look in the "mockup" image). Help would be appreciated if there's a way to do that!

All event detail will use same background or different? Then I will test code again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • Solution
On 3/27/2024 at 4:38 AM, littlecrow said:

Yes, they all will use the same! I just want the blue background image behind the header section to also carry over to those pages, like it does on the rest of the site. 

You can use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
$('<section class="page-section custom-section"><div class="section-border"><div class="section-background"><img src="https://images.squarespace-cdn.com/content/v1/65ea61bd51b55338cbb59aa6/cbead0c8-b974-434f-a718-0609ff588634/HF-BG-Header-Thin.png?format=2500w"/></div></div></section>').insertBefore('[class*="type-events"].view-item article section:first-child');
});
</script>
<style>
  section.page-section.custom-section>div {padding-top: 60% !important;}

section.page-section.custom-section {
    min-height: 60vh;
}

section.page-section.custom-section+section {
    padding-top: 0px !important;
}
</style>

image.thumb.png.2832334a9afb605eb33047bdbfb5f3c5.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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.