Replace image buttons with css

Arty · Post by **Arty** » Sun Nov 11, 2012 5:37 pm

This is Joas's idea. I couldn't find RFC matching that ticket, so made a new topic

Idea is to replace all current prosilver buttons with CSS buttons that use text instead of images.

Ticket: http://tracker.phpbb.com/browse/PHPBB3-10431
Pull request: https://github.com/phpbb/phpbb3/pull/1075

Please check pull request and post your suggestions.

Currently only large buttons such as "new topic" have been replaced. Implementation hasn't been tested properly with all browsers yet.

Meis2M · Post by **Meis2M** » Sun Nov 11, 2012 6:06 pm

imkingdavid · Post by **imkingdavid** » Sun Nov 11, 2012 7:00 pm

I'm assuming this only applies to the buttons that are primarily text (i.e. edit, quote, x, !, and ? from the post row, but not the email, yahoo, etc. buttons from the postbit). Anyway, I'm all for replacing images with CSS + text in any cases that makes sense.

Fyorl · Post by **Fyorl** » Sun Nov 11, 2012 9:49 pm

Arty · Post by **Arty** » Sun Nov 11, 2012 10:03 pm

imkingdavid wrote:I'm assuming this only applies to the buttons that are primarily text (i.e. edit, quote, x, !, and ? from the post row, but not the email, yahoo, etc. buttons from the postbit). Anyway, I'm all for replacing images with CSS + text in any cases that makes sense.

Yes, its only for text buttons. I don't see how it could be extended to other buttons.

Post by **Vinny** » Mon Nov 12, 2012 4:35 am

Any plans for subsilver2?

Arty · Post by **Arty** » Mon Nov 12, 2012 7:46 am

Vinny wrote:Any plans for subsilver2?

Yep, make new ugly buttons that are like worst buttons ever, put it in 3.1 to drive people away from that ancient style. But that would be a different RFC.

nickvergessen · Post by **nickvergessen** » Mon Nov 12, 2012 7:53 am

Well to summerize that shortly... subsilver2 is going to keep the current buttons

Arty · Post by **Arty** » Mon Nov 12, 2012 9:46 am

Changed text shadow a bit to make font look thicker than it is, changed font for iOS browsers because they didn't align Verdana correctly, added workaround for IE7 lack of support for basic pseudo classes.

Some screenshots (copy/pasted buttons from different screenshots. each mobile screenshot has several buttons with different zoom levels):

Desktop:

Firefox on Android phone:

Opera on Android phone:

Safari on iOS:

Ger · Post by **Ger** » Mon Nov 12, 2012 11:39 am

Somehow the font seems a bit fuzzy compared to current image buttons. Or is that just the screenshot quality?

Development Discussion Board

Replace image buttons with css

Replace image buttons with css

Re: [RFC] Replace image buttons with css

Re: [RFC] Replace image buttons with css

Re: [RFC] Replace image buttons with css

Re: [RFC] Replace image buttons with css

Re: [RFC] Replace image buttons with css

Re: [RFC] Replace image buttons with css

Re: [RFC] Replace image buttons with css

Re: [RFC] Replace image buttons with css

Re: [RFC] Replace image buttons with css