Invisible edit-sections button with fixed screen position

By BrunhildaBrunhilda


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


[[div style="position:fixed; right: 0pt; bottom: 0pt; z-index:50"]]
[[button edit-sections text=" " style="background-image: url(; background-repeat: no-repeat; background-position: bottom right; padding-right: 20px;"]]

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:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by Brunhilda

Pictures with the text under it - 16 Feb 2012 01:31

Rate this solution

If you think this solution is useful — rate it up!

rating: +16+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License