TimMarner

Hi,

Can anyone help me to make a custom code iFrame pop up when someone clicks a button.

I added this code into the header section. This is to pull the form in.

<iframe
  src="https://link.marnager.co.uk/widget/form/aA0oeu6CQ5tmZqniLekw"
  style="display:none;width:100%;height:100%;border:none;border-radius:0px"
  id="popup-aA0oeu6CQ5tmZqniLekw" 
  data-layout="{'id':'POPUP'}"
  data-trigger-type="alwaysShow"
  data-trigger-value=""
  data-activation-type="alwaysActivated"
  data-activation-value=""
  data-deactivation-type="neverDeactivate"
  data-deactivation-value=""
  data-form-name="Website Enquiry Form"
  data-height="385"
  data-layout-iframe-id="popup-aA0oeu6CQ5tmZqniLekw"
  data-form-id="aA0oeu6CQ5tmZqniLekw"
  title="Website Enquiry Form"
      >
</iframe>
<script src="https://link.marnager.co.uk/js/form_embed.js"></script>

But I want the form to only pop up when someone clicks the 'Free Consultation' button in the navigation.

Is there a way to hide it until that button is clicked? I'm not sure how to do this.

Site: https://stirlingfurnituredesign.squarespace.com/

Password: stirling

Any help would be appreciated ! Thank you

This has worked thank you!!

Hi sorry i forgot to add, I added a small code block at the bottom of the page with this:

<a href="#contact" class="floating-contact-button sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-initialized="true">Contact Us</a>

Hi, please can anyone help me with this

I am trying to create a floating contact button for each contact page on a website for a client.

I have added some code which has created the button using an existing button on the page, it works how I want - the only thing is the button goes behind some other items on the page. Changing the Z-index didn't work at all. Here's the code I used:

/* buttons in bottom corner */
.floating-contact-button {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 999999999 !important;
  scale: 0.8
}
@media screen and (min-width: 641px) {
	.floating-contact-button {
      bottom: 2rem;
      right: 2rem; 
       scale: 1
  }
}

Here's what it looks like:

Website page: https://sylviancare.co.uk/bournemouth-and-poole

1 hour ago, tuanphan said:

Add to Design > Custom CSS

