Announcement

  •  » Extensions
  •  » Theme stripped-galleria thumbnaile size

#1 2013-01-20 20:53:10

mrk
Member
2013-01-20
23

Theme stripped-galleria thumbnaile size

I made some enchantments to stripped-galleria css. With other things I moved thumbnailes away for much cleaner wiew. You can try it yourself (this looks better with black version)
Problem is that now when thumbnails are away from view I want them much bigger. At the moment the thumbnails size is so small tahat it seems to be intended not for human use...
I cant do this with CSS so is it possible at all?

.galleria-image img {
    border: 0px solid #000000;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    margin: 9px 0px 5px 0px;
    /*padding: 25px;*/   /*not usable before image size fix*/
  box-shadow:  0 0 20px rgba(255, 250, 250, 0.6), 0 0 20px rgba(255, 250, 250, 0.7) inset;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.7) inset; /*inset is for padding settings only*/
  display: block;
}

.galleria-thumbnails img {
    border: 0px solid #000000;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    margin: 0px;
    padding: 0px;
}

.galleria-thumbnails-container {
  bottom: -4% !important;transition: bottom 1s ease-out 0s;/*not so good, % does not work well in different size monitors !important is used for IE*/
  }
.galleria-thumbnails-container:hover {
  bottom: 0 !important; /*again, !important is for IE*/
  }
.galleria-stage {bottom:3% !important;}
.galleria-info {visibility: hidden;}

.thumbnailCategories li, .thumbnailCategories li:hover, .stuffs_block .personal_block ul.thumbnailCategories li, .stuffs_block .personal_block ul.thumbnailCategories li:hover, .subcontent .stuffs_block .personal_block ul.thumbnailCategories li, .subcontent .stuffs_block .personal_block ul.thumbnailCategories li:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.7) inset; /*inset is for padding settings only*/
  display: block;
}
.ats .thumbnailCategory .illustration {
    margin: 15px 0 0;
}
.ats .thumbnailCategory .description {
    height: auto;
}

Offline

 

#2 2013-01-20 22:56:19

flop25
Piwigo Team
2006-07-06
6918

Re: Theme stripped-galleria thumbnaile size

Hello
thx for sharing : do you have a live example?

For the picture size I read http://piwigo.org/dev/browser/extension … ls.tpl#L18 $stripped.thumbSize which means that you might have already options for that


To get a better help : Politeness like Hello-A link-Your past actions precisely described
Check my extensions : more than 30 available
who I am and what I do : http://fr.gravatar.com/flop25
My gallery : an illustration of how to integrate Piwigo in your website

Offline

 

#3 2013-01-26 17:27:05

Zaphod
Piwigo Team
2006-11-13
441

Re: Theme stripped-galleria thumbnaile size

You can try something like this in CSS:

Code:

.galleria-thumbnails .galleria-image {height:80px;}
.galleria-thumbnails-container {height:90px;}
.galleria-stage {bottom:120px;}
.galleria-carousel .galleria-thumb-nav-right,
  .galleria-carousel .galleria-thumb-nav-left {margin-top:20px;}

The values I propose here are just examples.

80px -> The height of each thumbnail
90px -> The height of the thumbnail strip (5px margin top & bottom)
120px -> The total margin below image (that makes 30px more margin)

The last one is needed to center approximately thumb arrows in the thumbnail strip.

Offline

 

#4 2013-01-26 19:17:18

mrk
Member
2013-01-20
23

Re: Theme stripped-galleria thumbnaile size

Thanks

Fixed my layout - goal was to hide everything but image. Thumbs are out of site now but still usable.
If somebody would know how to make thumbnails scroll not with clik but with hover would be nice :)
And of course If somebody wants save his time CSS is here...

.galleria-image img {
    border: 0px solid #000000;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    margin: 9px 0px 5px 0px;
    /*padding: 25px;*/   /*not usable before image size fix*/
  box-shadow:  0 0 20px rgba(255, 250, 250, 0.6), 0 0 20px rgba(255, 250, 250, 0.7) inset;
  -webkit-box-shadow: 0 0 20px rgba(255, 250, 0, 0.6), 0 0 20px rgba(255, 250, 250, 0.7) inset; /*inset is for padding settings only*/
  display: block;
}

.galleria-thumbnails img {
    border: 0px solid #000000;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    margin: 0px;
    padding: 0px;
}

.galleria-thumbnails-container {
  height:120px !important;
  bottom: -75px !important;/*!important is used for IE*/
  transition: bottom 1s ease-out 0s;
  -webkit-transition: bottom 1s ease-out 0s;
  }
.galleria-thumbnails-container:hover {
  bottom: 0 !important; /*again, important is for IE*/
  }

.galleria-thumbnails .galleria-image {height:85px!important;}
.galleria-thumbnails-list {bottom: -20px;}
.galleria-stage {bottom:20px !important;}
.galleria-info {visibility: hidden;}

.thumbnailCategories li, .thumbnailCategories li:hover, .stuffs_block .personal_block ul.thumbnailCategories li, .stuffs_block .personal_block ul.thumbnailCategories li:hover, .subcontent .stuffs_block .personal_block ul.thumbnailCategories li, .subcontent .stuffs_block .personal_block ul.thumbnailCategories li:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.7) inset; /*inset is for padding settings only - not in use here*/
  display: block;
}

Offline

 

#5 2013-01-26 22:24:47

Zaphod
Piwigo Team
2006-11-13
441

Re: Theme stripped-galleria thumbnaile size

If you want more information on how galleria works, you can check this site:
http://galleria.io/
I just used their script...

You will see that there are other themes (that are not free, the one I used is the only free & open source one).
There is also a support forum where you can take some hints on how to customize it.

Offline

 
  •  » Extensions
  •  » Theme stripped-galleria thumbnaile size

Board footer

Powered by FluxBB

github twitter facebook google+ newsletter Donate Piwigo.org © 2002-2019 · Contact