Ben's tips: Hidden widgets in the page editor
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:
7 Replies
This extra bit of CSS will make the page's class values show up too:
This is what the final version looks like:
Benjamin Kahn - The improved display is, in fact, very helpful. Two questions:
- How does continuing to add CSS like this affect page load times and overall site performance and responsiveness? (Lately, it seems like we've been having to add a lot of custom CSS code to our environment to get the product to do things that seem like they should be basic product enhancements.)
- Is there a reason this isn't standard to the product, rather than something that needs to be added as custom code?
Rachel MarcusKaren Rogers Those are fantastic questions! I'm not sure my answers will do them justice, but I can take a shot!
First, the cost of CSS. This is a huge topic and there are lots of resources around on the web. Here are some good resources I read:
border-radius
box-shadow
opacity
transform
filter
position: fixed
https://moz.com/learn/seo/page-speed
As for why this isn't available in Igloo proper? They didn't think of it? I've been impressed with Igloo thus far. I love the monthly releases and how responsive the company is to suggestions. If you like this change maybe ask them to add it to the product?
FWIW, we're still testing these changes on our Igloo deployment and haven't made them generally available yet to users; we could still find bugs or problems this "quick fix" introduces.
Benjamin Kahn Your post had such an air of authority about it, it wasn't until I was on a call with our Igloo TAM this morning that I discovered you're not an Igloo guy, but a customer! So, my apologies—those questions were on the assumption that you're with Igloo.
Thank you so much for sharing what you learned. It looks very helpful!
Karen Rogers, Ha! Sorry about that. I don't mean to impersonate an Igloo employee!
These posts are just documenting my exploration through the platform. Many tools I use are very locked down and don't allow this amount of experimentation.
FWIW, if Igloo does implement this visual style in their page editor, they'll be able to do it using back-end code which should be simpler and lighter than what I did above.
Is there a way to hide a Site Map Widget on a Page from users with Read permissions?