Document description below title?

Hi bluemi!

If I get it right the same issue was brought up sometime before. Much water has flowed under the bridges since then ?? Document Gallery has considerably evolved and our suggestion also has changed a bit. I see there is no need to guiding You where to put the stated CSS, but for the sake of not that advanced users.

Given below CSS should be pasted in the Custom CSS textbox at Dashboard -> Settings -> Document Gallery:

.document-icon-row.descriptions {
   vertical-align: top !important;
   display: inline-block;
   width: calc(100% / 6 - 1%);
}
.document-icon-row.descriptions .document-icon {
   float: none !important;
   width: 100% !important;
   margin: 5px auto 0px;
   display: block;
}
.document-icon-row.descriptions p {
   font-size: xx-small;
   text-align: justify;
}

As the descriptions option (while being set to true) prevents Document Gallery from utilizing columns value, You should set it Yourself by editing line width: calc(100% / N - 1%); where N – is the number of items in a row.

Hope this will do the job.

Thanks a lot, demur. Much appreciated! This already looks good. Now what would be the best way to get the thumbnails bigger? Let’s say maximum width 250px?

To achieve that You should add

max-width: 253px !important;

to the .document-icon-row.descriptions .document-icon block and append this block

.document-icon-row.descriptions img {
   width: 250px !important;
}

Wonderful. Thanks again!

I was looking for this solution but need a little different approach. I want the thumbnails to appear to the left an the title and description text to the right of the thumbnail but in line with in from the top. I want it to be a single row per item.

Any ideas?

Thanks,

• This reply was modified 8 years, 5 months ago by reelaxmedia.

I just managed to do the same. Paste this in the custom css in the plugin settings:

.document-gallery .document-icon .title {
text-align: left;
float: right;
position: absolute;
padding-top: 0px;
padding-left: 80px;
font-size: initial;
max-width: 35%;
line-height: 140%;
}
.document-gallery .descriptions.document-icon-row img {
float: left;
}
.document-gallery {
   border-top: 1px solid #abadb0;
   padding-top: 2px;
   padding-bottom: 2px;
}
.document-gallery .document-icon-row {
   border-bottom: 1px solid #abadb0;
   padding-top: 5px;
   padding-bottom: 10px;
}
.document-gallery p {
   margin-left: 40%;
   line-height: 140%;
   padding-top: 0px;
}

You may to adjust some settings, but I thought it will help you in the right direction.

Cheers

Peter

Thanks a lot Peter!!! It worked like a charm! I did have to adjust some settings but it now looks beautiful!

Thanks!