Jump to content


This topic is now archived and is closed to further replies.


How was the gridly -image grid on the DMS homepage done?

Recommended Posts


[attachment=1929:Screen Shot 2014-01-28 at 12.53.24.GIF]

How was this section made? Shortcodes? Some custom section? Just writing HTML? Some section bought from the pagelines store..?


We have:

<div class="item pl-animation pla-group animation-loaded">
  <a class="thumb" href="http://www.pagelines.com/shop/themes/headlines/"><img src="http://cdn.pagelines.com/wp-content/uploads/2013/11/headlines.jpg"></a> 
  <a href="http://www.pagelines.com/shop/themes/headlines/" class="call-to-action">View Theme</a>

And we have:

.gridly-wrap .item {
  1. width100%;
  2. displayinline-block;
  3. positionrelative;
  4. overflowhidden;
  5. max-width340px;
  6. max-height200px;
  7. background#000;
  8. -webkit-border-radius4px;
  10. border-radius4px;
  11. -webkit-box-shadow0px 0px 5px #888;
    -moz-box-shadow0px 0px 5px #888;
  13. box-shadow0px 0px 5px #888;
What's 'gridly-wrap'?


Share this post

Link to post
Share on other sites
James B

Hi there, the animated section at the base of the homepage is It's not using the gridly section but a custom section for PageLines.com, this hasn't been released commercially.


The item at the bottom of the pro list page is a custom section but can be easily recreated in dms using custom css, just placing a column in the middle of the page with the content inside and applying a shadow affect to the border of the container.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites