Border around images

Support
#1

The black border around some of my images is not showing up properly. Here is the link:
https://xpro.eagleheartdynamic.com/index.php/graphic-design/

Find attached the settings in Envira Gallery. Should I change something?

Screen Shot 2021-01-07 at 10.38.28 PM|522x500

Thanks in advance for your help!

#2

Hey There,

I’ve tried several times on different browsers to access your staging site but I am only seeing a blank screen. Could you please confirm that the page you’ve referenced is loading on your end? If yes then please provide us with WordPress login credentials of your website in a secure note so we can take a look at this. Thank you!

#3

That’s bizarre Rubin. Ok…sending my credentials.

#4

Hello Grace,

Thanks for sharing the credentials but unfortunately I was not able to access your site at my end. In case if you have added any IP restriction plugin or server setting please disable it for staging server so that we can investigate your settings.

Thanks

#5

Ok try it now. I deactivated the Coming Soon page. Sorry about that! I will remember the next time I ask a question to do this.

#6

I will contact my host.

#7

Can you try it again please in a different browser like Chrome. My host suggested to do a trace route to the xpro.eagleheartdynamic.com/wp⁃login.php. Then send me the results and I will send them to my host. My host and I could both get into the staging site. Try also going into a private browser and using the credentials.

#8

Hello Grace,

I have inspected your page and the images on the page. It turns out that the border around the images is actually within the element itself. This is also why some other thumbnails do not have any borders on them.

Check the secure note.

Please edit your thumbnails and reupload them.

Best Regards.

#9

I only added borders on the squares where there was white and no borders. What do you mean by

> It turns out that the border around the images is actually within the element itself.

I always add the border within the element. Am I not supposed to do that in Envira Gallery? Should I add it in Envira Gallery and if so, where do I apply it? Thank you ruenel.

#10

Hi Grace,

The reason why some of the images don’t have any black border because some of the images already have a black border when you upload them to your Media Gallery. As my colleague suggested, you will need to re-upload the image with no black border.

image
image980×443 141 KB

Hope that helps.

Thank you.

#11

So are you saying that Envira Gallery creates a black border? It doesn’t appear so because some of them don’t have black borders. I am not understanding what you’re saying. For example, if I upload the first logo image without a black border it will be borderless correct or will Envira Gallery create the border. I am confused.

#12

Hi Grace,

As my colleagues say that the ** black border** is the part of the image, which you uploaded. If you open the image URL in the browser and change the background color to white you can see the border with the image.
Please find the image URL and the screenshot in the secure note.

Thanks for understanding

#13

I don’t think you’re understanding what I am asking. If I remove all of the borders in the selected images will I get an automatic border with Envira Gallery? If not, then how do I solve this issue of wanting some borders on some of the images or all of the images to make it consistent? Should I leave the border out and Envira Gallery creates the border? Or is it even possible to have a border with Envira Gallery? That’s what I am asking. If I can’t have a border with Envira Gallery is there another plugin that I can use which will give me a border automatically around my images without me having to do it within the PSD file? Thank you.

#14

Hi Grace,

There is no option to add the image border through the Envira Gallery, but you can add the following code into the Theme Options > CSS or Page CSS to get the border in images.

.envira-gallery-image
{
    border: 2px solid #ff0000;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

#15

Thank you Tristup. Is there another plugin I can use where I don’t have to use code? It’s ridiculous that I can’t apply a border. It’s a simple request really.

I pasted the code on the Graphics Design page even though I have not taken off the images with the borders yet. I just finished fixing them now so I will do it tomorrow. But when I found is that the border did not show up on the other images which it should have if I pasted in the CSS code correct?

Also, is there a way to get rid of that launch box every time I try to edit a page? It takes me right to the Home page which is not the page I was working on! Then it goes to a blank screen and I have to wait like a minute to get to where I am want to go. It’s not as intuitive as the previous version when that launch box didn’t show up on every page. Please tell me how to get rid of it. Thank you.

#17

Hi Grace,

I have update the code from my colleagues to make it work and I added the code below in your Pro > Theme Options > CSS. I also remove the CSS you added in your specific page.

.envira-gallery-image{
    border: 2px solid #000000 !important;
}

On the other hand, to remove the launch option, I updated your permalinks to post name and it is now working fine.

image
image929×392 17.5 KB

Hope that helps.

Thank you.

#18

Thank you Marc! So the word !important made the difference? Wow. Programming is very particular.

#19

You are most welcome.

#20

You know Marc, I am still getting the border cut off on certain images. I changed the border to 1 rather than 2 because the black border was too thick, ugly and distracting. Have a look:
https://xpro.eagleheartdynamic.com/graphic-design/

I have not changed the images yet to all no borders but you can see on some of the ones that didn’t have borders initially like the b, The Bike Shop, Freedom Select Wireless…the black border is missing at the bottom. If I zoom in, I can see the borders but then they are inconsistent in thickness on each side and this is on some of the images that didn’t have borders before so it can’t be that it’s because there is already a border on the image. Do you know what I mean? Maybe I should just forget the borders period if it is causing this much hassle.

Also, what I am finding is that it takes so long for a page to load. It’s not as fluid a set up as before, unfortunately.

Another issue is when I go and view the page with the square/arrow in edit mode on the Graphic Design page, the three dots keep moving at the top of the page and nothing happens! The page does not go into view mode. Why does this happen?

#21

Hi Grace,

I would suggest you replace the previous code with the below-given code to apply the border to the parent container of the image, which will set the uniform border to every image.

.envira-gallery-item-inner
{
    border: 2px solid #000000 !important;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks