Jump to content

Help with code for folder link to specific part on page and for button and text on top of photo gallery

Recommended Posts

I need help with two things.

1. I input a code on the manufacturing services page (<p id="cncprogramming"></p>) and then on the pages bar at the top i made a folder for "manufacturing Services" including each service in the folder as a link. The link i put for example CNC Programming i input     /manufacturing#cncprogramming   Now it seems if i click CNC Programming from the folder on the home page or any other page it does not bring me to the CNC programming section. If im on the Manufacturing services page and then click CNC programming from the folder then it does. How do i fix this?

 

2. I'd like to put a button with link and some text over the gallery on the home page. Ideally i would like to put a different button on each image in the slideshow. Does anyone have code to do this? I found a post describing how to do it but its quite confusing as the individual helping on the post did it specifically for that persons site by pulling info from it. 

 

Thank you.

Link to comment
  • Replies 16
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

17 hours ago, tuanphan said:

Thank you. It works to me. See video

it only works if your already on the page and click it. If your on the home page and click for example CMM inspection under the Manufacturing tab it does not bring you right to the CMM inspection section it brings you to the top of the page for Manufacturing and then you have to click again in the folder for it to bring you down to CMM inspection. 

 

also how do you put the button on the list banner slideshow? not sure if i have right banner slideshow but dont see a button option

Link to comment
On 9/7/2023 at 3:39 AM, Amko said:

it only works if your already on the page and click it. If your on the home page and click for example CMM inspection under the Manufacturing tab it does not bring you right to the CMM inspection section it brings you to the top of the page for Manufacturing and then you have to click again in the folder for it to bring you down to CMM inspection. 

 

also how do you put the button on the list banner slideshow? not sure if i have right banner slideshow but dont see a button option

#1. It still works to me. Do you use Mac/Safari?

image.thumb.png.7672f3d84ca408178c27685782216caf.png

#2. See this

image.thumb.png.b101b905ea8cf90ad55e7fff9690e815.png

image.thumb.png.bd9cc7ac0215b833323ed5eb787f930a.png

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
On 9/11/2023 at 9:59 PM, Amko said:

I dont see any menu like that

You mean you don't see an option to add List Section, or you don't see option to add list button?

When you add a Section > > Look on left >> Choose "People" > Then on right box >> Chose layout with (i) icon.

You can see this quick video

 

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

https://app.screencast.com/RYhqrX5s3trZC

On 9/14/2023 at 4:26 AM, tuanphan said:

You mean you don't see an option to add List Section, or you don't see option to add list button?

When you add a Section > > Look on left >> Choose "People" > Then on right box >> Chose layout with (i) icon.

You can see this quick video

 

Here is a link to video of what my squarespace looks like.

https://app.screencast.com/RYhqrX5s3trZC

Website link is 

https://amkoaerospace.com/

I attached image of what i want to insert (text and button on top of a gallery image) and also what it looks like now. I don't see any option to insert button or text like this.

Id like to also have a different text and button on each gallery image.

I found a forum in which you helped someone with code but its not working for me. Code is below and link to that forum you responded 

 

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

Screenshot 2023-09-19 105425.png

image190.png

Link to comment
On 9/19/2023 at 10:16 PM, Amko said:

https://app.screencast.com/RYhqrX5s3trZC

Here is a link to video of what my squarespace looks like.

https://app.screencast.com/RYhqrX5s3trZC

Website link is 

https://amkoaerospace.com/

I attached image of what i want to insert (text and button on top of a gallery image) and also what it looks like now. I don't see any option to insert button or text like this.

Id like to also have a different text and button on each gallery image.

I found a forum in which you helped someone with code but its not working for me. Code is below and link to that forum you responded 

 

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

Screenshot 2023-09-19 105425.png

image190.png

Ah, your site is 7.0

Which template do you use? I will try testing with my site

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

Sorry for delay. Recently I'm traveling, can't check all questions

