Improve widget drag n drop UI

CM1
1

I have couple of people asking me where exactly to drag n drop the widget/custom widgets… unfortunately the entire regions are all alike (1px dashed teal) all over - this applied to both available regions and locked regions. I decided to come up with better approach… for novice users. 

So what I did was, instead of using Percussion’s own CSS, I used my CSS to override Percussion’s CSS. I did intensive testing and it worked really well. Here is the screenshot of what I did and the only class I used was this:

// Improve Percussion drag n drop widget
.perc-region-puff.ui-droppable {border: 2px solid #33C9ED !important}

You’re welcome.

2

Aaron,

Thanks for the idea.  This one does look pretty simple for us to implement - although it looks like your CSS above would work in anyone’s theme.  Having not looked into the CSS, are you doubling the droppable regions or the locked regions?  I am assuming the droppable regions but just want to double-check.

-n

3

The solid line is for droppable regions. Sorry for the confusion.

See screenshot attached - you’ll notice the CM1 inserted their class dynamically in my theme so I used that dynamic class in my own css theme. 

I hope this makes sense.

If you add that class to CM1 then it will work on anyone’s theme. :slight_smile: