Jump to content

How to introduce a custom button only on a specific page and convert into link

Recommended Posts

Site URL: https://www.vilaarts.com/

Hello

I am trying to insert a custom button on my page. After searching quite a bit, I managed to put the button where I wanted, but the button repeats in all the image blocks. I can't find the correct ID to link the code to a specific image block. And another problem that I have not been able to solve, is how to convert it into a link.

I put the code below and an image of how I have the button.

Thank you very much in advance!

div.image-subtitle.sqs-dynamic-text::after{
  background-image: url('https://static1.squarespace.com/static/56d7589c22482e044b50f7ea/t/613b957548a2cf6da340cbf8/1631294837890/whitearrow3.png');
    background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
 content: '';
 display: block;
  height: 100px;
  width: 100px;
  height: 70x;
  margin: -68px 490px 0px auto;
  width: 65px;

}

 

 

Screenshot_6.png

Link to comment
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

Change this

div.image-subtitle.sqs-dynamic-text::after

to

 

#image-block-id div.image-subtitle.sqs-dynamic-text::after

Find #image-block-id with this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

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/12/2021 at 11:02 PM, Vilaarts said:

Thanks for that! I already did it.

Now I have another issue, the arrow moves his position every time I resize the window. How can I make it  stay in a fixed position? And how can I covert it into a link. I tried href but doesn't work.

Thanks for your time!

Hi,

Can you share link to page in screenshot?

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

Hi 

Of coure. In the screenshot of left  the arrow is in the correct position, but when I resize  the window the position changes, I tried with position:absolute but then the icon disappears . This happen in another image blocks like posters not only in cards.

Thanks a lot!

     

Imagen PNG.png

08E72B1A-48DA-46A2-8986-425A6EA9D4F8.png

67B2691B-B330-434A-9A1B-389D2E246D53.jpeg

F8C50BC4-CAA2-43D5-A7EA-A91CC8C3C1FD.png

Link to comment
On 9/17/2021 at 12:56 AM, Vilaarts said:

Hello

 

That's because it is a new template that I am working on it, but is not finished  yet. How can I share you a link?

 

Thanks

You can duplicate site, install template on it & share duplicated site url

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

Hello

This is the link https://okra-primrose-emp7.squarespace.com/ 

I tried a workaround  with alt+26 doing an arrow with the keyboard, and copy  paste as text, that works as a solution for now, but anyway I like to know if it's possible to fix the position of the arrow and make it a link. I left my custom icon in the first image-card where the problem persists. Other problem that I found is that I didn't find any code that can make the background transparent, there is always a box around the icon, even changing the background of the icon for the color of the image card, the box is still visible

Thanks a lot!

Link to comment
On 9/20/2021 at 7:57 PM, Vilaarts said:

Hello

This is the link https://okra-primrose-emp7.squarespace.com/ 

I tried a workaround  with alt+26 doing an arrow with the keyboard, and copy  paste as text, that works as a solution for now, but anyway I like to know if it's possible to fix the position of the arrow and make it a link. I left my custom icon in the first image-card where the problem persists. Other problem that I found is that I didn't find any code that can make the background transparent, there is always a box around the icon, even changing the background of the icon for the color of the image card, the box is still visible

Thanks a lot!

Hi,

Your site is private. Can you setup passowrd & share url again?

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

So far.  This the code for the button. I tried to change background-color:transparent; for background-color:transparent!important; but then the image disappears.

#block-a708409f62e3523704b0 div.image-subtitle.sqs-dynamic-text::after{
  background-color:transparent;
  background-image: url('https://static1.squarespace.com/static/614880087225635f6a1f1451/t/6148805f7225635f6a1f183b/1632141206317/whitearrow.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 100px;
  width: 80px;
  height: 70x;
  margin: -50px 620px 0px 80px;
  width: 40px;
  }

Thanks!

Link to comment
On 10/1/2021 at 1:50 AM, Vilaarts said:

So far.  This the code for the button. I tried to change background-color:transparent; for background-color:transparent!important; but then the image disappears.

#block-a708409f62e3523704b0 div.image-subtitle.sqs-dynamic-text::after{
  background-color:transparent;
  background-image: url('https://static1.squarespace.com/static/614880087225635f6a1f1451/t/6148805f7225635f6a1f183b/1632141206317/whitearrow.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 100px;
  width: 80px;
  height: 70x;
  margin: -50px 620px 0px 80px;
  width: 40px;
  }

Thanks!

Use this code

#block-a708409f62e3523704b0 div.image-subtitle.sqs-dynamic-text p:last-child::after {
    background-color: transparent;
    background-image: url('https://static1.squarespace.com/static/614880087225635f6a1f1451/t/6148805f7225635f6a1f183b/1632141206317/whitearrow.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
}
#block-a708409f62e3523704b0 div.image-subtitle.sqs-dynamic-text p:last-child {
    display: flex;
    align-items: center;
}

image.thumb.png.887e9b73fe23105be56ae945b50e55c1.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

Hi tuanphan

I applied the code, but nothing changes,  the white background is visible yet.  I don't understand. It looks like Squarespace creates the background,  because my image is a PNG and doesn't have any.

Any other idea?

Thanks a lot for your time!

Link to comment
On 10/3/2021 at 10:56 PM, Vilaarts said:

Hi tuanphan

I applied the code, but nothing changes,  the white background is visible yet.  I don't understand. It looks like Squarespace creates the background,  because my image is a PNG and doesn't have any.

Any other idea?

Thanks a lot for your time!

Your site is expired. You can contact Squarespace Customer Care to extend it (free), Then we will check problem again

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.