Piwigo.org

rvelices · 2010-12-08 12:52:55

We talked a lot about replacing all exiting theme icons with a unique sprite. So here is the idea:

- Create a sprite using 28x28 carbon icons (they are mono chromatic, very easy to decline in various colors - other themes could do what they want)
- In order to allow maxi customizations of child themes, the default template will look like:

Code:

<span>
  <a href="" title="Last" class="pwg-state-default pwg-button pwg-button-icon-right">
    <span class="pwg-icon pwg-icon-arrowstop-e">&nbsp;</span>
    <span class="pwg-button-text">Last</span>
  </a>
</span>
<span>
  <a href="" title="Next" class="pwg-state-default pwg-button pwg-button-icon-right">
    <span class="pwg-icon pwg-icon-arrow-e">&nbsp;</span>
    <span class="pwg-button-text">Next</span>
  </a>
</span>
<span>
  <a href="" title="Prev" class="pwg-state-default pwg-button">
    <span class="pwg-icon pwg-icon-arrow-w">&nbsp;</span>
    <span class="pwg-button-text">Prev</span>
  </a>
</span>

This will allow by css to show only the icon, only the text or the icon and the text. What do you think ?
I will probably need a lot of testers for all browsers ...
A classic css will look like

Code:

.pwg-icon {
  display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
  width: 28px; height: 28px; background-image: url(sprite_blue.png); 
}
.pwg-button-text { display:none; }

.pwg-state-default:hover .pwg-icon
{
  background-image: url(sprite_red.png);
}

.pwg-button {
  display: inline-block;
}

.pwg-icon-arrow-e { background-position: 0 -28px; }
.ui-icon-arrowstop-e { background-position: -28px -56px; }

plg · 2010-12-08 13:19:38

I think this is very interesting.

What do you call "carbon icons? is it an existing icon set? When I think about CSS sprites for icons, I thought creating a single image from existing icons and then displaying them with the CSS sprite method.

rvelices · 2010-12-08 13:23:20

plg wrote:
What do you call "carbon icons? is it an existing icon set? When I think about CSS sprites for icons, I thought creating a single image from existing icons and then displaying them with the CSS sprite method.

It's the gally graphite set - only monochromatic contours -> very easy to generate various colors from that.

rvelices · 2010-12-10 07:24:13

on [Subversion] r8066 I have a first version with a new toolbar on the picture page

If no problem, I will continue to integrate it and there will be no easy turning back...
(in this commit ignore the blue/green border colors, some icons are still missing... I made this commit so that it affects a minimum of the existing files)

plg · 2010-12-10 12:15:12

Of course, it works perfectly.

Just to make things clear: you're not planning to change the icons of the dark/clear/Sylvia themes, are you? You took the "carbon icon set" for the "proof of concept", right?

One major drawback of CSS sprites is that they can become complex to maintain, so we have to set a few rules, such as never break position of a given icon in the sprite.

On important point about sprites is that they are a perfect way to have a icon+icon:hover set (known as Instant Image Hovers feature). In the themes/default/sprite.png in [Subversion] r8066 the position of the icons do not permit this in a very smart way. I looked at what WordPress did on their administration panel:

I think this is an interesting layout because it makes CSS position simpler.

Should we use a single sprite for all icons of a given theme or several sprites?

rvelices · 2010-12-10 12:33:50

plg wrote:
Just to make things clear: you're not planning to change the icons of the dark/clear/Sylvia themes, are you? You took the "carbon icon set" for the "proof of concept", right?

In fact yes because they are ugly :). I really started with carbon because it was easier for me and I will provide carbon icons in X colors.

plg wrote:
One major drawback of CSS sprites is that they can become complex to maintain, so we have to set a few rules, such as never break position of a given icon in the sprite.

Yes unless you rewrite the corresponding css rule. Note that the positioning is not done in the .tpl files but in .css.

plg wrote:
On important point about sprites is that they are a perfect way to have a icon+icon:hover set (known as Instant Image Hovers feature). In the themes/default/sprite.png in [Subversion] r8066 the position of the icons do not permit this in a very smart way. I looked at what WordPress did on their administration panel:
...
I think this is an interesting layout because it makes CSS position simpler.

I disagree . I think it's more flexible and less constraints to either:
1. hover - change border colors (commited)
2. hover - change bg image (just one line in css to change the url to a new sprite - :hover{ background-url(sprite_flashy_colors_hover.png) ) - this is smarter and also this is the way jQuery UI works. It would be a lot easier to take an existing sprite, open it in gimp, increase saturation to max and here you have your nice hover effect or desaturate and here you have the disabled effect...

plg wrote:
Should we use a single sprite for all icons of a given theme or several sprites?

One sprite for all icons, except for hover, or disabled effects. Note that in my commit I prefered for disabled links to decrease opacity, but we could have done a la jQuery UI and use a different background. For info I will add a few common icons used by several plugins so that they will show nicely with any theme (I have in mind to start with a map for rv gmaps and gmaps :))

rvelices · 2010-12-10 12:50:27

a noter que avec la structure choisie, on peut simplement par css soit montrer une icone (par defaut), soit juste un texte, soit l'icone avec un texte...

rvelices · 2010-12-14 12:01:01

With my last commit [Subversion] r8119 , the dark theme is 'ready'. I will make the nice colors for clear and sylvia and then we go ...

plg · 2010-12-14 12:17:41

there is one thing I really think we are not understanding each other : please, don't change current icons. Especially on Sylvia. OK for CSS sprites, not OK to change Sylvia icons. I have not such a strong opinion for clear and dark themes (I even think the [Subversion] r8119 icons are good for the dark theme).

