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 post
  • Answers 35
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

add to Home > Design > Custom CSS section#newsletter .Index-gallery-item-content-body a { background: #f1f2; color: #000; padding: 10px 20px; border-radius: 5px; }  

section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child { background: #fff; color: #000; display: block; max-width: 200px; text-align: center; paddi

Posted Images

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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
9 hours ago, tuanphan said:

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

I don't have it because I can't figure out how to get the button on this gallery the code I added from this post didn't work for me. 

Link to post
  • 0
On 5/14/2020 at 12:32 AM, alishabhaumik said:

I don't have it because I can't figure out how to get the button on this gallery the code I added from this post didn't work for me. 

You can use this plugin to bring back gallery block on SS 7.1. https://www.squarewebsites.org/products/squarespace-admin-ui-tweaks

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...