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

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;

}

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

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!

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?

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!

Hi,

I don't see it in homepage. Can you share link to page?

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

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

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!

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?

Hi

Ok I did it.

pass: bLiQUEluthev.

Thanks!

Hi

How are you. You were able to take a look?

Thanks a lot for your time!

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!

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

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!

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