Hide Slideshow Nav buttons dark background

aliasantaliasant Registered Users Posts: 7 Beginner grinner
edited June 5, 2015 in SmugMug Customization
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

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;
}

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited 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
  • aliasantaliasant Registered Users Posts: 7 Beginner grinner
    edited September 19, 2014
    Of course. Thank you.
    Site with problems: http://martinrodensjo.smugmug.com/

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

    --- Denise
  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited September 19, 2014
    aliasant wrote: »
    I didn't see a slideshow button in any of the galleries I viewed.

    --- Denise
  • aliasantaliasant Registered Users Posts: 7 Beginner grinner
    edited September 19, 2014
    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.
  • aliasantaliasant Registered Users Posts: 7 Beginner grinner
    edited September 19, 2014
    Here's a narrow view with all the buttons and their backgrounds.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited 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;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • aliasantaliasant Registered Users Posts: 7 Beginner grinner
    edited 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;
    }
    
  • aliasantaliasant Registered Users Posts: 7 Beginner grinner
    edited 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?
  • ExtraFantasticExtraFantastic Registered Users Posts: 13 Big grins
    edited June 5, 2015
    Ever figure out the background issue in 'Lightbox'?

    Thanks.
  • pilotdavepilotdave Registered Users Posts: 785 Major grins
    edited 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
  • ExtraFantasticExtraFantastic Registered Users Posts: 13 Big grins
    edited 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);
    }
Sign In or Register to comment.