Removal of border around link image

I am trying to add (code insertion) an image from an external site (which includes a link to that site) into the footer (it's a copyright image). However, the background of the footer is black, and the link I am adding has a white border around it. I can find no way of removing that border

Can you share your website URL and the location of this image?

Hi Ziggy. And Hi everyone else 🙂

URL is https://haloserene.com/ - but the thing I'm querying is not there since I haven't published it (because of the border) - I've attached a screenshot of what it look like

The link I'm trying to put in is (with fake id):

<a href="https://register.musiccopyrightregistration.org/directory/?cmd=listall&userid=999999&page=1" target="_blank" rel="noreferrer noopener" class="btn btn-success"><img src="https://register.musiccopyrightregistration.org/directory/images/copyrighthouseseal.png" /></a>

This is the code povided by the copyright site

There is no border when I test this myself. I can't tell you where the border is coming from without seeing your website to troubleshoot... unless it's a focus border for user navigation.

33 minutes ago, HaloSerene said:

The link I'm trying to put in is (with fake id):

<a href="https://register.musiccopyrightregistration.org/directory/?cmd=listall&userid=999999&page=1" target="_blank" rel="noreferrer noopener" class="btn btn-success"><img src="https://register.musiccopyrightregistration.org/directory/images/copyrighthouseseal.png" /></a>

This is because of the class "btn", it is applying the button CSS styling which has a border.

There are a couple of ways to go about this, but without interfering with your provided code too much, as I don't know the full details of for example what the class name is used for. You can try adding an ID to your code.

BTW - what do you mean by "with fake id"?

Try the below and let me know how it goes.

1) I added an id called "musiccopyright-button"

<a href="https://register.musiccopyrightregistration.org/directory/?cmd=listall&userid=999999&page=1" target="_blank" rel="noreferrer noopener" class="btn btn-success" id="musiccopyright-button"><img src="https://register.musiccopyrightregistration.org/directory/images/copyrighthouseseal.png" /></a>

2) Add this to your Custom CSS. Now there is a way to reference the element, this will remove the border that is being applied by the btn class.

#musiccopyright-button {
	border-style: none;
}

2 hours ago, melody495 said:

This is because of the class "btn", it is applying the button CSS styling which has a border.

There are a couple of ways to go about this, but without interfering with your provided code too much, as I don't know the full details of for example what the class name is used for. You can try adding an ID to your code.

BTW - what do you mean by "with fake id"?

Try the below and let me know how it goes.

1) I added an id called "musiccopyright-button"

<a href="https://register.musiccopyrightregistration.org/directory/?cmd=listall&userid=999999&page=1" target="_blank" rel="noreferrer noopener" class="btn btn-success" id="musiccopyright-button"><img src="https://register.musiccopyrightregistration.org/directory/images/copyrighthouseseal.png" /></a>

2) Add this to your Custom CSS. Now there is a way to reference the element, this will remove the border that is being applied by the btn class.

#musiccopyright-button {
	border-style: none;
}

 OK thanks Melody, I now understand how it is done, and it did work for me.

I wasn't able to position the link exactly how I wanted to in the end, but it's not a major problem at this time, I can live with it 🙂

The fake ID was me just obfuscating my actual user ID in the code

58 minutes ago, HaloSerene said:

 OK thanks Melody, I now understand how it is done, and it did work for me.

I wasn't able to position the link exactly how I wanted to in the end, but it's not a major problem at this time, I can live with it 🙂

Excellent! 

Do let me know if you need help with the positioning. It doesn't seem to be in the footer anymore?

13 hours ago, melody495 said:

Excellent! 

Do let me know if you need help with the positioning. It doesn't seem to be in the footer anymore?

When I put the code into the Code Injection for the footer, the link ends up on the leftside (which is good), but ends up lower than the copyright text on the right of the footer, so the footer was getting very large height-wise.

I attached the image being served by the copyright site, as you see it has a good deal of space (the grey region)  around the image. I don't think I can edit the image myself, but I'm wondering if there is a way to crop it in the <img> element (but not to scale it)?

So my goal is to have the link level with the RH text in the footer and also having the same sort of height as the RH text, thereby giving the smallest footer possible.

I just parked the link in the body of the page for the time being (site is still evolving) - I realise if it is placed in the body, then I will have to add it to every page, so in the footer would be best.

I haven't dealt with HTML and CSS in a long, long time 🙄

On 8/15/2024 at 2:14 PM, melody495 said:

This is because of the class "btn", it is applying the button CSS styling which has a border.

There are a couple of ways to go about this, but without interfering with your provided code too much, as I don't know the full details of for example what the class name is used for. You can try adding an ID to your code.

BTW - what do you mean by "with fake id"?

Try the below and let me know how it goes.

1) I added an id called "musiccopyright-button"

<a href="https://register.musiccopyrightregistration.org/directory/?cmd=listall&userid=999999&page=1" target="_blank" rel="noreferrer noopener" class="btn btn-success" id="musiccopyright-button"><img src="https://register.musiccopyrightregistration.org/directory/images/copyrighthouseseal.png" /></a>

2) Add this to your Custom CSS. Now there is a way to reference the element, this will remove the border that is being applied by the btn class.

#musiccopyright-button {
	border-style: none;
}

Hi Melody

As reported in my previous post, the above gets rid of the border. However, as I showed in my post, there is a good deal of excess space around the button image. How would I amend the #musiccopyright-button CCS to crop the image? Also, how would I get to the cropped button to be output at the top of the footer on the left and level with the copyright text on the right side of the footer?

Hello, can anyone help me with this please?