Last Updated:
December 13, 2021
by
Jesse Langstaff
| Version: 7
| 4,899 views
| 0 followers
members are following updates on this item.
Getting started with the HTML Content Widget
Introduction
The HTML Content Widget is the primary method of deploying a static, in-line custom stand-alone application to your Igloo.
Note: At this time there is no tooling to automate the deployment of HTML, CSS, and JavaScript for your stand-alone Igloo applications.
Note: It is strongly suggested to create your own Widget whenever possible. However, the HTML Content Widget is a good way to prototype widgets and test code before deploying a custom widget.
Architecture
An empty page that does not contain any widgets has a bottom div container of class ig-box (Fig. 2.2)
<!--
Empty ig-box container (no widgets present on the page)
-->
<div class="ig-box"> </div>
(Fig. 2.2) Empty ig-box container.
Dragging and dropping an HTML Content Widget onto an empty page, and publishing it without changing any defaults, will populate Fig. 2.1 with the following HTML structure (Fig. 2.3):
<!--
This is an empty HTML Content Widget
-->
<div class="ig-box">
<div class="ig-cpt ig-nooverflow ig-widget-type-html fr-view " style="background-color: #ffffff;border-color: #c3c3c3;border-width: 0px;border-radius: 0px;border-style: solid;">
<div class="ig-cpt-inner-1">
<div class="ig-cpt-inner-2">
<div class="ig-cpt-body" style="">
<div class="ig-widget-html editable" style="padding: 0px;">
<div class="ig-widget-html-content">
<!--
The custom HTML exists here
-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
(Fig. 2.3) ig-box container populated with an HTML Content Widget.
Selecting the Appearance tab of the HTML Content Widget, and typing a custom class name into the Class: field will alter line 2 of Fig 2.3, injecting the custom class on the div container of class ig-widget-type-html (Fig. 2.4):
<!--
This is an empty HTML Content Widget
-->
<div class="ig-box">
<!--
The custom class gets applied to this container
-->
<div class="ig-cpt ig-nooverflow ig-widget-type-html fr-view myCustomClass" style="background-color: #ffffff;border-color: #c3c3c3;border-width: 0px;border-radius: 0px;border-style: solid;">
<div class="ig-cpt-inner-1">
<div class="ig-cpt-inner-2">
<div class="ig-cpt-body" style="">
<div class="ig-widget-html editable" style="padding: 0px;">
<div class="ig-widget-html-content">
<!--
The custom HTML exists here
-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
(Fig. 2.4) The custom class gets appended to the .ig-widget-type-html container.
Classes
Most of the elements and selectors can be completely ignored. This table outlines important style information Developers should be aware of (Fig. 3.1)
Tip: You can save time by copy & pasting these classes directly into your project CSS file.
Note: If all you need to do is target the top container of your custom app (bottom-most container of the HTML Content Widget,) use the Effective Class below.
| Selector | Info |
|---|---|
| .ig-cpt.ig-nooverflow.ig-widget-type-html.fr-view | The top most container of the HTML Content Widget. If you are using a custom class, it will be appended to the end of this element classlist. |
| .ig-cpt-inner-1 | An inner container that can be ignored. |
| .ig-cpt-inner-2 | An inner container that can be ignored. |
| .ig-cpt-body | An inner container that can be ignored. |
| .ig-widget-html.editable | The last inner container before the custom content container. It can be ignored. |
| .ig-widget-html-content | The bottom most container where the custom HTML is contained. |
(Fig. 3.1) Table of HTML Content Widget class selectors.
Effective class
This is the CSS of the top level container of your custom application, the equivalent of <body> if you had control over the entire page (Fig. 4.1):
Tip: Think of .ig-widget-html-content as the canvas of your application, the below CSS is as if you were targeting the body {} of a simple HTML file.
/*
CSS for a custom stand-alone HTML Content Widget application
*/
.myCustomClass.ig-widget-html-content {
background-color: rgba(0, 0, 0, 0);
border-bottom-color: rgb(127, 127, 127);
color: rgb(127, 127, 127);
font-weight: normal;
height: 0px;
overflow-x: visible;
}
(Fig. 4.1) CSS of the HTML Content Widget bottom container.
Usage
Note: This guide is intended as a best practice, as anything the browser permits is possible. Developers with their own custom toolsets and coding techniques can safely deviate from the suggested usage framework. New Igloo developers are strongly encouraged to follow these guides to incorporate best practices into their build process.
The HTML Content Widget is applied through drag-and-drop anywhere use of the widget carousel is supported (typically while editing landing pages, pages, space, etc.)
Tip: Always keep your JavaScript as local as possible to your application. Avoid loading unnecessary JavaScript on every page through the Header and Footer by using the Advanced page instead.
Best Practices
Cascading Style Sheets (CSS)
If you are using more than one instance of an HTML Content Widget then you must remember to set a custom class on each one, and be specific in your CSS in the following manner (Fig. 6.1):
/*
Individually targeting multiple HTML Content Widgets that exist on the same page
*/
.htmlInstanceOne.ig-widget-html-content {
/* Custom classes here */
}
.htmlInstanceTwo.ig-widget-html-content {
/* Custom classes here */
}
(Fig. 6.1) Target HTML Content Widgets individually.
JavaScript (JS)
The following JavaScript is a good starting point to get directly to the custom content of the HTML Content Widget. This code is essentially the same as a user editing the HTML Content Widget, pressing the Code button in the WYSISYG editor, and either copying or pasting the contents manually (Fig. 6.2)
/**
* @description Access the custom inner content of an HTML Content Widget
*/
(function () {
// The widget itself
var _html = document.getElementsByClassName('ig-widget-html-content')[0];
// The inner custom HTML
var _content = _html.innerHTML;
// Output the custom HTML to the browser console
console.log(_content);
})();
(Fig. 6.2) Access the custom content of your HTML Content Widget
Viewed 4,899 times