Announcement

  •  » Engine
  •  » CSS sprites by default - proposition

#16 2010-12-15 09:50:47

rvelices
Former Piwigo Team
2005-12-29
1960

Re: CSS sprites by default - proposition

Zaphod wrote:

I think having one sprite for icons and hover icons is a way better choice... not so difficult to handle.

Nothing will prevent you in doing so for your theme by adding a css rule for each hovered icon (40 rules). I will be doing the simple way in the generic themes because there are three of thems and it is easier for me. Maybe we'll change it one day later ...

Offline

 

#17 2010-12-15 15:29:54

Zaphod
Former Piwigo Team
2006-11-13
441

Re: CSS sprites by default - proposition

The main drawback is the first time the "hover" icon is displayed.
I think it gives a much better impression without the lag...

Offline

 

#18 2010-12-15 15:34:56

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13782

Re: CSS sprites by default - proposition

Zaphod wrote:

The main drawback is the first time the "hover" icon is displayed.
I think it gives a much better impression without the lag...

I suppose the lag will occur only on the first icon, then it will load instantly on other icons. So that's not a big problem.

Offline

 

#19 2010-12-15 18:47:26

Zaphod
Former Piwigo Team
2006-11-13
441

Re: CSS sprites by default - proposition

Yes, that's what will occur.

Just for information, these changes will be made in the "official themes" but that won't be the only way to do it?

Last edited by Zaphod (2010-12-15 18:48:02)

Offline

 

#20 2010-12-16 09:59:13

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13782

Re: CSS sprites by default - proposition

I see the pink colors on the Sylvia theme (+ orange for :hover) and I find it quite good :-)

Piwigo 2.1
http://piwigo.org/forum/showimage.php?pid=117668&filename=21_r8163_sylvia_icons_index.png http://piwigo.org/forum/showimage.php?pid=117668&filename=21_r8163_sylvia_icons_picture.png

Piwigo 2.2
http://piwigo.org/forum/showimage.php?pid=117668&filename=trunk_r8163_sylvia_icons_index.png http://piwigo.org/forum/showimage.php?pid=117668&filename=trunk_r8163_sylvia_icons_picture.png

1) there should be no border-bottom on :hover in Sylvia

2) start_filter.png is not in the sprite

3) I'm not really fond of this icon set for the theme clear but maybe it's because I'm used to the previous style. On picture.php, maybe we should not change the background color on :hover, I don't know, this is just my first reaction :-)

http://piwigo.org/forum/showimage.php?pid=117668&filename=trunk_r8163_clear_icons_index.png http://piwigo.org/forum/showimage.php?pid=117668&filename=trunk_r8163_clear_icons_picture.png

Offline

 

#21 2010-12-16 10:02:34

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13782

Re: CSS sprites by default - proposition

Zaphod wrote:

Just for information, these changes will be made in the "official themes" but that won't be the only way to do it?

Of course not. You can do anything you want at theme level and still use the 1 icon = 1 picture file.

Offline

 

#22 2010-12-16 10:53:45

Zaphod
Former Piwigo Team
2006-11-13
441

Re: CSS sprites by default - proposition

I think I'll chose something intermediate (the sprite concept is good, but I do not want only one sprite for all icons (only icons of the same size and on the same page).

One other comment... I prefer a lot the old sylvia icons... I'm not a big fan of the gally/graphite icon set.
They are more "harsh" (no color gradient, for example).

Offline

 

#23 2010-12-16 11:53:28

rvelices
Former Piwigo Team
2005-12-29
1960

Re: CSS sprites by default - proposition

plg wrote:

1) there should be no border-bottom on :hover in Sylvia

2) start_filter.png is not in the sprite

3) I'm not really fond of this icon set for the theme clear but maybe it's because I'm used to the previous style. On picture.php, maybe we should not change the background color on :hover, I don't know, this is just my first reaction :-)

1. ok. i missed that
2. because sylvia puts it in a smaller version and also I wasn't sure how it would look into a horizontal menu ... I could add it if required ...
3. mine too. I just kept the policy: Icon colors = link color, Icon hover = link hover. Give me what you want as color and it takes me 5 minutes ...

Offline

 

#24 2010-12-16 23:05:22

Zaphod
Former Piwigo Team
2006-11-13
441

Re: CSS sprites by default - proposition

I tried the icon sprites on the theme stripped here :
http://www.audreyetjulien.fr/test/pictu … category/3

I like this system very much.
I prefer grouping icons by size (here are only 20x20 icons), and having unactive / active / hover icons on the same sprite.

It's easy to use : X position for the icon, Y position for the state.
It's extremely easy to edit with gimp.

As there is only one color and the transparency is given by the alpha channel, you just have to select an icon line, select all channels but alpha channel, select the color you want (#ff3363 for Sylvia, for example), and press Ctrl+, .
(you can also only change the hue with the color menu).

Here is an example of an xcf file with 24x24 navbuttons for Sylvia :
http://zappod.free.fr/_web/picture_sylvia.xcf

Last edited by Zaphod (2010-12-16 23:06:14)

Offline

 

#25 2010-12-16 23:32:48

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13782

Re: CSS sprites by default - proposition

Very well done Zaphod. Obviously the theme architecture gives the choice to theme creators and that is a good thing!

On the XCF file, I only have one layer in the GIMP, so I wonder why you don't simply use PNG instead?

Offline

 

#26 2010-12-16 23:41:24

Zaphod
Former Piwigo Team
2006-11-13
441

Re: CSS sprites by default - proposition

You can use a PNG, but on the xcf remembers the guidelines that can be useful for icon selection, and the XCF files are set to be opened with Gimp.
The XCF are my "work files", not PNGs. That's just a personnal preference.

Offline

 

#27 2010-12-16 23:48:56

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13782

Re: CSS sprites by default - proposition

OK, I understand.

Offline

 
  •  » Engine
  •  » CSS sprites by default - proposition

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2024 · Contact