phpBB • Free and Open Source Forum Software

Schtorsch · by **Schtorsch** » Fri Oct 27, 2017 3:38 pm

Hello,

is it possible to get the lightbox without any border? Actually there is the white border around the picture. I think it´s something in css or javascript - but I have no idea what and where...

Tastenplayer · by **Tastenplayer** » Tue Jan 16, 2018 5:17 pm

The border is specified in the css

I have tried to change the border in my new modern style(width, colour and radius)..
I created a folder called Modern. Then I adjusted the border in the ext. css. and also in the minimum.css.
However, the wide white border is still displayed.

I emptied the cache. Do I have to disable and reactivate this ext. ? Or why else doesn't it work?

Code: Select all

/* Preload images */
body:after {
  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
  display: none;
}

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 2px;

  /* Image border */
  border: 2px solid black;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 2px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: #f9f9f9;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 2px;
  -webkit-border-bottom-left-radius: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  -webkit-border-bottom-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #bf0000;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #262223;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

Now I've noticed. That was only the border, if the pictures are clicked.

Where/how to change the border for the tumbnails?

M.O.B. · by **M.O.B.** » Sat Jul 13, 2019 4:10 am

Since there are two types of images that you can list in a post, let me tell you where to do that:

INLINE ATTACHMENTS:
For inline attachments that you allow your users to upload and then they use the inline attachment feature. i.e. using the [attachment] bbcode.

Here is where you can adjust those colors and borders:

You need to go into your forum's theme CSS files.

Normal (not HOVER):

/styles/prosilver/theme/colours.css

Adjust the following properties to make your custom changes...

Code: Select all

dl.thumbnail img {
    border-color: #666666;
    background-color: #FFFFFF;
}

/styles/prosilver/theme/content.css

Adjust the following properties to make your custom changes...

Code: Select all

dl.thumbnail img {
    padding: 3px;
    border: 1px solid transparent;
    box-sizing: border-box;
}

HOVER:

/styles/prosilver/theme/colours.css

Adjust the following properties to make your custom changes...

Code: Select all

dl.thumbnail dt a:hover img {
    border-color: #368AD2;
}

/styles/prosilver/theme/content.css

Adjust the following properties to make your custom changes...

Code: Select all

dl.thumbnail dt a:hover img {
    border: 1px solid transparent;
}

URL IMG LINKS:
Images that users will link from outside URLs i.e. using the [img] bbcode

Here is where you can adjust those colors and borders:

You need to do this within a file that is included with this extension:

OPEN: /ext/vse/lightbox/styles/all/template/js/resizer.js

Adjust the following properties to make your custom changes...

Code: Select all

	$.fn.extend({
		borderHover: function() {
			return this.each(function() {
				$(this).css({
					border: 'solid 3px transparent',
					borderRadius: '6px',
					transition: 'border-color 0.1s ease-out',
					cursor: 'pointer'
				}).hover(function() {
					$(this).css('border-color', '#4ae');
				}, function() {
					$(this).css('border-color', 'transparent');
				});
			});
		}
	});

I hope that helps.

Tastenplayer · by **Tastenplayer** » Sat Jul 13, 2019 8:40 am

Thank you very much for the detailed instructions.

It's not up to date anymore, but when my style is finished, I'll definitely try it.

Schtorsch · by **Schtorsch** » Sun Oct 25, 2020 11:18 am

How can I disable the white border around the pictures? I have tried all the hints above - but the white border is still displayed. I don´t want a border around the pictures... The border around the thumbnail is okay - but the white border around the pictures not.

Gumboots · by **Gumboots** » Thu Nov 05, 2020 11:37 pm

You can edit the image background colour, and the border width and colour, in lightbox.min.css. Or, if you're fine with doing your own minifying, you can do the edits in lightbox.css, then minify it and save it as the new lightbox.min.css. Look for the .lb-outerContainer and .lb-image classes.

Lightbox

Lightbox without any border? - Lightbox