Invisible edit-sections button with fixed screen position

By BrunhildaBrunhilda

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…

This is how and when I got to this idea….
http://community.wikidot.com/forum/t-100125/edit-sections-visible#post-301715

Code

[[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….

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

rating: +11+x
cool
Steven HeynderickxSteven Heynderickx 1247568816|%e %b %Y, %H:%M %Z|agohover

You could enhance it more with the use of css… for example write text on it "edit" that will also hide, just by changing the color of the text in the hover function… maybe I'll work it out later

last edited on 1247568855|%e %b %Y, %H:%M %Z|agohover by Steven Heynderickx + show more
unfold cool by Steven HeynderickxSteven Heynderickx, 1247568816|%e %b %Y, %H:%M %Z|agohover
Add a new comment
page_revision: 9, last_edited: 1225979095|%e %b %Y, %H:%M %Z (%O ago)
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License