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
    effect.

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


    gravatar
    Cal Palmore
    October 31, 2014 at 7:39 pm

    The discussion is now public.


    gravatar
    Mark Ellis
    November 2, 2014 at 8:41 am

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

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

    My Twelve trail slideshow is at the bottom of this page
    http://www.dorsetdog.com/galleria-slide-trial-in-google-sites

    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


    gravatar
    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.


    gravatar
    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
    page http://www.dorsetdog.com/galleria-slide-trial-in-google-sites


    gravatar
    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.io uses cookies to store information. You can read more about that in our Privacy Policy. I understand