[RFC] CSS Image Sprites

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
User avatar
Sierron
Registered User
Posts: 62
Joined: Wed Aug 25, 2010 11:41 am
Contact:

Re: [RFC] CSS Image Sprites

Post by Sierron » Fri Apr 29, 2011 8:55 pm

Though I like the idea, but I can see a lot of work to put into all styles which need to be updated. I, for me, wouldn't want to do that work.
hanakin wrote:I get what you are saying however when you are referring to style authors, u are referring to those who tweak current themes or images. This is the main problem with phpbb it caters to style authors rather than front-end designers who are quite used to this as it is common practice. In fact there are tools out there that do this for you already http://csssprites.com/. It is this that leads to the current state of the styles DB which is nothing more than the same styles with different colors or repositioned elements and altered graphics. The idea of building off of existing styles is quite ridiculous to me as it does not force people to be creative.
Are you still talking about css image sprites or what are you on to?
VSE+ wrote:The default sprites could be made to accommodate this, however, if they were made with lots of space between them. Wouldn't this mean, they could be resized but the background-position values could remain unchanged, and only the new size/dimensions would need to be entered by the style author?
That still would limit style authors to a certain size.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 906
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin » Fri Apr 29, 2011 10:18 pm

Sierron wrote:Though I like the idea, but I can see a lot of work to put into all styles which need to be updated. I, for me, wouldn't want to do that work.
hanakin wrote:I get what you are saying however when you are referring to style authors, u are referring to those who tweak current themes or images. This is the main problem with phpbb it caters to style authors rather than front-end designers who are quite used to this as it is common practice. In fact there are tools out there that do this for you already http://csssprites.com/. It is this that leads to the current state of the styles DB which is nothing more than the same styles with different colors or repositioned elements and altered graphics. The idea of building off of existing styles is quite ridiculous to me as it does not force people to be creative.
prosilver would be left alone for that fact so you would not have to make the changes unless you want to use the new version which would be called something like prosilver2.

personally the idea of baseing a theme off of another theme was the stupidest thing the devs have come up with, it stunts the growth and creativity associated with the software's interface, but thats just me.

As for making the changes inorder to use prosilver2 i am not sure where the difficulty lies. Yes you would have to alter the html however that is out of the scope of this disscussion. As for making graphical changes it is simple and requires very little effort, since you can simply take the images from prosilver moded them of your choice and plug them into the csssprite generator i have linked to or one of your choosing and pluging in the resulted image and values in the respective places.

as others have said an automated method could be included in the core however i would opt for a modular approach to this as i personally would want to disable this and opt to do my own coding from scratch. I completely despise anything automated/DB driven relating to theme design.
Donations welcome via Paypal Image

User avatar
Sierron
Registered User
Posts: 62
Joined: Wed Aug 25, 2010 11:41 am
Contact:

Re: [RFC] CSS Image Sprites

Post by Sierron » Fri Apr 29, 2011 11:23 pm

hanakin wrote:personally the idea of baseing a theme off of another theme was the stupidest thing the devs have come up with, it stunts the growth and creativity associated with the software's interface, but thats just me.
Where is this written? I never saw a statement like that somewhere. There are many designs out which look different (not just colour changes).

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 906
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin » Fri Apr 29, 2011 11:31 pm

Sierron wrote: Where is this written? I never saw a statement like that somewhere. There are many designs out which look different (not just colour changes).
um its written right here in this topic i just said it :P
hanakin wrote:personally the idea of baseing a theme off of another theme was the stupidest thing the devs have come up with, it stunts the growth and creativity associated with the software's interface, but thats just me.
see :D

personally as to imply my opinion, and this is pointed at the saturation of themes in the DB that are just tweaks of the original theme weather its sub or pro silver.


to clearify im refering to those themes that reuse the standard theme install files and only create files they need to make the chages to.
Donations welcome via Paypal Image

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1831
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: [RFC] CSS Image Sprites

Post by DavidIQ » Fri Apr 29, 2011 11:39 pm

hanakin wrote:personally the idea of baseing a theme off of another theme was the stupidest thing the devs have come up with, it stunts the growth and creativity associated with the software's interface, but thats just me.
I think you missed the whole point of template inheritance. The files tend to be the same setup. All that changes is the color, overall style, and images, all of which can be done in stylesheets and images. Most styles tend to have the same overall structure after all. Those that don't use all original files anyways. Being able to change one style and it affecting others at the same time is very useful especially when you talk about MODs, which is the largest catalyst for the template inheritance to begin with.