First, to add text, just hover on image > Click Gear icon > Add text here

image.thumb.png.1ac0db83e99f6c4512acb330ebeb6cc5.png

Next, to add button, you need to add a text link in Description

image.png.7c0998babcc5766174bf87ee755ca432.png

It will show this

image.thumb.png.b26d49e8b5334df7b9782fff83d1484b.png

add this code to Website > Page > Website Tools (under Not Linked) > Custom CSS to turn learn more to button

.Index-gallery-item-content-body a {
    background-color: #f1f;
    color: white !important;
    padding: 10px 20px;
    display: inline-block;
}

You will have

image.thumb.png.1db402c6015d450167c30d473eeead8e.png

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
6 hours ago, tuanphan said:

Sorry for delay. Recently I'm traveling, can't check all questions

First, to add text, just hover on image > Click Gear icon > Add text here

image.thumb.png.1ac0db83e99f6c4512acb330ebeb6cc5.png

Next, to add button, you need to add a text link in Description

image.png.7c0998babcc5766174bf87ee755ca432.png

It will show this

image.thumb.png.b26d49e8b5334df7b9782fff83d1484b.png

add this code to Website > Page > Website Tools (under Not Linked) > Custom CSS to turn learn more to button

.Index-gallery-item-content-body a {
    background-color: #f1f;
    color: white !important;
    padding: 10px 20px;
    display: inline-block;
}

You will have

image.thumb.png.1db402c6015d450167c30d473eeead8e.png

Thank you how do i change button to a pill and change button and text color to #g21353 I tried changing background color and color but it does not change 

Link to comment
7 hours ago, tuanphan said:

Sorry for delay. Recently I'm traveling, can't check all questions

First, to add text, just hover on image > Click Gear icon > Add text here

image.thumb.png.1ac0db83e99f6c4512acb330ebeb6cc5.png

Next, to add button, you need to add a text link in Description

image.png.7c0998babcc5766174bf87ee755ca432.png

It will show this

image.thumb.png.b26d49e8b5334df7b9782fff83d1484b.png

add this code to Website > Page > Website Tools (under Not Linked) > Custom CSS to turn learn more to button

.Index-gallery-item-content-body a {
    background-color: #f1f;
    color: white !important;
    padding: 10px 20px;
    display: inline-block;
}

You will have

image.thumb.png.1db402c6015d450167c30d473eeead8e.png

Also how can i move the text and button to be more towards the upper left corner

Link to comment
7 hours ago, tuanphan said:

Sorry for delay. Recently I'm traveling, can't check all questions

First, to add text, just hover on image > Click Gear icon > Add text here

image.thumb.png.1ac0db83e99f6c4512acb330ebeb6cc5.png

Next, to add button, you need to add a text link in Description

image.png.7c0998babcc5766174bf87ee755ca432.png

It will show this

image.thumb.png.b26d49e8b5334df7b9782fff83d1484b.png

add this code to Website > Page > Website Tools (under Not Linked) > Custom CSS to turn learn more to button

.Index-gallery-item-content-body a {
    background-color: #f1f;
    color: white !important;
    padding: 10px 20px;
    display: inline-block;
}

You will have

image.thumb.png.1db402c6015d450167c30d473eeead8e.png

image.thumb.png.69266a34d3bc1ec973f0fb0f3256561c.pngI Was able to do most of what i want just cant figure out how to move text and button exactly where i want it. Moved it to top left corner with style setting but would like to move it a bit more down and to the right. Could you help me with this? thak you.

 

Link to comment
On 10/3/2023 at 10:31 PM, Amko said:

image.thumb.png.69266a34d3bc1ec973f0fb0f3256561c.pngI Was able to do most of what i want just cant figure out how to move text and button exactly where i want it. Moved it to top left corner with style setting but would like to move it a bit more down and to the right. Could you help me with this? thak you.

 

I sent code here

 

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

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.