Invisible edit-sections button with fixed screen position

Description

This is a continuation of this solution, I developed it a little bit…

I liked this solution very much (to have edit-sections button always on the screen), because my pages are rather long and it is very boring when you have to scroll up and down all the time to click that edit-sections button. But at the same time, I did not like how it looked like on the pages of my site. It was breaking all the design of it, it simply looked as something that does not belong there… I changed letters to icon, but I still did not like how it looked. Then I got this wonderful idea: make it invisible! This button does not mean anything to visitors of the site, but to editors it means a lot. And besides, it is better not to be seen. Site looks cleaner and more proffessional…

If your site has dark color background, when you get it with the mouse, a white square should appear. And if your site has white background, than a square will be a little bit darker…

NOTE: The only thing that is NOT good here is that I dont know why, but it does not work in IE…

I tried to do it with letters instead of picture, and put font-color transparent… Again, it works in FF, but in IE the letters stay visible…

[[div style="position:fixed; right: 0pt; bottom: 0pt; z-index:50"]] [[button edit-sections text=" " style="background-image: url(http://commons.wikimedia.org/wiki/Image:Blank_space.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px;"]] [[/div]]

In action

It is implemented in this page. Go with the mouse to the right bottom corner and move it until a hand shows, then click. Edit sections should appear….

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

Wikidot Code Snippets

Snippets

Description

Code

In action

Rate this solution