plg · 2010-12-14 12:20:40

rvelices wrote:
plg wrote:
Just to make things clear: you're not planning to change the icons of the dark/clear/Sylvia themes, are you? You took the "carbon icon set" for the "proof of concept", right?
In fact yes because they are ugly :). I really started with carbon because it was easier for me and I will provide carbon icons in X colors.

Your answer is not clear for me : what is ugly?

rvelices wrote:
I disagree . I think it's more flexible and less constraints to either:
1. hover - change border colors (commited)
2. hover - change bg image (just one line in css to change the url to a new sprite - :hover{ background-url(sprite_flashy_colors_hover.png) ) [...]

Yes you're right, I had not this solution in mind. The proposition 2 is very interesting: 1 distinct iconset image for :hover.

plg · 2010-12-14 12:35:58

plg wrote:
Yes you're right, I had not this solution in mind. The proposition 2 is very interesting: 1 distinct iconset image for :hover.

Well... in fact I wonder if the method 1 iconset image + 1 iconset image for :hover is compatible with the Instant Image Hovers feature. Is it compatible? Does the background image of :hover pseudo class loads at the same time or only when the cursor is over the HTML tag?

plg · 2010-12-14 13:02:26

plg wrote:
there is one thing I really think we are not understanding each other : please, don't change current icons. Especially on Sylvia. OK for CSS sprites, not OK to change Sylvia icons.

Actually I realize that the carbon iconset is very close to Sylvia icons. You had planned to change colors for Sylvia, please do it and then we'll see if it's better compared to current (Piwigo 2.1) icons.

For Sylvia, don't you think it would be a good idea to have icons grey by default and pink on :hover?

rvelices · 2010-12-14 16:06:38

first thanks for not asking original Sylvia icons - that would have been more than an hour of pixel peeping.
for sylvia and clear of course I had in mind 3 sets of icons one normal, one hover and one gray for disabled.

Well... in fact I wonder if the method 1 iconset image + 1 iconset image for :hover is compatible with the Instant Image Hovers feature. Is it compatible? Does the background image of :hover pseudo class loads at the same time or only when the cursor is over the HTML tag?

I think as of today the browsers will load the background only when needed - so it will not be as nice the very first time you hover ... But in 2.1 there is no hover so ...

Zaphod · 2010-12-14 22:45:47

plg wrote:
plg wrote:
Yes you're right, I had not this solution in mind. The proposition 2 is very interesting: 1 distinct iconset image for :hover.
Well... in fact I wonder if the method 1 iconset image + 1 iconset image for :hover is compatible with the Instant Image Hovers feature. Is it compatible? Does the background image of :hover pseudo class loads at the same time or only when the cursor is over the HTML tag?

I think it's loaded only when the cursor is over the HTML tag.
You experience a little lag the first time, when the image is not in cache.

That's why for the theme "stripped", I followed Luciano example and chose one png for the biggest background pictures (around thumbs) and the hover background.
I planned to do the same for the other icons.

You can see the the lag phenomenon on the arrows "prev/next thumbnail pages" on stripped theme.

rvelices wrote:
It would be a lot easier to take an existing sprite, open it in gimp, increase saturation to max and here you have your nice hover effect or desaturate and here you have the disabled effect...

If you think only in "easy" terms... it's a lot easier to change only one icon in the set if you have one png per icon instead of one strip...
So... maybe the "easiest" thing to modify is not the better one.

In fact, it's quite easy in gimp to make a modification of part of the icons (saturation +/- for example), copy them on a new layer, move them etc... etc...
I think having one sprite for icons and hover icons is a way better choice... not so difficult to handle.

Zaphod · 2010-12-14 22:53:49

plg wrote:
there is one thing I really think we are not understanding each other : please, don't change current icons. Especially on Sylvia. OK for CSS sprites, not OK to change Sylvia icons. I have not such a strong opinion for clear and dark themes (I even think the [Subversion] r8119 icons are good for the dark theme).

Some of the Sylvia icons should have a little redesign...
cf. image below.

I didn't see it when using the theme for more than one year... before I tried to use them for the stripped theme. (i had to made some modification of these images to correct the difference in vertical position).

Piwigo.org

Announcement

#1 2010-12-08 12:52:55

CSS sprites by default - proposition

Code:

Code:

#2 2010-12-08 13:19:38

Re: CSS sprites by default - proposition

#3 2010-12-08 13:23:20

Re: CSS sprites by default - proposition

plg wrote:

#4 2010-12-10 07:24:13

Re: CSS sprites by default - proposition

#5 2010-12-10 12:15:12

Re: CSS sprites by default - proposition

#6 2010-12-10 12:33:50

Re: CSS sprites by default - proposition

plg wrote:

plg wrote:

plg wrote:

plg wrote:

#7 2010-12-10 12:50:27

Re: CSS sprites by default - proposition

#8 2010-12-14 12:01:01

Re: CSS sprites by default - proposition

#9 2010-12-14 12:17:41

Re: CSS sprites by default - proposition

#10 2010-12-14 12:20:40

Re: CSS sprites by default - proposition

rvelices wrote:

plg wrote:

rvelices wrote:

#11 2010-12-14 12:35:58

Re: CSS sprites by default - proposition

plg wrote:

#12 2010-12-14 13:02:26

Re: CSS sprites by default - proposition

plg wrote:

#13 2010-12-14 16:06:38

Re: CSS sprites by default - proposition

#14 2010-12-14 22:45:47

Re: CSS sprites by default - proposition

plg wrote:

plg wrote:

rvelices wrote:

#15 2010-12-14 22:53:49

Re: CSS sprites by default - proposition

plg wrote:

Board footer