Docs

[Rob V]

Hello again, could you provide the CSS to remove the white image border that is displayed around images when viewed in Ilightbox? Thanks!

[Drew M]

Hey Rob,

you can find the code to modify here, by choosing Theme Editor in WordPress, under Appearance Tab:

/framework/css/site/stacks/CHOOSE YOUR STACK

Looks like this:

.ilightbox-holder.light {
  border: 2px solid #e5e5e5;
  padding: 1%;
  background: white; }

or by simply adding this to the Customizer CSS entry field:

body .ilightbox-holder.light {
  border: 2px solid #e5e5e5;
  padding: 1%;
  background: white; }

With this, you can edit the border color, and the background color.

[Rob V]

Perfect. Thanks!

[Kory]

No problem. 🙂

[gabriel m]

… I tried but still the box is there, where do I find this : /framework/css/site/stacks/CHOOSE YOUR STACK

thx

[gabriel m]

ok, so I found out where to change it, still not working…

I changed the border radius in dreamweaver

but all I can get is this

red blocks and still the white border….

what did I do wrong?

[Christian]

Hey Gabriel,

Please give us the URL of the website you’re working on so we could see the problem.

Thanks.

[gabriel m]

well I changed it back, but its http://www.kopaysages.com thx

[gabriel m]

I am using a child theme, should I modify the chid theme or x directly?

also here is a more direct link

http://www.kopaysages.com/notre_portfolio/style-contemporain/

[Kory]

Gabriel,

Can you give us a little more information on what it is you’re trying to change? Your original pictures are no longer available so I’m not sure what it is you’re wanting to update here.

Thanks!

[gabriel m]

I am simply wondering where in here do I put/change the code to stop the white border in the thumbnail and in the actual pop up pics, thanks

any of those pics from this page are an example, thank you.

also here is the code from integrity-light.css that Is responsible fr the white box..

.ilightbox-overlay.light {
  background: white; }
 
.ilightbox-loader.light {
  -webkit-box-shadow: 0px 0px 85px #dacffc, 0px 0px 85px #dacffc;
  box-shadow: 0px 0px 85px #dacffc, 0px 0px 85px #dacffc; }

.ilightbox-loader.light div {
  background: white url("file:///Macintosh HD 500 GB/Users/tantra/Downloads/x_package 2/x/framework/img/global/ilightbox-preloader-light.gif") no-repeat center; }

.ilightbox-holder.light {
  padding: 1%;
  background: white;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25); }

.ilightbox-holder.light .ilightbox-container .ilightbox-caption {
  background-color: white; }

.ilightbox-holder.light .ilightbox-container .ilightbox-social {
  border-radius: 2px; }

.ilightbox-holder.light .ilightbox-alert {
  color: #89949B; }

.ilightbox-toolbar.light {
  top: 8px;
  left: 8px;
  height: 23px;
  background-color: white;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); }

.ilightbox-toolbar.light a {
  width: 25px;
  height: 23px;
  text-align: center; }

.ilightbox-toolbar.light a.ilightbox-close {
  border-radius: 3px 0 0 3px; }

.ilightbox-toolbar.light a.ilightbox-fullscreen {
  border-radius: 0 3px 3px 0; }

.ilightbox-toolbar.light a:before {
  font-family: "fontawesome";
  display: inline-block;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  speak: none; }

.ilightbox-toolbar.light a.ilightbox-close:before {
  content: "\f00d";
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 22px; }

.ilightbox-toolbar.light a.ilightbox-fullscreen:before {
  content: "\f0c8";
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 23px; }

.ilightbox-toolbar.light a.ilightbox-prev-button,
.ilightbox-toolbar.light a.ilightbox-next-button {
  display: none; }

.ilightbox-thumbnails.light .ilightbox-thumbnails-grid .ilightbox-thumbnail img {
  border-radius: 2px; }

.ilightbox-thumbnails.light .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-video {
  background: url("file:///Macintosh HD 500 GB/Users/tantra/Downloads/x_package 2/x/framework/img/global/ilightbox-thumb-overlay-play-light.png") no-repeat center; }

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-title {
  padding: 10px 8px;
  padding-right: 60px;
  font-size: 18px; }

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-toolbar {
  top: 5px;
  left: auto;
  right: 5px; }

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-toolbar a {
  float: right; }

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-toolbar a:first-of-type {
  border-radius: 0 3px 3px 0; }

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-toolbar a:last-of-type {
  border-radius: 3px 0 0 3px; }

.ilightbox-overlay,
.ilightbox-loader,
.ilightbox-loader *,
.ilightbox-holder,
.ilightbox-holder .ilightbox-container,
.ilightbox-holder .ilightbox-container img.ilightbox-image,
.ilightbox-holder .ilightbox-container .ilightbox-caption,
.ilightbox-toolbar,
.ilightbox-toolbar *,
.ilightbox-thumbnails,
.ilightbox-thumbnails *,
.ilightbox-holder .ilightbox-container .ilightbox-social,
.ilightbox-holder .ilightbox-container .ilightbox-social * {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  line-height: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none; }

