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 gerdami 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.
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!
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:
Nice. I will have to look into this on-page comment stuff as well.
According to Firebug, the button panel and text area are the right size and in the right place. However, all of the buttons are displayed all the time and, when I am not hovering, the text area is beside them and half hidden behind the sidebar.
Setting overflow:hidden works.
Also, on this screen, you need about 1em more space in both cases. The editor buttons are sized in px; you should probably use (30 and 90) px for the div height.
Another interesting effect would be to set position:relative. Then the other button rows drop down, over the comment box. It would probably need a background set to look decent though, maybe a translucent one.
Just had a look with Firefox and I see what you mean. Will try your suggestions & see if I can fix it.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
That fixed not only Firefox, but the scrolling in Chrome. It was jumping from one row to another (I'm guessing it was the change from em to px that fixed this?).
Edit: Nope, it was the overflow: hidden;
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Yes, that's got it. Looks good.
This is pretty useful, Shane. Thanks!
One note, if you move the transition properties to the normal class definition rather than under the :hover pseudo-class, then the transition works both up and down. You can see this here.
This would also be a spectacular CSSnippet.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Thanks Timothy!
I will update this page now with your suggestion.
As for the CSS Snippet / "CSSnippet" page, I'll add it later tonight. Got a few things to do beforehand.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I would like to be able to make my own buttons. I like buttons. I would like to have a lot more buttons… Is there a way to do it?
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
You can change the appearance of the buttons if you want - but there is no way to add new buttons to the editor.
I know it's a bit different… but if it helps, I'll add some extra buttons to STE that do whatever you need them to do.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I must admit, I like this "now you see it now you dont" style… :)
Somewhere you wrote about things in which Wikimedia is better than Wikidot. Well, this is one thing. I can make my own editor and I can add as much buttons as I want and any button as I want.
Here, see my monobook page. You'll understand better than I what is there… :)
And here's the page with my extraeditbuttons. I can now go on adding whatever I want. In this way, toolbar can be completely customized and adapted to the needs of each user…
We also added a set of smileys, which helps a lot in communication among users…
Why is this impossible at Wikidot?
As far as STE is concerned… I am sure this is a great program, but as I always have the access to internet, I don't need to work off line…
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
Yes, however I admit that I was pushing an agenda with that blog post :) Trying to emphasise the importance of being able to leave edit-section links enabled permanently: blog:119
I would say that it's most likely because Wikidot has a small development team of about 5 individuals, whereas MediaWiki (which Wikipedia runs on) has a much larger development team and can therefore get much more work done in the same period of time.
Well, most of the time when I use it, I'm connected to the Internet too. It's not just for offline editing - it's most useful when you are online and can actually export pages or use the rename/tag tools.
But I don't mind. If it's not for you, then I understand that there is no point in using it. I'd like to know how I can make it more useful for you though, if you have any suggestions? :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Post preview:
Close preview