I get a LOT of questions from my users about how to use Igloo. Some of these questions are interesting enough to share widely. I'll try and remember to post some of the questions (and hopefully answers!) here.

Hidden widgets in the page editor

The Igloo page editor is very very flexible and usually easy to use. Sure, it can take a while a while to understand when to use an HTML widget vs. a Wiki widget or even remember all the different types of widgets available to use. But most of my users pick it up quickly and can make effective and clear pages.

But things become a lot harder when users have to start dealing with the tabs enhancement or hidden content.

As a page editor, the screenshot below doesn't tell you enough about what will appear on the page. Which of the two collapsed widgets are the "Forgotten tab?" What isn't being shown in the collapsed widgets?
In the screenshot above, there are 4 widgets:

You can get this information. You can open each widget, check the title and update it. This will make it visible if it is part of a tab. Hidden widgets are harder, but you can remove the hide attribute to see them.

But we can do better! Add this code to the Custom CSS box in the Appearance control panel:

The custom CSS to add:

/* In the page editor, show hidden widgets */
.widgetcontent:not(.previewwidgetcontent)>.hide,
.widgetcontent:not(.previewwidgetcontent)>div[style*="display: none"] {
  display: block !important;
}
/* Add a documentation class to show users what will happen */
.widgetcontent:not(.previewwidgetcontent) .ps-tab .ig-cpt-title {
  display: block; 
  background-color: #00000080 !important;
  color: white !important; 
  padding: 2px 15px;
  position: absolute;
  top: 0px;
  left: 0px;
  font-weight: bold;
}
.widgetcontent:not(.previewwidgetcontent) .ps-tab h2.ig-cpt-title {
  font-size: 16px !important; 
}
.widgetcontent:not(.previewwidgetcontent)>.hide:before,
.widgetcontent:not(.previewwidgetcontent)>.ps-tab:before,
.widgetcontent>div.ps-tab[style*="display: none"]:before {
  background-color: #00000080; 
  color: white; 
  padding: 2px 15px; 
  position: absolute; 
  top: 0px; 
  right: 0px; 
  font-weight: bold; 
}
/* Doc strings for various situations */
.widgetcontent:not(.previewwidgetcontent)>.ps-tab .ig-cpt-title:before {
 content: "Tab title: \"";
}
 .widgetcontent:not(.previewwidgetcontent)>.ps-tab .ig-cpt-title:after {
 content: "\"";
}
.widgetcontent:not(.previewwidgetcontent)>.hide:before {
  content: "hidden widget";
}
.widgetcontent:not(.previewwidgetcontent)>.ps-tab:before {
  content: "shown tabbed widget";
}
.widgetcontent:not(.previewwidgetcontent)>div.ps-tab[style*="display: none"]:before {
content: "hidden tabbed widget";
}
/* Show "disabled" background for visual clue */
.widgetcontent .hide .ig-cpt-body,
.widgetcontent>div[style*="display: none"] .ig-cpt-body{
  background: repeating-conic-gradient(#eeeeee 0% 25%, transparent 0% 50%) 50% / 40px 40px;
}

The final results

So what do you get for all this work?

Here is the same page in the editor:

And here it is with the [  Preview ] button clicked: