Support » Plugin: Document Gallery » Document description below title?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author demur

    (@demur)

    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?

    Plugin Author demur

    (@demur)

    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!

    reelaxmedia

    (@reelaxmedia)

    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,

    dxfoxd

    (@dxfoxd)

    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

    reelaxmedia

    (@reelaxmedia)

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

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Document description below title?’ is closed to new replies.