/* events page */
[data-section-id="6491adfe8b5357646d504b97"] .section-background {
    background-image: url(https://cdn.pixabay.com/photo/2023/06/13/10/09/man-8060589_1280.jpg) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

 

This has worked right on the events page! Thank you.

But it has also added the background to the inner events page. How do I remove it from those pages?

Can anyone help me make the events details block sticky on this page (circled in screenshot):

https://leebradbury.squarespace.com/events/ultra-training-camp-june 

password: Bradbury

Can anyone help me make the details block on the inner events page stay in place when you scroll?

I want this block (circled below) to be sticky on the page:

This is the page: https://leebradbury.squarespace.com/events/ultra-training-camp-june

Password: bradbury

Hi can anyone help me with this

I am trying to add a background image to the events block on my events page, but I don't think this option exists in Squarespace

Here is the page I am trying to this on: https://leebradbury.squarespace.com/events

Password: bradbury

I want the background to go on just the events section block, not the whole page

Thank you for any help

It doesnt matter now I have solved it

header.black .header-title-logo a, .homepage .header-title-logo a {
content:url("https://static1.squarespace.com/static/64872c2fa16c416a1d241967/t/6491d03d7e440e4957b01d82/1687277629178/Lee-Bradbury-Logo-White.png") !important;
}

Hi,

Please can anyone help me!

I am trying to add a different logo to my inner events pages - but not the main Event page.

I have used this code to add the logo to the Events Page Header Code Injection:

<style>
/* white logo */
.header-title-logo a {
content:url("https://static1.squarespace.com/static/64872c2fa16c416a1d241967/t/6491b1ea83a6d32d8a138998/1687269866734/Lee-Bradbury-Logo.png");
}
</style>

It has worked on all the inner pages how I want, but I don't want to target this main Event page!

Website Page: https://leebradbury.squarespace.com/events

Password: bradbury

I'm trying to make the gallery on this blog page a bigger width

I would like it to be almost full page width with just a bit of white space on either side.

This is how it looks now - there's too much white space on the left and right:

I would like to customise the galleries on this page:

https://hargreavescontracting.squarespace.com/projects/warburtons

Password: hargreaves123

I'm trying to make the gallery blocks om the home page crop the images so that they fill the whole gallery block.

Here's a screenshot:

I want the images in that gallery on the right to fill the block completely - so it automatically fills this block on any screen size. 

Here's the website link:

https://hargreavescontracting.squarespace.com/ 

Password: hargreaves123

I am trying to make the navigation bar transparent when the user lands on the page, then as soon as they scroll the background comes back.

I added this code to make the background transparent :

//transparent navigation on home//
.homepage .header-announcement-bar-wrapper {
    background: transparent !important;
    position: absolute !important;
}

But it is still transparent when scrolling down the page and I want the black background to reappear when the user scrolls

The website is https://timmarner.squarespace.com/
And password is: timmarner123

Can anyone help please?

Hi can anyone help me make gallery blocks only play on hover?

They are on autoplay right now but I want this to only work when a user hovers over the gallery block.

I am trying to do it on the galleries on this page of the website:

https://timmarner.squarespace.com/type-of-work
Password: timmarner123

(Attached a screenshot of the page)

Okay I have put the code back in and attached a screenshot of how it looks

I'm trying to figure out how to make the image gallery blocks on this page the same height:

https://timmarner.squarespace.com/type-of-work 

password: timmarner123

I added some code but it didn't work properly:

// work slideshows //
.content-fill {
  height: 300px !important;
}
@media only screen and (max-width: 1100px) {
.content-fill {
  height: 250px !important;
}
}

it made the image the right size but left grey space under

Can anyone help make the space underneath go? 🙂 

1 hour ago, Ziggy said:

This might need just applying just to the large images, but try it like this anyway:

.summary-thumbnail .img-wrapper {
  padding-bottom:90%;
}

 

I've added that but I'm not sure if its changed anything

16 hours ago, Ziggy said:

I'll have another charge at the width issue tomorrow.

To apply just to desktop:
Add this in front of the code (with a } after and previous code inbetween)

@media only screen and (min-width:768px) {
   ///REPLACE WITH CODE///
}

Thank you! Looks great on mobile now 🙂

That would be great if you could get it full width too !

And I was also wondering if there is a way to fill the white space in the image attached?

So that the bigger image block (including the title) is the same height as the two image blocks to the side of it

5 minutes ago, Ziggy said:

I'm butting my head up against the full-width not working, but try this update:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 2';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'3 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'3 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 2';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 2';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'3 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'3 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }

 

This works! the images are the right width now 🙂

I'm still looking for it to fill the screen more if you can get the whole thing to work wider?

Is it also possible to ignore all of this code on mobile? Leaving the summary block as it was before for just mobile?

3 minutes ago, Ziggy said:

In my testing this works well if you make the summary block narrower.

I see that when I make it smaller!

Is it possible to make this work when its full width?

And can it be designed so the big image takes up 50% of the width, and each smaller image takes 25% of the width? Right now the big image takes up more width than I would like

9 minutes ago, Ziggy said:

Sorry, wrong grid type, try this:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

You'll have to make the column width in the summary settings as large as you can.

Hi, i've put this code in and it's definitely closer! I've also made the column width 600px (the highest you can do)

16 minutes ago, Ziggy said:

This is a fun one! I've not tried to recreate this before, so it'll need some tweaking to get it right, but add this to your custom CSS and maybe we have a start...

.portfolio-grid-basic {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(10vh, auto))
}
.grid-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.grid-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.grid-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.grid-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.grid-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

 

Thanks for helping, I've added this to my custom CSS, but nothing has changed yet.

I am trying to customise the layout of my blog summary on desktop.

I want it to look like the image attached like what this website does: https://www.pentagram.com/ 

The summary block is on the  homepage of this website: https://timmarner.squarespace.com
Password: timmarner123

I am trying to edit the first slideshow on the home page to make it the full height of mobile, so the images crop themselves to fit this portrait view.

It doesn't let me drag the slideshow down to the full height.

website link: mustard-tetra-zr93.squarespace.com

password: whitehouse123

59 minutes ago, bangank36 said:

What is your site-wide password? I can not access your site at the moment

It's tuesday123