Difference between revisions of "Html Widget"
From unroole CMS wiki
| Line 3: | Line 3: | ||
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: | 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: | ||
| − | * 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. One way to avoid these problems | + | |
| + | * 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. | ||
| + | * When adding JavaScript, 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 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. | ||
{{clear}} | {{clear}} | ||
| Line 25: | Line 30: | ||
| HTML Content | | HTML Content | ||
| Enter any desired html code. | | Enter any desired html code. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
|} | |} | ||
| − | + | ''For global widget properties see [[Widgets#Common_Properties|Widgets]]'' | |
{{clear}} | {{clear}} | ||
Revision as of 17:47, 14 November 2012
For more information, see Widgets.
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:
- 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.
- When adding JavaScript, 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 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.
Properties
In the Layout Editor, Html widget have these properties:
| Name | Description |
|---|---|
| HTML Content | Enter any desired html code. |
For global widget properties see Widgets
