Remove shading on lightbox caption font

colinpurrington

Could somebody help me get rid of the shadow around the text? Here's the pic.

Hikin' Mike

That should take care of it...

/**
* Removes Text Shadow in Lightbox
****************************************************/
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p, {text-shadow: none;}

colinpurrington

@Hikin' Mike Unfortunately it did not. Is it possible that other CSS code undermines that code? I'm still stumbling through this, so it might be the case that I have code below that I don't even need. Thanks a million.

/**
* Removes Text Shadow in Lightbox
****************************************************/
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4,
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p, {text-shadow: none;}

/*Adding border to lightbox image*/
.sm-user-ui .sm-lightbox-v2-photo {
    border: 1px solid black;
}

/*Adding transparency to side panels*/
.sm-user-ui .sm-lightbox-v2-navbar {
    background-color: #17171a2e;
}

/* Removes "Shadow" */
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

/* Displays Captions All of the Time */
.sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

/*Changing font size and color of TITLE*/
.sm-lightbox-v2-photo-title .sm-button-label h2 {
    font-size: 26px !important; /*This code will change the font size of TITLE*/
    color: #000000 !important;  /*This code will change the font color of TITLE*/
}

/*Changing the font size and color of CAPTION*/
.sm-lightbox-v2-photo-title .sm-button-label p {
    font-size: 18px !important; /*This code will change the font size of CAPTION*/
    color: #000000 !important;  /*This code will change the font color of CAPTION*/
}

/*
8. Render title and buy button below image on desktop
& tablet landscape viewports.
*/
@media screen and (min-width: 961px) {
.sm-user-ui .sm-lightbox-v2-content {
height: calc(100% - 72px);
}

.sm-user-ui .sm-lightbox-v2-photo-buttons {
padding: 0;
bottom: -60px;
}

.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim {
background: none;
}

Lille Ulven

@colinpurrington if you remove the comma before the "{" in this line:
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p, { text-shadow:none}
it should play along with your wishes

Good luck

Lille Ulven / Wiebke

Hikin' Mike

@Lille Ulven said:
@colinpurrington if you remove the comma before the "{" in this line:
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p, { text-shadow:none}
it should play along with your wishes

Good luck

Lille Ulven / Wiebke

I was going to say, I know it works because I tried it. I originally had the first line of code as the last, hence the extra comma. That's what happens when you do something quickly before you go to bed...lol!

Thanks @Lille Ulven !

Lille Ulven

No problem, @Hikin' Mike - you just started adding some tests, when helping others, to see if I understand CSS by now well enough to find typos

colinpurrington

@Hikin' Mike @Lille Ulven Thank you both!