Image lightbox control, fontsize and shadow

Hi there,
I have 2 issues with the lightbox which i cannot solve.
I would like to be able to control the size of the shadow around image and the caption/title text under the image
Please see screenshot
This is the Custom Css I added so far. Playing with fontsizes in there didn’t help.
a.x-img-link:before {
content: none
display: block;
position: absolute;
margin: -36px 0 0 -35px;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
font-size: 62px;
font-size: 6.2rem;
line-height: 72px;
text-align: center;
text-shadow: 0 0.035em 0 rgba(0,0,0,0.35);
vertical-align: middle;
color: #fff;
border-radius: 100em;
opacity: 0;
-webkit-transition: opacity 0.75s ease;
transition: opacity 0.75s ease;
font-family: “fontawesome” !important;
font-style: normal !important;
font-weight: normal !important;
speak: none;
-webkit-font-smoothing: antialiased;
}

a.x-img-link:hover,
a.x-img:not(.x-img-thumbnail):hover {
opacity: 1;
}

a.x-img-link img {
-webkit-transition: opacity 0.75s ease;
transition: opacity 0.75s ease;
}

a.x-img-link:hover img {
opacity: 0.8;
}

a.x-img-link:hover:before {
opacity: 1;
}
.x-masthead a.my-logo:hover {
color:transparent;
}

.x-masthead .logo {
background:#fff;
}
.ilightbox-toolbar.light {
left: 50%;
}
/* Remove White Border around Lightbox */
.ilightbox-holder {
border: none !important;
background: transparent !important;
padding: 0 !important;
}

Thank you very much!

Hey @Maik,

Please use following CSS for the changes you want to achieve.

//CSS for image Caption, Change values as per your requirements  

.ilightbox-holder .ilightbox-container .ilightbox-caption {
      color: #000;
      font-size: 18px; 
}


//CSS for lightbox shadow, change values as per your requirements

.ilightbox-holder.light {
      -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.25);
      box-shadow: 0 0 15px rgba(0,0,0,0.25);
 }

Hope this helps

Regards

Hello Rahul,
Thx for your response.
I tried the code you provided, but nothing changed at all. I changed fontsize to 28px but still it is same as before…
Shadow i changed to 7px instead of the 15.
I also saved and purged the cache… any idea?
Thanks again
Maik

Mostly, it’s caused by syntax errors in your CSS. You might have missed a closing curly brace } during copying of the code. You can paste your entire custom CSS at http://csslint.net/ and it will check the errors for you.

Thanks.

I forgot to say thank you Xian, I really managed it to clear the errors out of the css.

Now i would like to move the caption-box under the image. If you look at the old screenshot you can see my comment in red. right there would be a great position for the caption-box. :slight_smile:

Also I would love it if I could add a “play-button” for an automated running slideshow.
this could be a small icon beside the other 2.

Thank you very much for your great support
Maik

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

Thank you for reply.

And only move the text down?
That should be possible right?
Please tell me how to move the text down.

Thank you!!

Maik

Note: this is PRO theme not X

Hi There,

Please try adding the following CSS:

.ilightbox-holder .ilightbox-container .ilightbox-caption {
    bottom: -50px;
    z-index: 9999999;
}
1 Like

Thank you Thai!
You are awesome!
Have a great day :smiley:

Maik

Glad we could help.

Cheers!