Center Icons in Tempera theme

Hi Tom,

I’m not quite sure what you mean by centering. Can you elaborate on what part of the gallery specifically you would like to be centered?

Can you link me to a page on your site where you are trying to make this work?

-Dan

Thanks for the reply.

I am redoing our club web site, trying to “spruce it up”. Most of the club’s communications are presented as PDFs. This includes items such as the club’s newsletter (“Trillium”) and membership directories. In searching for gallery tools to present photos and perhaps video I stumbled on your Document Gallery plugin. WOW! That’s just the ticket.

I finally figured out how to create PDF thumbnails and get them posted on the page. However, all of the icons are presented on the left of the page or display area. See the Trillium menu item on the my web site as mentioned in my prior post.

I investigated and tried the suggestions you gave in your posts in “Icons not in columns”. Didn’t work.

I talked with Mr. Google, who came up with other suggestions which didn’t have any effect either.

The only thing that made the column of icons move was to change

div.descriptions.document-icon-wrapper div.document-icon{
  max-width: 115px;
  padding: 0;
  padding-right: 3px;
  float: left;

to

float: right;

where the column moved to the right (as would be expected).

Since nothing else works, I wondered it the issue is how the theme Tempera handles icon placement etc.

I would like to place the column of icons down the center of the display area. It would be really (really, really) nice if the icons could be displayed in a matrix (2 x n, 3 x n…) based upon the width of the display area, but I guess this is the subject of a “wish list”.

Hopefully, I have presented my problem fully enough so you can understand what I am talking about.

Thanks for your efforts… Tom.

Tom,

I had to play with this a bit on my test setup to get something working, but this should do the trick:

.document-icon-wrapper.descriptions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Note that some older browsers will barf with this newer CSS, but this appears to be the best way to achieve what you are looking for.

Hope this helps and please take a moment to rate Document Gallery if you have found it helpful ??

-Dan

Hey Dan.

Worked great. The page looks much better with the center alignment. Thanks for your effort. I’m sure that this will act as a guide for many others looking for this type of solution.

As far as the matrix style display, I see that there is a function called Grid that looks like it would do the job, but that’s for another time.

As for the CSS3, I accessed the page from an older Mac Book running Safari 5.0. As expected, the formatting disappeared. One more reason to update your browse to more current version if possible. Opera on the same machine displayed correctly.

Again, exemplary support! Tom.