Difference between revisions of "Html Widget"

From unroole CMS wiki
Jump to: navigation, search
 
Line 2: Line 2:
 
{{for|more information|Widgets}}</noinclude>
 
{{for|more information|Widgets}}</noinclude>
  
Html Widget gives you the ability to add any HTML/JavaScript/CSS desired in a page. Although this widget give you great possibility for customization, you need to be very careful when using it. Some of the things to look out for:
+
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.  
  
* When adding CSS, its 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.  
+
{{clear}}
* When adding JavaScript, although unlikely, you may break some functions of the [[Layout Editor]], for example the drag and drop function.
+
 
 +
== Warnings ==
 +
 
 +
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.
 
* 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 as specific as possible, 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 and the top panel to easily change back the code, these two panels will never be effected by your HTML/CSS/Javascript so you always have a backup in case you did something wrong.
+
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: <code><pre>.box_class > a { color:red; }</pre></code> instead of just <code><pre>a { color:red; }</pre></code> 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.
  
 
{{clear}}
 
{{clear}}
  
 
== Properties ==
 
== Properties ==
In the [[Layout Editor]], Html widget have these properties:
 
 
{{Css Image Crop
 
{{Css Image Crop
 
   |Image = Html Widget Property.png
 
   |Image = Html Widget Property.png
Line 22: Line 27:
 
   |Description = Property panel for Html Widget
 
   |Description = Property panel for Html Widget
 
}}
 
}}
 +
In the [[Layout Editor]], Html widget have these properties:
  
 
{| class="wikitable"
 
{| class="wikitable"

Latest revision as of 18:03, 21 November 2012

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.

Warnings

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.

Properties

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