Hide Slideshow Nav buttons dark background

aliasant · September 18, 2014

This is driving me nuts.

I really need to get rid of the black squarish background on the slideshow nav buttons.
i also would like the arrows, play and fullscreen button to sit tighter to the image frame but htats for later.

Please help.

attachment.php?attachmentid=39677&stc=1&d=1411148174

attachment.php?attachmentid=39677&stc=1&d=1411148174

Here is the fix provided by Allen:

.sm-slideshow-fullscreen-button,
.sm-slideshow-nav .sm-button,
.sm-slideshow-play,
.sm-slideshow-play-pause
{
    background:none !important;
}

denisegoldberg · September 19, 2014

It would be easier to help with a link to your site (and to the pages where the offending buttons are shown).

--- Denise

aliasant · September 19, 2014

Of course. Thank you.
Site with problems: http://martinrodensjo.smugmug.com/

denisegoldberg wrote: »

It would be easier to help with a link to your site (and to the pages where the offending buttons are shown).

--- Denise

denisegoldberg · September 19, 2014

aliasant wrote: »

http://martinrodensjo.smugmug.com/

I didn't see a slideshow button in any of the galleries I viewed.

--- Denise

aliasant · September 19, 2014

denisegoldberg wrote: »

I didn't see a slideshow button in any of the galleries I viewed.

--- Denise

Hmm.

First page ( home) has a slideshow playing.
The back and forth arrows are far out on each side and then theres the Play/paus and fullscreen buttons as well.

When using a mobile the black background behind the buttons look awfull and they are quite bad in regular view too. I just want to get rid of the button background. Then I can add a simple shadow behind the buttons so that they are clearly visible even on light backgrounds.

aliasant · September 19, 2014

Here's a narrow view with all the buttons and their backgrounds.

Allen · September 19, 2014

aliasant wrote: »

Here's a narrow view with all the buttons and their backgrounds.

This should remove the background on all the buttons.

.sm-slideshow-fullscreen-button,
.sm-slideshow-nav .sm-button,
.sm-slideshow-play,
.sm-slideshow-play-pause
{
    background:none !important;
}

aliasant · September 20, 2014

Perfect. To simple I guess

Thank you!!

Allen wrote: »
This should remove the background on all the buttons.
.sm-slideshow-fullscreen-button,
.sm-slideshow-nav .sm-button,
.sm-slideshow-play,
.sm-slideshow-play-pause
{
    background:none !important;
}

aliasant · September 20, 2014

I was naive to think this would hide the backgrounds in Lightbox as well but it didnt.
Then I tried this but it didnt do the trick

/* remove lightbox button backgrounds */
.sm-lightbox-fullscreen-button,
.sm-lightbox-nav .sm-button,
.sm-lightbox-play,
.sm-lightbox-play-pause
{
    background:none !important;
}

Any ideas?

ExtraFantastic · June 5, 2015

Ever figure out the background issue in 'Lightbox'?

Thanks.

pilotdave · June 5, 2015

aliasant wrote: »
I was naive to think this would hide the backgrounds in Lightbox as well but it didnt.
Then I tried this but it didnt do the trick
/* remove lightbox button backgrounds */
.sm-lightbox-fullscreen-button,
.sm-lightbox-nav .sm-button,
.sm-lightbox-play,
.sm-lightbox-play-pause
{
    background:none !important;
}
Any ideas?

See if this works. It's a start:

.sm-lightbox .sm-lightbox-close, .sm-lightbox-nav {
background-color: rgba(0,0,0,0)!important;
}

Dave

ExtraFantastic · June 5, 2015

Thanks Dave.

That didn't seem to work for me.

This following snippet worked - for now anyway ; )

/* Removes background color from Nav buttons in Lightbox mode, etc. */
:root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel,
*:root * > .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button,
*:root * > .sm-user-ui .sm-lightbox .sm-lightbox-nav {
background-color: rgba(0, 0, 0, 0);
}

Hide Slideshow Nav buttons dark background

Comments