Add support for CSS image sprites
rport - February 1, 2008 - 14:06
| Project: | BUEditor |
| Version: | 6.x-2.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Description
I love BUEditor but perhaps the optional support of CSS image sprites for the icons might be of benefit.
Here are some references for CSS image sprites;
One of the benefits of CSS image sprites is that the file size of the master icon image would be smaller than the sum of its pieces. As a result smaller distribution, less files, reduced bandwidth and faster page refresh.
Keep up the great work,
Russ
#1
I think this could be achieved using theme buttons in 6.x.
Unfortunaltely, BUE 5.x does not support theme buttons. I'll think about backporting.
Theme buttons allow to wrap other buttons with some html code. It is possible to create a layout like this:
<div class="button-group">...functional buttons here...</div>- Each button in the group should have the same fixed sized(default:20x20) transparent image.
- Grouping division should have a background image and it must fit the layout.(may need some fine tuning)
.button-group {background-image: url(image-sprite.png);}As an alternative to the transparent image that allows fixed sized buttons, you may try fixing the dimensions using css.(you should not assign any icons to buttons in this case)
.button-group input{width: 20px; height: 20px; background: transparent;}#2
See the module imageset (management of sets of images (sprites)). On his basis the module bueditoricon - icons of the editor BUEditor in one set works
#3
Its been a while since I started this thread so I thought I'd throw a little more into the mix.
I have just fed in my
ico_files into the CSS sprite generator and the following code was produced;#container li {
background: url(ico_sprite.png) no-repeat top left;
}
.bu-ico_italic { background-position: 0 -20px; }
.bu-ico_h4 { background-position: 0 -60px; }
.bu-ico_indent { background-position: 0 -100px; }
.bu-ico_underline { background-position: 0 -140px; }
.bu-ico_a-left { background-position: 0 -180px; }
.bu-ico_h1 { background-position: 0 -220px; }
.bu-ico_sub { background-position: 0 -260px; }
.bu-ico_ol { background-position: 0 -300px; }
.bu-ico_quote { background-position: 0 -340px; }
.bu-ico_bold { background-position: 0 -380px; }
.bu-ico_copyright { background-position: 0 -420px; }
.bu-ico_break { background-position: 0 -460px; }
.bu-ico_a-justify { background-position: 0 -500px; }
.bu-ico_a-center { background-position: 0 -540px; }
.bu-ico_a-right { background-position: 0 -580px; }
.bu-ico_help { background-position: 0 -620px; }
.bu-ico_teaser { background-position: 0 -660px; }
.bu-ico_strike { background-position: 0 -700px; }
.bu-ico_sup { background-position: 0 -740px; }
.bu-ico_h2 { background-position: 0 -780px; }
.bu-ico_h3 { background-position: 0 -820px; }
.bu-ico_ul { background-position: 0 -860px; }
.bu-ico_link { background-position: 0 -900px; }
.bu-ico_img { background-position: 0 -940px; }
.bu-ico_preview { background-position: 0 -980px; }
.bu-ico_small { background-position: 0 -1020px; }
I have also included all of the icons and the sprite that was produced...
Perhaps this will help this issue along.
Russ
#4
The decision has published on drupal.ru and http://drupal.org/node/596124
#5
Check 6.x-2.x for automatic css sprites.
You should enable it per editor under icon path setting.
#6
Automatically closed -- issue fixed for 2 weeks with no activity.