Seriously, the Designer drag and drop is killing me. I understand how it works and why, and I can see this for the general non- web design/developer user. But it just doesn’t work for me as a web designer.
The only route I can find to properly get my design/theme to work with the Designer view is to put just about all of my html into the “Code insert after body start” and the “Code insert before body close”.
I’ve attempted to recreate my layout within the Designer view by dragging and dropping, but it doesn’t work well because of the extraneous DIVs and classes the system adds.
For instance I simply wanted to put an html list (html:
…
) of my own at directly under a div region, but the only way I could do this was to either add an HTML widget or a Rich Text Widget, both of which wrap container divs to whatever content you then put in them.
I was thinking if you guys could provide some type of additional “Source” Editor view when designing, so us advanced users could edit the source, that would probably achieve giving us full control of the design (albeit you’d obviously have to provide certain documentation that explains how to maintain ID’s and classes so that it does not “brake” how percussion reads the design templates…)
Maybe my current way is best for me anyway, as I’ll be managing the template’s design (portion the end user will not be able to edit) outside of CM1 anyways…
This also makes it cleaner for when the end user goes to edit content, as they won’t be as confused since the view only shows a single container region for them to put stuff into.
What kind of issues are you running into with regards to getting the design in CM1? When you add a widget, it does get wrapped with a DIV and you have access to add a class to that div, which will allow you to style the items in there, in the example of your list. You can access this by going to the Style tab and opening the widget configuration dialog.
When you are in Edit mode, there is even more “mark up” that appears, if you try to inspect the page, to allow for the drag and drop interface, but not all of that gets published out. There are, however, extras that are published to serve as placeholders and reference points for the drag and drop interface to function correctly.
If you’re having difficulty with getting the design in, or are encountering areas where the styles break, we might be able to help provide guidance on here that might make it snap in a little better.
Some of the specific Design view issues that I’ve run into:
I’ve attempted to do these things in both Google Chrome and Firefox latest versions…
One issue i have is sometimes, after applying one of my classes to a div region area, I then try to drag and drop another div region or widget inside the previous and it won’t let me as it does not give the “lit up green area” indicating I can drop the div…
I’ve attached a screenshot to show.
Another issue is sometimes also I’ll add a new region to the design and then it simply does not let me select the region at all. On this particular design, I have a specific div region as a top bar that is a fixed position. I then tried to add a region below it, and while it let me drop it, afterwards I could not select it. Using the Explore Regions I could select the name of the region, but when doing so, it did not actually select the region on the page… therefore I could not access it to do anything.
Yet another issue is when I adjust a div region’s properties on the Layout tab, it sometimes makes the whole design layout disappear. I have to then either Cancel or Save, click on the Content tab, and then back on the Layout tab to get it back…
Do you have any javascript references added as well or is it just CSS being used? Also, aside from the look being completely different, what happens if you select the Percussion theme instead of your custom theme, performing the same actions?
yep that was it, I had my own javascript jquery reference, so it was probably conflicting. once I removed it, it worked as far as fixing #1 above. #3 is still an issue. haven’t determined if #2 is still an issue or not yet.
Issue #3 is an odd one. What browser are you experiencing this behavior in? If you haven’t already, I would be curious to know if performing the same actions in other browsers causes the same issues.
I am going to create a support ticket for us so you can share with me your template and theme files so I can see if I can identify what is causing this behavior. Please check your inbox momentarily for that notification.
For other customers experiencing this issue of content disappearing when adding or editing regions, it does appear to be a glitch in the CM1 UI isolated to when you include visible content in the template’s meta-data. When the layout tab’s window refreshes after adding or editing a region, visible content entered into the additional body content boxes of the template’s meta-data does not get reloaded properly.
The content is still in the system, but it only reappears after toggling back and forth from Content to Layout. Typically customers use the additional body content boxes for JavaScript and other non-visible content, so that is why this quirk wasn’t previously identified. I have filed a bug report for this issue and it should be resolved in a future release.
