Html Widget

From unroole CMS wiki
Jump to: navigation, search

The Html widget gives you the ability to add any HTML/JavaScript/CSS desired in a page. This widget is mean't to be used by advanced users who are familiar with HTML/CSS/JavaScript syntax.


Due to the fact that the HTML widget directly injects HTML into the page being rendered it is possible to break a page. The widget does check that the HTML has valid XML structure when submitting however this dosen't prevent all errors. Some things to look out for:

  • When adding CSS, the style will apply to everything on that page. If you are using the Layout Editor this will also effect the style of the box frame and section, for example the "x", "+" button or the section indicator. Your CSS code may possibility effect these items and render them useless.
  • When adding JavaScript/CSS, although unlikely, you may break some functions of the Layout Editor, for example the drag and drop function.
  • When adding HTML code, proper XML is required. The widget will validate the code you entered, if you have invalid XML you will not be able to save.
One way to avoid these problems is to always target element specifically using the Layout Editor syntax or classes and ID's of your own choosing. For example in CSS use:
.box_class > a { color:red; }
instead of just
a { color:red; }
In case you break some of the Layout Editor's function you can still use the control panel to change back the code, these two panels will never be effected by your HTML/CSS/JavaScript. In some cases you may be required to reload the editor after making updates to broken code.


Html Widget Property.png

Property panel for Html Widget

In the Layout Editor, Html widget have these properties:

Name Description
HTML Content Enter any desired html code.

For global widget properties see Widgets