Jump to content

Add button on gallery page slideshow

Go to solution Solved by tuanphan,

Recommended Posts

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.

Edited by laurentaylar
Link to comment
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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

Link to comment
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;

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
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;

image.thumb.png.fdd0e5b0e0fc81bd4d1a271fc1edb5a6.png

Edited by tuanphan

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...
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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
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

Link to comment

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 1 month later...
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.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

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

Edited by kellijayne
forgot to link tuanphan
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.