Is there any documentation that defines out the HTML Structures of your widgets? I’m in the process of producing our own UI Framework, and would like to create my own styling for some of the widgets CM1 provides, but I need to know the HTML structure (along with classes) for the widgets.
I’d rather not have to go through adding each widget to the page first, then looking at the html it generates as it’s more time consuming.
Thanks.
Hi Paul,
Due to serious upgradability and supportability concerns, we cannot support custom modifications to the UI. That being the case, no, we don’t have and reference documentation relating to the HTML structure of our widgets for such purposes. Sorry I couldn’t be of more help here.
I’m confused then, as your documentation for the breadcrumb widget specifically gives one a CSS class box to apply our own custom css modifications to the widget, from: https://help.percussion.com/percussion-cm1/manage-content/widgets/breadcrumb-widget/indexpage:
"Widget Style Properties
CSS Root Class - A text box in which you can enter a CSS class that you want to apply to the rendered content. Your site designer can provide you with the class name.
"
This is specifically allowing users to modify the look and feel of your widget.
So, just to confirm, Percussion gives users an easy way to custom modify the UI of your widget, but won’t provide better documentation so that we can more easily design our custom modifications. Is this correct?
Paul,
I may have totally misunderstood you. You said you’re producing your own UI framework, and I took that to mean you’re making modifications to the CM1 UI itself. If you’re simply looking to modify the styling of the widgets as they appear in their respective pages when published, then yes this is completely supported.
That said, I still might come up a bit short here, because we don’t have any documentation explicitly detailing the HTML structure of all of our widgets. The recommended approach, one that web developers are comfortable and have been happy with, is to drop the widget onto the page, and then open that page in Preview and use a tool such as Firebug to toy around with the CSS styling until it looks right, and then copy the final CSS rule set(s) into your global style sheet.
Sorry, yes, when I said a “UI Framework” I meant a general framework for our organization so that our published pages will have similar look and feel, but not necessarily look like the percussion default styling for widgets.
Yes, that is disappointing and will be more time consuming to have to do it the way you suggest. I was hoping you would have it documented “somewhere” that you could allow me to see it. I mean, I’d imagine your developers/designer must have it documented internally. Is there not a way you could make such documentation available to me?
It’s been my experience whenever I’ve used widgets/controls by 3rd-parties they’ve had documentation that specifically defines the HTML structure that their widgets/controls generate, so you not having it is definitely surprising to me.
Paul, no need to apologize. What you said made perfect sense, I just happened to be working on another issue at the time that had me thinking along those lines when I saw your post.
The only documentation we have on this subject, both internally or externally, is for the Navigation widget:
https://help.percussion.com/percussion-cm1/design/navigation/navigation-widget/index
Otherwise, we’ve always found dev tools like Firebug for Firefox or the tools built into Chrome to be a great way to reference CSS classes, develop new styling, and test new styling all in one place.
I’m sorry I can’t help you with this beyond that general recommendation. We’re always looking to expand our Help site, though, so this feedback will certainly be taken into consideration.
Thanks for the quick responses. I guess I’ll just have to make do for now.