Remove close button border on gallery Lightbox

Hello! 

I recently did some customisation to my Lightbox for a strips gallery page on my website. The result is exactly what I wanted except I have not been able to remove the container border for the close button, as shown in the screenshot below. It only appears after using the previous / next navigation on the lightbox. Is there any way to remove it?

Page URL is www.fernandacortina.com/gallery. This is the code I used for the changes I made:

/*** Lightbox customisation ***/
.gallery-lightbox-close-btn-icon {
    top: 20px; 
  	bottom: auto;
    right: 10px; 
  	left: auto;
}

/* change the background color - gallery*/
.gallery-lightbox-background{
    background: #ffffff;
  	opacity:0.98;
}

/* change the close button color - gallery */
.gallery-lightbox-close-btn-icon {
  color: #9D9D9D!important
}

/* change the prev/next controls - gallery */
.gallery-lightbox-control-btn-icon *{
    color: #9D9D9D;
}

/* add close text before button */
.gallery-lightbox-close-btn-icon:before {
  	font-family: 'nourd-light';
  	font-weight: 500;
  	font-size: 13px;
  	letter-spacing: 1px;
  	color: #7D7C7C!important;
    content: "CLOSE";
  	position: absolute; /* Change from relative to absolute */
    top: 2px; /* Adjust this value as needed */
    left: -48px; /* Adjust this value as needed */
}

1 hour ago, fercoresc said:

Hello! 

I recently did some customisation to my Lightbox for a strips gallery page on my website. The result is exactly what I wanted except I have not been able to remove the container border for the close button, as shown in the screenshot below. It only appears after using the previous / next navigation on the lightbox. Is there any way to remove it?

Page URL is www.fernandacortina.com/gallery. This is the code I used for the changes I made:

 

/*** Lightbox customisation ***/
.gallery-lightbox-close-btn-icon {
    top: 20px; 
  	bottom: auto;
    right: 10px; 
  	left: auto;
}

/* change the background color - gallery*/
.gallery-lightbox-background{
    background: #ffffff;
  	opacity:0.98;
}

/* change the close button color - gallery */
.gallery-lightbox-close-btn-icon {
  color: #9D9D9D!important
}

/* change the prev/next controls - gallery */
.gallery-lightbox-control-btn-icon *{
    color: #9D9D9D;
}

/* add close text before button */
.gallery-lightbox-close-btn-icon:before {
  	font-family: 'nourd-light';
  	font-weight: 500;
  	font-size: 13px;
  	letter-spacing: 1px;
  	color: #7D7C7C!important;
    content: "CLOSE";
  	position: absolute; /* Change from relative to absolute */
    top: 2px; /* Adjust this value as needed */
    left: -48px; /* Adjust this value as needed */
}

I tried to click arrows but can not reproduce the issue? What I need to do?

On 4/2/2024 at 7:55 PM, Beyondspace said:

I tried to click arrows but can not reproduce the issue? What I need to do?

With the arrows sometimes it doesn't show up, but if I use keyboard to move between images it appears.

On 4/7/2024 at 3:41 AM, tuanphan said:

You try this CSS code

button.gallery-lightbox-close-btn {
    border: none !important;
    outline: none !important;
}

 

That worked! Thank you!