• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Pinterest like list

OndrejH

Member
There were questions about how to make simple css pinterest like styling of the list.
Let me share few lines of code what works for me - based on div template (/www/components/com_fabrik/views/list/tmpl/) .
Sample code is attached.
3 columns 3column.png
2 columns 2column.png
4 columns 4column.png

Enjoy fine tuning. Any comments on potential improvements are welcome.
 

Attachments

  • default RENAME.php.txt
    1.5 KB · Views: 257
  • default_row RENAME.php.txt
    579 bytes · Views: 246
  • pinterest_like.css.txt
    1.8 KB · Views: 297
Hi Chozma,

Thank you for your like on this one.
I have few more lines of advice. Image width should be set exact or wider than total width divided by the lowest number of columns (set the value in css code) so it would always be displayed to fit to the width of box.
Images are not uploaded by ajax. Uploading more than one file (by ajax) would throw <li> list and that would disable use of css. Responsiveness of columns is also set by css. I did few little changes in that piece of code:
 
Code:
/* CSS-Only Pinterest Style Columns Layout */
/* http://cssdeck.com/labs/css-only-pinterest-style-columns-layout */
/*
body {
    background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}*/
 
 
#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}
 
#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}
 
.pin {
    display: inline-table;
    background: #FEFEFE;
/*    border: 2px solid #FAFAFA; */
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;
   
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
 
.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
 
.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
    margin-bottom: 15px;
}
 
@media (max-width: 599px) {
    #columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
 
@media (min-width: 599px) {
    #columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
 
@media (min-width: 770px) {
    #columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}
 
@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}
 
@media (min-width: 1200px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top