Your Cart

Change color and opacity of thumbnails background

These forums are now closed to new replies / tickets.

Please open a support ticket from our new Support page.

Front Page Forums Questions Change color and opacity of thumbnails background

  • gravatar
    Cal Palmore
    October 30, 2014 at 10:45 pm

    In the twelve theme I would like to change the background of the
    thumbnails window so that it is no longer transparent and it has a
    specific color.
    I tried putting this in the body but it seems to have no

    .galleria-thumbnails-container{ background: black; opacity: 1 }

    Cal Palmore
    October 31, 2014 at 7:39 pm

    The discussion is now public.

    Mark Ellis
    November 2, 2014 at 8:41 am

    Cal, go into the galleria.css file and search for

    Play with those settings and add settings to get the effect you

    My Twelve trail slideshow is at the bottom of this page

    If you use Firebug in Firefox web browser, it will help you to
    identify which area of galleria is called what to help you change
    the right css code

    Cal Palmore
    November 6, 2014 at 5:53 pm

    I found out the background for the thumbnails container comes
    from the bg-png file in the themes/twelve directory. You can use a
    photo editor to fill this bg-png file with a solid color to change
    the background for the thumbnails. I assume that if your photo
    editor supports transparency for png files, you could also create a
    level of opacity other than 1.

    Mark Ellis
    November 19, 2014 at 8:53 am

    In my galleria.twelve.css file is

    .galleria-thumbnails-container { position: absolute; top: 0;
    left: 0; width: 0; height: 0; background: #ffc; opacity: .9;
    z-index: 2; }

    This background:#ffc; code sets the background colour for the
    thumbnail container on the Twelve slideshow at the bottom of this

    Cal Palmore
    November 19, 2014 at 3:30 pm

    Thanks Mark. Your solution works great. But I wanted to leave
    the galleria distribution files alone, so I modified my own html
    file to accomplish the same thing. I just put this in the head of
    my html file:

    body .galleria-theme-twelve .galleria-thumbnails-container {
    background: #eee; opacity: 1; }

Galleria uses cookies to provide necessary site functionality. By using our website, you agree to our Privacy Policy. I understand