Blogs

If you're with Liferay for a while, you may remember the past incarnations of this article, and have dutifully waited for this repost, adapted to the latest versions, 7.2 CE and DXP 7.2. ;)

What's it all about? When you drag&drop widgets on the page, you might expect a visual indicator for the possible drop zones (that depend on your page's layout):

The necessary CSS still works just like in chapter 4. No change necessary. But as there are always new people coming on board, you might not have seen the old chapters. Granted, the effect is still slightly ugly, but it works. You may ask me to make it look different - just don't ask me to make it look beautiful. Contributions to make it prettier are always welcome, for inclusion in the next version of either the product, or this blog article series. ;)

If you want to see the same in your installation, just add the following CSS to your pages, or to your theme:

.portlet-dropzone {
  transition: padding 0.5s linear;
}

.yui3-dd-drop-active-valid .portlet-dropzone {
  outline: 1px dotted black;
  padding: 10px;
  margin: 3px;
  min-height: 100px;
}

You might also want to vote for LPS-40571 and LPS-53664 to get this feature out-of-the-box (again).