Place all icons under each other in the sprite and give enough room. The 'right' can stay (or be replaced with 100%)
The 'center' has to be replaced with the y-position of every icon. And yes, that means that you can't center it based on the font-size. Icon-height and font-size have to be in sync. Using sprites was just a suggestion. If we can't fix it with a sprite, well, leave it like it is. One reason to use sprites is to make fewer http-requests, but yslow[1] gives actually already an A-score. Overall it's a C for both sidebar[2] and topbar[3], but most have to do with server-settings, something we don't control. -Robert [1] https://developer.yahoo.com/yslow/ [2] http://people.apache.org/~simonetripodi/fluido/sidebar/ [3] http://people.apache.org/~simonetripodi/fluido/topbar/ ---------------------------------------- > Date: Mon, 14 Nov 2011 22:41:08 +0100 > Subject: Re: [fluido skin] using sprites > From: [email protected] > To: [email protected] > > Hi Robert! > for icons such as checkstyles, changes-plugin, ... that technique > cannot be applied because the generated reports explicitly refer to > images. > > We can apply anyway the sprites to links - where we are already using > background images with extra space, take a look at maven/theme.css[1] > - what I was not able to do is that using an absolute background > position, to retail only the icon I am interested, it is not possible > to use the `right center` alignment... :( > Any hint? > > TIA!!! > Simo > > [1] > https://svn.apache.org/repos/asf/maven/sandbox/trunk/skin/maven-fluido-skin/src/main/resources/css/maven-theme.css > > http://people.apache.org/~simonetripodi/ > http://simonetripodi.livejournal.com/ > http://twitter.com/simonetripodi > http://www.99soft.org/ > > > > On Mon, Nov 14, 2011 at 10:29 PM, Robert Scholte <[email protected]> > wrote: > > > > Hi, > > > > > > > > if you're explicitly referring to images instead of backgrounds, then this > > mechanism won't work. > > > > If you consider (link)-icons as a style of the link, don't use a separate > > image but a background with extra right-space. > > > > > > > > -Robert > > > > ---------------------------------------- > >> Date: Mon, 14 Nov 2011 21:53:29 +0100 > >> Subject: [fluido skin] using sprites > >> From: [email protected] > >> To: [email protected] > >> > >> Hi all guys, > >> For link icons I tried to add sprites (I realized the sprite using > >> ImageMagik) as Robert suggested - unfortunately sprites cannot be > >> universally applied, since there are reports that explicitly refer to > >> images - but what I found difficult is placing icons in the *right* of > >> the links text, when placing icons on the left is incredibly easier... > >> I'm consulting also other articles[1] but for what I can see, sprites > >> are easy to adopt when realizing banners/buttons or in itemized lists, > >> replacing the bullet with an image... > >> Any advice? > >> Many thanks in advance! > >> Simo > >> > >> [1] http://www.spritecow.com/ > >> > >> http://people.apache.org/~simonetripodi/ > >> http://simonetripodi.livejournal.com/ > >> http://twitter.com/simonetripodi > >> http://www.99soft.org/ > >> > >> > >> > >> On Sat, Nov 12, 2011 at 11:47 AM, Robert Scholte <[email protected]> > >> wrote: > >> > > >> > > >> > Just another suggestion: use a sprite for the icons[1] for some > >> > performance improvement. > >> > > >> > Make one image and shift it with css. > >> > > >> > Use SpriteCow[2] to get the right css-styles. > >> > > >> > > >> > > >> > -Robert > >> > > >> > > >> > > >> > [1] http://www.alistapart.com/articles/sprites > >> > > >> > [2] http://www.spritecow.com/ > >> > > >> > > >> > > >> > > >> >> From: [email protected] > >> >> To: [email protected] > >> >> Subject: Re: please test - yet another fluido skin cycle > >> >> Date: Sat, 12 Nov 2011 03:57:02 +0100 > >> >> > >> >> really nice! > >> >> > >> >> Just to understand, why do you publish each IT separately when they are > >> >> integrated into the skin documentation with a simple "mvn > >> >> -Prun-its,reporting > >> >> install site"? > >> >> (notice I just fixed it, it was broken since sample IT was renamed) > >> >> > >> >> Yes, I think it's time for graduation. > >> >> > >> >> Regards, > >> >> > >> >> Hervé > >> >> > >> >> Le Samedi 12 Novembre 2011 01:54:28 Simone Tripodi a écrit : > >> >> > Hi all Maven fellows, > >> >> > I just published a new SNAPSHOT of the fluido skin, here are demos: > >> >> > > >> >> > * Sidebar only: > >> >> > http://people.apache.org/~simonetripodi/fluido/sidebar/ > >> >> > * Topbar only: http://people.apache.org/~simonetripodi/fluido/topbar/ > >> >> > * The Maven main site: http://people.apache.org/~simonetripodi/maven/ > >> >> > > >> >> > I think the component start being mature enough to be graduate outside > >> >> > the sandbox, and feedbacks/suggestion/participation are more than > >> >> > welcome. > >> >> > Looking forward to hear from you, all the best and have a nice > >> >> > weekend! > >> >> > Simo > >> >> > > >> >> > http://people.apache.org/~simonetripodi/ > >> >> > http://simonetripodi.livejournal.com/ > >> >> > http://twitter.com/simonetripodi > >> >> > http://www.99soft.org/ > >> >> > > >> >> > --------------------------------------------------------------------- > >> >> > To unsubscribe, e-mail: [email protected] > >> >> > For additional commands, e-mail: [email protected] > >> >> > >> >> --------------------------------------------------------------------- > >> >> To unsubscribe, e-mail: [email protected] > >> >> For additional commands, e-mail: [email protected] > >> >> > >> > --------------------------------------------------------------------- > >> > To unsubscribe, e-mail: [email protected] > >> > For additional commands, e-mail: [email protected] > >> > > >> > > >> > >> --------------------------------------------------------------------- > >> To unsubscribe, e-mail: [email protected] > >> For additional commands, e-mail: [email protected] > >> > > --------------------------------------------------------------------- > > To unsubscribe, e-mail: [email protected] > > For additional commands, e-mail: [email protected] > > > > > > --------------------------------------------------------------------- > To unsubscribe, e-mail: [email protected] > For additional commands, e-mail: [email protected] > --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
