WikiWealth

Editor buttons, a win-win CSS solution

27 May 2011 06:56 | wikidot

When it comes to hiding things with CSS, there's nothing more heavily disputed than whether or not to hide the editor buttons.

Wikidot Community member gerdamigerdami would argue that it is the user's right to have all three rows of editor buttons if they want to, and that site administrators should respect this.

wikidot-editor-panel-all.png

Nevertheless, many people (myself included) prefer just a single row of icons - or none at all. And as site administrators we tend to impose our will on visitors, because when it comes to the appearance of our own websites, usually it's our own opinion that we turn to first. If we prefer a single row of icons, our visitors must as well!

wikidot-editor-panel-top.png

Annoyed users have had to turn to third-party extensions for browsers, like the Stylish add-on for Firefox, to manually change this part of the theme on all Wikidot sites.

I'd like to propose an alternative solution, that provides both the compact neatness of a single row of icons with the functionality of having all three rows of buttons.

I don't recommend using this code - use the CSS3-capable code mentioned below.

/*
 * HOVER-SENSITIVE EDITOR BUTTONS
 * More info: http://bit.ly/l5dRds
 */
 
/* Show only one row of icons by default */
#np-editor-panel, #wd-editor-toolbar-panel {
    height: 30px;
    position: relative;
    overflow: hidden;
}
/* When your mouse hovers over it, reveal the other rows */
#np-editor-panel:hover, #wd-editor-toolbar-panel:hover {
    height: 90px;
}

Using the :hover pseudo-class, you can change attributes of a CSS id or class based on whether your mouse is currently hovering over it or not.

But let's take this further, and add a bit of animation for those that are using a modern, CSS3-capable browser:

Copy and paste this into your website's theme, or use it with a CSS module!

/*
 * HOVER-SENSITIVE EDITOR BUTTONS
 * More info: http://bit.ly/l5dRds
 */
 
/* Show only one row of icons by default */
#np-editor-panel, #wd-editor-toolbar-panel {
    height: 30px;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 450ms ease-in-out; /* Chrome & Safari */
    -moz-transition: height 450ms ease-in-out; /* Firefox */
    -o-transition: height 450ms ease-in-out; /* Opera */
    -ms-transition: height 450ms ease-in-out; /* Internet Explorer 9 */
    transition: height 450ms ease-in-out; /* Generic */
}
/* When your mouse hovers over it, reveal the other rows */
#np-editor-panel:hover, #wd-editor-toolbar-panel:hover {
    height: 90px;
}

Driven to find a solution to this problem, I must admit that this is the first time I have actually used the transition property, and it required a small amount of research on my behalf before I could write this post. Therefore if you have any improvements to suggest, please let me know!

You can see this in action by hovering your mouse over the single row of icons below, in the comments section. Enjoy! :)

Research for blog post:

Submit Feedback
Please rate this page based on the quality and helpfulness of the content to you.

Average 0% rating from 0 votes.

You may also be interested in…

OLD COMMENT SYSTEM (10 comments)

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Help: wiki text quick reference

Add a new comment

wikidot