Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add button to Gallery Image


Shelly

Question

I want to add a button below text to a gallery image (like the attached screenshot). The website I'm working on is https://www.thejupegroup.com (password is: RJupe10). I want to add a button to subscribe under the text in the "Connect with Us" block.

Right now I have that block and the image to the left of it set up as side-by-side gallery images. I'm using the Blend template in the Brine family. 

Any CSS tips would be greatly appreciated! Thanks!!

Screen Shot 2019-12-01 at 11.45.01 AM.png

Link to comment

Recommended Posts

  • 0
9 hours ago, alishabhaumik said:

@tuanphan

I've inputted two different codes you've provided above in the Settings -> Design -> Custom CSS but no luck. Which code to I need to use and where should I input it? 

website: https://experimentalbitchpresents.com/
button text: learn more
button link: https://experimentalbitchpresents.com/about-bitchin-collabs

Where is learn more text in above link? can you take screenshot.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Hello! I've just been successful adding a button to my gallery image. But I'd like the button font to be Montserrat in all CAPS so it matches the other buttons on my site. Any way to do that? I've attached an image of how my usual buttons look and then this one with the wrong font.

Thanks!!

This is the code I used that worked:

section#packages .Index-gallery-item-content-body a {
    background: #f6f3ef;
    color: #6e7376;
    padding: 15px 25px;
    border-radius: 0px;
}
button1.PNG.c4299e93ab45e24df5312a38da07fd46.PNG866997718_buttonwithwrongfont.PNG.6d6798d2122d5bdd5eb957d2d4bca346.PNG

Link to comment
  • 0

 

section#packages .Index-gallery-item-content-body a {
    background: #f6f3ef;
    color: #6e7376;
    padding: 15px 25px;
    border-radius: 0px;
	font-family: 'Montserrat';
}

If that doesn't do the trick feel free to share a link to the site and I can help you out

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 0

@tuanphan this is an awesome post! I can't seem to figure out this code though.

Will you also help me figure out how to add a button to my Gallery image?

 

Here is a link to the site I'm working on https://tinaleecreations.squarespace.com/client-work

password: tina

 

I'm trying to accomplish this look in the picture I attached. The button will go to another page, and the Text will be centered. Any suggestions?1664440457_ScreenShot2020-06-21at1_15_35AM.thumb.png.3648e35a596943fd6fa9a0908b42dd82.png

 

 

Link to comment
  • 0
On 12/3/2019 at 4:39 AM, tuanphan said:

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;
}

 

 

Thank you for this solution @tuanphan!

I need one more adjustment if possible? The text in my button is showing as white (it's taking on the settings from the site styles). 
Is there a way to change the text colour too #00a4b1?

Cheers
Claire.

 

 

Screen Shot 2020-07-24 at 1.16.05 PM.png

Link to comment
  • 0
8 hours ago, Claire_auck said:

hank you for this solution @tuanphan!

I need one more adjustment if possible? The text in my button is showing as white (it's taking on the settings from the site styles). 
Is there a way to change the text colour too #00a4b1?

Cheers
Claire.

Can you share link to page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

hi @tuanphan

I added the code you provided above into my CSS

Quote

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; }

But the button is left aligned and not centering with the text above of it. Do you know how to fix it?

Site: https://beautybydannie.com/testing

Thank you!

Edited by crnangyn
Link to comment
  • 0
On 11/26/2020 at 1:12 PM, crnangyn said:

hi @tuanphan

I added the code you provided above into my CSS

But the button is left aligned and not centering with the text above of it. Do you know how to fix it?

Site: https://beautybydannie.com/testing

Thank you!

Add to Home > Design > Custom CSS

.Index-gallery-item-content-body p:last-child {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
1 hour ago, gapture said:

Hi @tuanphan

Thank you for your kind help. Would you be able to guide me step by step how do I add buttons after creating gallery? Where do I go and what code lines I should add.

Thank you so much. 

TUANPHAN.jpg

Can you add link over gallery? Then we will give code to change link to button

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 10/14/2021 at 3:50 AM, Juisafish said:

Hi everyone!

I am trying to turn the link in my index gallery into a button like you all. I tried a bunch of the codes here but I can't seem to figure it out, would anyone be able to help? I'm using the Pacific template.

URL is https://www.scandaleusephotography.com/

Additionally, I'd like to make it work on all my slides. Is that even an option?

Thank you, coding wizards! 🙂

Capture d’écran, le 2021-10-12 à 15.05.00.png

It looks like you figured it out? I see buttons here

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...