Add button on gallery page slideshow

A client provided a design to me that showcases a scrolling slideshow that has a heading, paragraph text and button. In Rally, the gallery page only allows text links. I've tried to figure this out by looking through help pages but I can't find the answer.

I found the code below, but I'm not seeing it work inside the Rally template. I'm not sure where I'm supposed to enter the info for my website - is the section# and p?

section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child {
    background: #fff;
    color: #000;
    display: block;
    max-width: 200px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
}

I also need to figure out how to hide the navigation background on index pages with a gallery page on top. I was able to hide the navigation background for regular pages with a banner image inside an index pages, but for gallery pages it goes back to showing a white navigation background.

@laurentaylar Can you share link to your site? Difficult to give exactly code without site url.

@tuanphan it's https://sawfish-frog-73kc.squarespace.com/ - "password2019"

I changed the template but hopefully that doesn't matter. I want to be able to turn all the links into a button that is a pill, transparent, and has a white outline/white text.

Thanks for your help!

3 hours ago, laurentaylar said:

@tuanphan it's https://sawfish-frog-73kc.squarespace.com/ - "password2019"

I changed the template but hopefully that doesn't matter. I want to be able to turn all the links into a button that is a pill, transparent, and has a white outline/white text.

Thanks for your help!

Add to Home > Design > Custom CSS

.Index-gallery-item-content-body a {
    background: #fff;
    color: #333;
    padding: 10px 20px;
}

Thank you so much! How do I make it a pill and transparent?

Actually it looks like I figured it out with this:

.Index-gallery-item-content-body a {
      color: #ffffff;
      background-color: transparent !important;
      border-radius: 20px;
    padding: 8px 20px;
      border: solid 2px #ffffff!important
}

Now I'm just curious how to add spacing between the paragraph and the button so they're not so close to one another. Do you know how to add that?

1 hour ago, laurentaylar said:

Actually it looks like I figured it out with this:

.Index-gallery-item-content-body a {
      color: #ffffff;
      background-color: transparent !important;
      border-radius: 20px;
    padding: 8px 20px;
      border: solid 2px #ffffff!important
}

 

Now I'm just curious how to add spacing between the paragraph and the button so they're not so close to one another. Do you know how to add that?

display: block;

margin-top: 20px;

Thanks! I just tried that but it's not working. Is there something else I should try?

15 minutes ago, laurentaylar said:

Thanks! I just tried that but it's not working. Is there something else I should try?

Have you inserted display: block; yet?

link is inline element, you first need to convert to inline-block or block with display: block; to use margin-top.

I see you have syntax error, maybe missing ; after !important

also, border should be: border: 2px solid #fff !important;

It was the ";" that was messing it up. Thank you so much! You've been a lifesaver!

Hi there @laurentaylar I am trying the exact same thing – can you copy and paste in the code you used with the margin area? I can't seem to figure out where to add that in so the button isn't as close to the paragraph. Please and thank you!

39 minutes ago, lqdesignstudios said:

Hi there @laurentaylar I am trying the exact same thing – can you copy and paste in the code you used with the margin area? I can't seem to figure out where to add that in so the button isn't as close to the paragraph. Please and thank you!

.Index-gallery-item-content-body a {
      color: #ffffff;
      background-color: transparent !important;
      border-radius: 20px;
    padding: 8px 20px;
      border: solid 2px #ffffff!important;
  display: block;
  margin-top: 20px;
}

@tuanphan THANK YOU! I have another question... client really wants something that looks like this on the gallery images:

https://tnt-funding.com/

Is this even possible!?

1 hour ago, lqdesignstudios said:

@tuanphan THANK YOU! I have another question... client really wants something that looks like this on the gallery images:

https://tnt-funding.com/

Is this even possible!?

Hi. Possible

However you need to create custom Gallery with JavaScript.

It takes a lot of code, and I believe no one will provide a free answer for this.

Moreover, if you create with JavaScript, when you need to add images, change text ... you will need to edit in Code Block, a bit difficult for your client

Hello!

Looking to add a button to my Gallery Section/Page inside the Home Index Page:

www.successisalifestyle.com

pw: creativity

Thanks a bunch!

12 hours ago, IIIJQIII said:

Hello!

Looking to add a button to my Gallery Section/Page inside the Home Index Page:

www.successisalifestyle.com

pw: creativity

 

Thanks a bunch!

 

WHere gallery? Can you take a screenshot?

11 hours ago, tuanphan said:

WHere gallery? Can you take a screenshot?

Absolutely! It's this Sections. Right after Stay Connected and Social Icons

On 7/15/2020 at 5:53 AM, lqdesignstudios said:

@tuanphan THANK YOU! I have another question... client really wants something that looks like this on the gallery images:

https://tnt-funding.com/

Is this even possible!?

Hi,
You can use the custom plugin and custom code.
I can suggest you Smart Slider 3 HTML Version.
But you need to use it with code block.

Please use the like button if it helps you!

Best,
Leopold

Hi @IIIJQIII
Try to use a simple button with custom link there. Is there any limitation?
Also, you can use these free buttons if you like!

Please use the like button if it helps you!

Best,
Leopold

1 hour ago, IXStudio said:

Hi @IIIJQIII
Try to use a simple button with custom link there. Is there any limitation?
Also, you can use these free buttons if you like!

Please use the like button if it helps you!

Best,
Leopold

Hi @IXStudio, because the page itself is a gallery, it only allows me to insert Pager header Code Injection, but i haven't been able to find code that works. Also, the download button doesn't download anything. It simply redirects to website.

Thanks!

JQ

Hi @IIIJQIII
Please use this code in your Page Code Injection.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	$('#block-yui_3_17_2_1_1597101211566_102008').after('<div class="sqs-block button-block sqs-block-button" data-block-type="53"><div class="sqs-block-content" id="yui_3_17_2_1_1598500848073_405"> <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" id="yui_3_17_2_1_1598500848073_404"> <a href="https://www.successisalifestyle.com/URL" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Change it</a> </div> </div></div>');
});
</script>

Please use the like button if it helps you.

Best
Leopold

tuanphan
I used your awesome CSS code to add a button to the slideshow (BRINE) but it only adds it to the 1st of 4 slides
Any idea how to add the button to all slides
 

9 hours ago, kellijayne said:

tuanphan
I used your awesome CSS code to add a button to the slideshow (BRINE) but it only adds it to the 1st of 4 slides
Any idea how to add the button to all slides
 

Can you share site url? We can check easier.

On 6/10/2020 at 8:45 PM, tuanphan said:

maybe helpful https://thompsonweb.design/squarespace-website-tips/added-to-cart-pop-up

On 7/5/2020 at 7:54 PM, tuanphan said:

.Index-gallery-item-content-body a {
      color: #ffffff;
      background-color: transparent !important;
      border-radius: 20px;
    padding: 8px 20px;
      border: solid 2px #ffffff!important;
  display: block;
  margin-top: 20px;
}

 

11 hours ago, tuanphan said:

Can you share site url? We can check easier.

Thank you tuanphan!

https://calcoastlegalservices.squarespace.com/
PW CCLS