Shelly Posted December 1, 2019 Share Posted December 1, 2019 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!! Link to comment
tuanphan Posted December 1, 2019 Share Posted December 1, 2019 @Shelly Can you insert a text link under "Our monthly e-Newsletter is an excellent way to stay connnected and to hear more about our industry insights."? If yes, please create one, then let me know, i will use CSS to convert it to button. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Shelly Posted December 1, 2019 Author Share Posted December 1, 2019 @tuanphanthanks for getting back to me so quickly. Ideally I'd like the button to link to a pop-up menu to subscribe. Is that possible, and if so should I start by creating that text link? Link to comment
tuanphan Posted December 1, 2019 Share Posted December 1, 2019 9 minutes ago, Shelly said: @tuanphanthanks for getting back to me so quickly. Ideally I'd like the button to link to a pop-up menu to subscribe. Is that possible, and if so should I start by creating that text link? To create a button, you need to insert a link, under text, then use code to change it to button To create popup, you need to use some javascript/jquery. It will complicated. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Shelly Posted December 1, 2019 Author Share Posted December 1, 2019 OK thank you. I think I will opt to just link the button to another page on the site to avoid the javascript. I've created the text link and it's live on the page now. Thanks again! Link to comment
tuanphan Posted December 2, 2019 Share Posted December 2, 2019 2 hours ago, Shelly said: OK thank you. I think I will opt to just link the button to another page on the site to avoid the javascript. I've created the text link and it's live on the page now. Thanks again! add to Home > Design > Custom CSS section#newsletter .Index-gallery-item-content-body a { background: #f1f2; color: #000; padding: 10px 20px; border-radius: 5px; } studiolinear 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
studiolinear Posted December 2, 2019 Share Posted December 2, 2019 Hi guys! We are looking to do something similar to this on our site: https://trombone-paddlefish-tj7b.squarespace.com/ Pw: cinderwood We are simply trying to add a button to the gallery slider here in Bring. We did try the code above and changed the section from newsletter to the ID for that section with no luck 😞 I attached a mockup of what we are looking to achieve! Link to comment
tuanphan Posted December 2, 2019 Share Posted December 2, 2019 @studiolinear Use this code section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child { background: red; } and tweak some things: border-radius, color,... Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
studiolinear Posted December 2, 2019 Share Posted December 2, 2019 Just now, tuanphan said: section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child { background: red; Thank you so much, this is great! Do you know how we would make the button white with black text and add some padding to the button? Link to comment
tuanphan Posted December 2, 2019 Share Posted December 2, 2019 Just now, studiolinear said: Thank you so much, this is great! Do you know how we would make the button white with black text and add some padding to the button? I think you should insert link first.... i can check & give exactly code. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted December 2, 2019 Share Posted December 2, 2019 9 minutes ago, studiolinear said: Just added! 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; } studiolinear 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
studiolinear Posted December 2, 2019 Share Posted December 2, 2019 1 minute ago, 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; } Nailed it! Thank you SO much!! Link to comment
tuanphan Posted December 2, 2019 Share Posted December 2, 2019 8 minutes ago, studiolinear said: Nailed it! Thank you SO much!! Remember checking on Tablet/Mobile... Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Shelly Posted December 2, 2019 Author Share Posted December 2, 2019 15 hours ago, tuanphan said: add to Home > Design > Custom CSS section#newsletter .Index-gallery-item-content-body a { background: #f1f2; color: #000; padding: 10px 20px; border-radius: 5px; } This didn't work for me. Right now I have that text linking to the RESOURCES page. I tried changing "#newsletter to #resources but no luck either. Any other ideas? Thanks in advance! Link to comment
tuanphan Posted December 2, 2019 Share Posted December 2, 2019 @Shelly Where did you insert? It worked here section#newsletter .Index-gallery-item-content-body a { background: #f1f2; color: #000; padding: 10px 20px; border-radius: 5px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Shelly Posted December 8, 2019 Author Share Posted December 8, 2019 On 12/2/2019 at 1:44 PM, tuanphan said: @Shelly Where did you insert? It worked here section#newsletter .Index-gallery-item-content-body a { background: #f1f2; color: #000; padding: 10px 20px; border-radius: 5px; } Ahh @tuanphan it's working now, thank you!!!!! Link to comment
Shelly Posted December 8, 2019 Author Share Posted December 8, 2019 @Tuanphan The button is working very well--thank you again! However this block of copy and button are getting cut off on mobile view. Any idea why that is happening? Link to comment
tuanphan Posted December 9, 2019 Share Posted December 9, 2019 1 hour ago, Shelly said: @Tuanphan The button is working very well--thank you again! However this block of copy and button are getting cut off on mobile view. Any idea why that is happening? I don't know the cause. But you can add this code to handle @media screen and (max-width:640px) { section#newsletter .Index-gallery-inner .Index-gallery-item:last-child { min-height: 35vh; } section#newsletter figure img {height: 100% !important;} } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Shelly Posted December 10, 2019 Author Share Posted December 10, 2019 On 12/8/2019 at 4:08 PM, tuanphan said: I don't know the cause. But you can add this code to handle @media screen and (max-width:640px) { section#newsletter .Index-gallery-inner .Index-gallery-item:last-child { min-height: 35vh; } section#newsletter figure img {height: 100% !important;} } This worked perfectly @tuanphan, thank you yet again!!!! Link to comment
alishabhaumik Posted April 24, 2020 Share Posted April 24, 2020 Hello @tuanphan I seem to be having issues trying to figure out which code to use. I'm currently using Mentor template. I'm trying to get a Gallery Section/Page to include buttons on the images as well. 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/ Thank you so much! Link to comment
tuanphan Posted April 25, 2020 Share Posted April 25, 2020 10 hours ago, alishabhaumik said: Hello @tuanphan I seem to be having issues trying to figure out which code to use. I'm currently using Mentor template. I'm trying to get a Gallery Section/Page to include buttons on the images as well. 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/ Thank you so much! If you can add link, i can give code to turn link to button. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alishabhaumik Posted May 7, 2020 Share Posted May 7, 2020 On 4/25/2020 at 4:04 AM, tuanphan said: If you can add link, i can give code to turn link to button. Hi @tuanphan Sorry I didn't see your message until now! Here is a link: https://experimentalbitchpresents.com/about-bitchin-collabs thank you so much! Link to comment
tuanphan Posted May 8, 2020 Share Posted May 8, 2020 7 hours ago, alishabhaumik said: Hi @tuanphan Sorry I didn't see your message until now! Here is a link: https://experimentalbitchpresents.com/about-bitchin-collabs thank you so much! Which link you want to button? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alishabhaumik Posted May 11, 2020 Share Posted May 11, 2020 On 5/7/2020 at 8:58 PM, tuanphan said: Which link you want to button? This link please: https://experimentalbitchpresents.com/about-bitchin-collabs Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment