TOC Boxes 1.1.1 Released
A minor update of my TOC Boxes plugin is out. Besides fixing some small glitch, it adds the CSS class toc-anchor to the generated named anchors.
These anchors are inserted into the post to serve as link targets for links in the TOC box, and are (usually) invisible. The change mainly affects themes with unusual CSS styling for anchors in general, such as mentioned in my discussion with Daniel Nautré.
How To Auto-Collapse TOC Boxes
I’m writing this article in response to a question I’ve got recently, the answer to which I believe will be of general interest.
And the question is:
How to make automatically collapsed TOC boxes.
Widget Voodoo 1.0.2 Release
A minor update of Hackadelic Widget Voodoo is out. It fixes an issue with the Tag Cloud widget (and probably with others, too).
At the same time, I’ve corrected an “impurity” in the assignment of CSS classes, where the “collapsible” was attached to the title, instead the widget itself. Please change your CSS clauses Read more >>
Widget Voodoo Configuration Tutorial Reanimation Attempt
According to feedback I’ve received, viewing the Widget Voodoo Configuration Tutorial was apparently problematic. I’m not even sure if anybody at all could watch the screencast, except myself. (I’m afraid that could well have been the case, though only view people complained, compared to the number of visitors.)
While the reasons for the issue remain a mystery, I decided to move the screencast away from googlecode, where I used to host it before.
Dear visitors, I’ll ask you for a favor. Please drop me a note whether you can watch the screencast or not. Thank you for your help.
Shadowchase Continued – Is There A Bug In PHP Regular Expression Handling?
The recent “Shadowchaser Release” of Sliding Notes brought – among other features – compatibility with the “Shadowbox JS” plugin.
I’ve just came across another shadow-something1 that seemed to cause trouble.
I investigated the issue, and I’ve found out some interesting things.
- Anything that uses the Shadowbox.js script [↩]
Widget Voodoo CSS Selectors Power
I’m writing this post with a clear sense of pride about having chosen CSS selectors as “configuration syntax” for Widget Voodoo. The power and flexibility of the approach over other other, more limitting approaches is amazing.
Thank to this power, it was a “piece of cake” to resolve a help request on how to collapse al widgets at oncel I’ve got recently.
Widget Voodoo PlugIn Released
I’m proud to present the first public release of the “voodoo” that recently made all my sidebar widgets collapsible.
The plugin homepage gives a thorough overview of the features offered.
Downloads as usual at wordpress.org (as soon as they update the page).
Widget Voodoo
Here’s the fourth in series of Hackadelic Plugins: Hackadelic Widget Voodoo. It can morph your sidebar widgets into cool, collapsible, AJAX-type citizens.
Though merely more but a case study (yet), it already does a good job for me (see it live in action in my sidebars). I hope it will for you, too.
Download Hackadelic Widget Voodoo
[toc class=toc-right]
Recent Releases
Overview
- After successful installation and configuration, all your widgets will be collapsible with a click on their title.
- You can specify auto-collapsed widgets.
- You can style pretty much everything via CSS. (That’s what I did here, too.) See chapter “Styling” for details.
- Preconditions for operation are highly theme-specific, but you can adapt the plugin to your theme without touching theme files – at least in most cases.
- A probably pretty unique feature: The back-end analyzes your theme and other configuration to provide sensible setting suggestions. In most cases, you won’t even have to look at your theme’s files.
Installation
The first stage is standard procedure, as for any plugin:
- Unpack the plugin archive into wp-content/plugins.
- Activate the plugin.
But, you probably won’t see any effect yet now!
Proceed with configuration.
Configuration
After installing, you need to tell the plugin what your widgets are. I’ve prepared a little Tutorial on Widget Voodoo Configuration Basics. Check it out before proceeding.
Under some circumstances, you’ll need to tweak your theme a bit in order to make the “widget voodoo” work. The Widget Voodoo Theme Tweaking Manual provides detailed instructions on that.
Now you would probably still see no visible effect, but clicking on your widget titles should collapse the widget (or expand it, if it was collapsed) Now we step on into making the whole look fancy.
Styling
As usuall, there is much you can do to adjust the appearence to your likings. I use the following CSS to style up my widget titles:
.widget.collapsible .widgettitle {
text-align: center;
height: 24px;
-moz-border-radius: .6em; -webkit-border-radius: .6em;
cursor: pointer;
}
#sidebar-left .widget.collapsible .widgettitle {
background: url(/i/bg/widget-title-bg-open.png) top left no-repeat;
margin: 1em 2px .25em -6px;
}
#sidebar-left .widget.collapsible .widgettitle:hover,
#sidebar-left .widget.collapsible .widgettitle.collapsed:hover {
background: url(/i/bg/widget-title-bg-hover.png) top left no-repeat;
}
#sidebar-left .widget.collapsible .widgettitle.collapsed {
background: url(/i/bg/widget-title-bg-closed.png) top left no-repeat;
}
#sidebar-right .widget.collapsible .widgettitle {
background: url(/i/bg/sidebar-button-bg-1.png);
margin: 1em -14px .25em -12px;
}
#sidebar-right .widget.collapsible .widgettitle:hover {
background: url(/i/bg/sidebar-button-bg-2.png);
}You already know widget and widgettitle from the configuration. Here’s what the clauses do:
- The first clause styles widgets titles that are collapsible.
- The second makes collapsible widget titles change when the mouse is over them, to indicate “clickability”.
- The third denotes the widget body – in case you want to style collapsible widget bodies differently then static. (I didn’t, obviously.)
- The fourth and the fifth individually fine-tune the styling for the left and right bar, respectively .
You are welcome to take the above CSS as a starting point for your tuning.
Limitations
Only real widgets with a non-empty title are affected. Widgets with no title will remain static (until you give them a title). Also, “pseudo-widgets” that are built into the sidebar by default (that is what you see before adding any widgets) are not affected, either.
The RSS syndication widget doesn’t lend itself well for this. The way it displays its title makes it difficult to style appropriately.
The configuration is, admittedly, somewhat challenging, as it may require a slight modification of theme code. (Ugly, I know. If you have a better idea, let me know!)
Up-shot
As I’ve written at the beginning, this plugin is the result of a case study. I’m aware that a configuration procedure that may involve changing the theme is not for the faint-hearted. This is due to the way how WordPress processes widgets – or more precisely, its lack of an enforced common structural standard for widgets. IMO the proposed solution, though not quite perfect, is more than a good compromise. And again: It already does a good job for me, so I hope it will for you, too.
Widgets Mass-Collapse
Recently, saintneko asked me whether it is better to implement a certain functionality as a plugin, or to theme it. The functionality in question is making sidebar widgets collapsible.
A seemingly simple question, but, as is often the case with “simple” questions, one with no simple answer at all.
Sliding Notes HowTo’s – Adding An Image To The Button
The other day I posted about the side-effect when the slider title is formated directly, therewith effectively inserting HTML tags into it. Instead I suggested using CSS to format the title.
CSS also comes in handy for adding an image» to the slider button.
This is how it is done:
Read more >>