.ilightbox-closedhand * {
  cursor: url(file:///Macintosh%20HD%20500%20GB/Users/tantra/Downloads/x_package%202/x/framework/css/site/stacks/closedhand.cur) , default  !important; }

.ilightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000; }

.ilightbox-loader {
  position: fixed;
  top: 45%;
  left: -192px;
  padding-left: 30px;
  opacity: 0.9;
  filter: alpha(opacity=90);
  zoom: 1;
  border-radius: 0 100px 100px 0;
  z-index: 100005; }

.ilightbox-loader div {
  width: 72px;
  height: 72px;
  border-radius: 0 100px 100px 0; }

.ilightbox-loader.horizontal {
  top: -192px;
  left: 45%;
  padding: 0;
  padding-top: 30px;
  border-radius: 0 0 100px 100px; }

.ilightbox-loader.horizontal div {
  border-radius: 0 0 100px 100px; }

.ilightbox-toolbar {
  display: none;
  position: fixed;
  z-index: 100010; }

.ilightbox-toolbar a {
  float: left;
  cursor: pointer; }

.ilightbox-thumbnails {
  display: block;
  position: fixed;
  z-index: 100009; }

.ilightbox-thumbnails.ilightbox-horizontal {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px; }

.ilightbox-thumbnails.ilightbox-vertical {
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  overflow: hidden; }

.ilightbox-thumbnails .ilightbox-thumbnails-container {
  display: block;
  position: relative; }

.ilightbox-thumbnails.ilightbox-horizontal .ilightbox-thumbnails-container {
  width: 100%;
  height: 100px; }

.ilightbox-thumbnails.ilightbox-vertical .ilightbox-thumbnails-container {
  width: 140px;
  height: 100%; }

.ilightbox-thumbnails .ilightbox-thumbnails-grid {
  display: block;
  position: absolute; }

.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail {
  display: block;
  position: relative;
  padding: 10px;
  cursor: pointer; }

.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail img {
  width: 100%;
  height: 100%;
  border-radius: 2px; }

.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  filter: alpha(opacity=70);
  zoom: 1; }

.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-icon:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  zoom: 1; }

.ilightbox-holder {
  display: none;
  position: fixed;
  z-index: 100003; }

.ilightbox-holder.ilightbox-next,
.ilightbox-holder.ilightbox-prev {
  cursor: pointer; }

.ilightbox-holder div.ilightbox-container {
  position: relative;
  width: 100%;
  height: 100%; }

.ilightbox-holder img.ilightbox-image {
  width: 100%;
  height: 100%; }

.ilightbox-holder .ilightbox-container .ilightbox-caption {
  display: none;
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px 10px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 150%;
  word-wrap: break-word;
  text-align: center;
  border-radius: 3px 3px 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 20003; }
  @media (max-width: 979px) {
    .ilightbox-holder .ilightbox-container .ilightbox-caption {
      font-size: 10px;
      font-size: 1rem; } }
  @media (max-width: 480px) {
    .ilightbox-holder .ilightbox-container .ilightbox-caption {
      font-size: 8px;
      font-size: 0.8rem; } }

.ilightbox-holder .ilightbox-alert {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 50px;
  margin: auto;
  padding-top: 100px;
  text-align: center; }

.ilightbox-holder .ilightbox-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto; }

.ilightbox-holder .ilightbox-inner-toolbar {
  position: relative; }

.ilightbox-holder .ilightbox-inner-toolbar .ilightbox-toolbar {
  position: absolute; }

[Support]

Hi Gabriel,

Go to Customizer -> Custom put custom CSS over there this should help

You can check following link for more info on this

Custom Customizer Options

Thanks

[gabriel m]

thx, that worked,

could you also give me the css to make the pictures be a button to go to next picture like we can in a slider

thank you very much

[gabriel m]

also to put the background black instead of white

I tried to change this:

body .ilightbox-holder.light {
border: 2px solid #e5e5e5;
padding: 0%;
background: white; }

to this

body .ilightbox-holder.light {
border: 2px solid #e5e5e5;
padding: 0%;
background: black; }

but did not do anything..

thx again

[Kory]

Hey Gabriel,

Thanks for writing in! Regretfully, we cannot accommodate your first request as it is beyond the scope of our support that we offer. Regarding your second post, try appending the !important selector to your CSS. For example:

body .ilightbox-holder.light {
  border: 2px solid #e5e5e5 !important;
  padding: 0% !important;
  background: black !important;
}

Thank you!

[Author]

Posts