The other upside to the template inheritance is that users that found it hard to create all original files could now just inherit most of the files from say prosilver and simply change the stylesheets and images and voila...someone that thought styling phpBB was very hard is now a style author.
Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 906
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin » Sat Apr 30, 2011 12:00 am

@David I understand this, however this is what I personally don't like from a developer stand point I'm not saying it does not have it's upsides.
Donations welcome via Paypal Image

User avatar
Sierron
Registered User
Posts: 62
Joined: Wed Aug 25, 2010 11:41 am
Contact:

Re: [RFC] CSS Image Sprites

Post by Sierron » Sat Apr 30, 2011 2:22 am

hanakin wrote:@David I understand this, however this is what I personally don't like from a developer stand point I'm not saying it does not have it's upsides.
But well, making things harder than they are isn't quite useful. As you can see it in the phpbb support boards there are every day topics about simple things because they aren't that easy. And now imagine you change all the things to make it even more complicated.

After all it should be easy for a user to just change some colors and have a design which works great with their own homepage colors.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 906
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin » Sat Apr 30, 2011 2:30 am

Tqken into mind im kind of drunk at the moment but im Sorry that to me is a theme flaw and ignorance on the part of the user the CSS for my version will be alot easier to manipulate the simple stuff and I'm sorry but I can teach a monkey how to use firebug to make changes to a theme.
Donations welcome via Paypal Image

User avatar
Sierron
Registered User
Posts: 62
Joined: Wed Aug 25, 2010 11:41 am
Contact:

Re: [RFC] CSS Image Sprites

Post by Sierron » Sat Apr 30, 2011 3:41 am

hanakin wrote:Tqken into mind im kind of drunk at the moment but im Sorry that to me is a theme flaw and ignorance on the part of the user the CSS for my version will be alot easier to manipulate the simple stuff and I'm sorry but I can teach a monkey how to use firebug to make changes to a theme.
Perhaps you should write again then you are not drunk :| .

/a3
Registered User
Posts: 97
Joined: Mon Sep 20, 2010 6:44 am

Re: [RFC] CSS Image Sprites

Post by /a3 » Wed May 11, 2011 11:31 pm

Another suggestion I would like to make:

hanakin has already posted some example PNG files (I'm not sure if these are based off the GIFs provided or the original PSDs) but the PNG spec contains some lossless compression filters (I'm not going into detail here, but here are some details from libpng).

There are programs including advpng, PNGOUT, pngcrush etc. that can be used to use these filters to further "compress" (or optimise) these PNG files.

I haven't spent long, but with advpng I was able to get the following results:

button_topic_new.gif in prosilver
Original GIF: 2737 bytes
PNG (GIMP): 2200 bytes
PNG (advpng): 2136 bytes

bg_tabs1.gif in prosilver
Original GIF: 1520 bytes
PNG (GIMP): 566 bytes
PNG (advpng): 550 bytes

site_logo.gif in prosilver
Original GIF: 3430 bytes
PNG (GIMP): 2332 bytes
PNG (advpng): 2236 bytes

topic_icons.png which hanakin posted
Original PNG: 1822 bytes
PNG (advpng): 1250 bytes

contact_icons.png which VSE posted
Original PNG: 12069 bytes
PNG (advpng): 9768 bytes

I have not tried these in pngcrush, PNGOUT and other programs yet, but from experience I've found advpng the best in most cases.

Another upside of using PNG: it supports alpha transparency. This way the smilies will be able to work with any background, not just blue backgrounds. In comparison, GIF only supports on/off transparency.

The only downside: the animated emoticons would have to be in the GIF format because PNG doesn't support animations. MNG and APNG do, but MNG isn't well supported (if at all) and APNG is only supported by Gecko-based browsers and is a Mozilla standard.

Oh, and by the way, image sprites are a good idea in most cases, since we're talking about the style of the page and not the content. However, smilies are part of the content and should be used in <img> tags, not CSS backgrounds (for semantic purposes - as they are technically a part of the document).
$ git commit -m "YOLO"

Post Reply