Replace image buttons with css

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
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Replace image buttons with css

Post by DionDesigns »

I did this for a client. Here's a sample using the default Prosilver background for the buttons. The button on the right is the current image, the one on the left is text-based:

Image

This is the (Firefox-based) CSS which created the button:

Code: Select all

margin-top: 3px;
padding: 0 6px;
height: 13px;
line-height: 13px;
background-image: -moz-linear-gradient(#fff, #ddd);
color: #c54;
border: 1px solid #888;
font-family: "Droid Sans";
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
border-radius: 3px;

Danielx64
Registered User
Posts: 304
Joined: Mon Feb 08, 2010 3:42 am

Re: Replace image buttons with css

Post by Danielx64 »

DionDesigns wrote:I did this for a client. Here's a sample using the default Prosilver background for the buttons. The button on the right is the current image, the one on the left is text-based:

Image

This is the (Firefox-based) CSS which created the button:

Code: Select all

margin-top: 3px;
padding: 0 6px;
height: 13px;
line-height: 13px;
background-image: -moz-linear-gradient(#fff, #ddd);
color: #c54;
border: 1px solid #888;
font-family: "Droid Sans";
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
border-radius: 3px;
Nice work, I'm impressed.

Only question is, will that look good everywhere else (IE 8/9/10, Google Crome, opera etc)?

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Replace image buttons with css

Post by DionDesigns »

*Daniel wrote:Only question is, will that look good everywhere else (IE 8/9/10, Google Crome, opera etc)?
If the linear-gradient CSS used in the current text buttons was used in my example, then it would have the same compatibility as the current text buttons.

The lone issue is the font. These buttons require a narrow font (as do the larger buttons, but we won't go there). Fonts such as Verdana or Open Sans would look ridiculous with these small buttons. I chose Droid Sans, but Ubuntu would have worked just as well. Arial would also work but it doesn't look as good as Ubuntu or Droid Sans at small point sizes.

In the long run, though, Arial will probably win out (in all cases). It's the only font being discussed that supports languages such as Hebrew, Arabic, Gujarati, and Kanji (meaning, 2/3 of the world's population). Open Sans, Droid Sans, and Ubuntu are limited to Latin/Cyrillic/Greek characters.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Replace image buttons with css

Post by Arty »

Gradient is not the issue at all. All modern browsers support it, except Safari that requires -webkit prefix and IE 8/9 that supports filter instead. Font is.

Please check your code in different browsers on multiple operating systems.

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Replace image buttons with css

Post by DionDesigns »

Arty wrote:Please check your code in different browsers on multiple operating systems.
Why?

phpBB has shown no interest in platform-consistent fonts. The current product has platform-consistent font issues that are orders of magnitude worse than the miniscule issues of a few buttons. The product in development has platform-consistent font issues that are orders of magnitude worse than the miniscule issues of a few buttons.

It's interesting how you ignored my comment that Open Sans as a webfont has no support for languages used by 2/3 of the world's population. This is an issue with all webfonts. I said it to you in another topic recently, and it applies here as well:
This very much comes across as a straw-man argument to justify something you want for your yourself as opposed to being for the benefit of the end-user.
If international support is important to the phpBB product, I'll go one step further and say that the use of webfonts in the core product is detrimental to the end-user. The solution is one I see mentioned a LOT around here...leave webfonts in the hands of style developers and out of the core...

On that note, I'm done with this topic.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Replace image buttons with css

Post by Arty »

What do you mean "why"? Are you so incompetent that you can't understand that people use more than one browser and multiple operating systems? This is default software, it must work for everyone, not just selected few.

This isn't 1999 when designers only worried about making their website work in one browser. These days users use many operating systems: Windows, OSX, iOS, Android, all of them deal with fonts differently and when proposing a solution that deals with fonts you must make sure it works for all of them.

Yet you seem to live in last century, insisting on solutions that work only in selected 1-2 browsers. Do you even know anything about design? Doesn't seem so. Your own website looks like it was designed 10-15 years ago, still using tables for layout, images designed in MS Paint and fonts that seem to be selected randomly. You have released exactly 0 styles, you have no experience whatsoever working with mobile designs.

If you want to constructively prove that your solution works, please provide proof instead of posting more gibberish. Why are you refusing to do so? In last topic I've provided proof that your solution is crap (just like almost everything you say) and in response you tried to derail thread into completely different issues, just like you are trying now.

P.S. -moz-linear-gradient is NOT valid CSS3 unless you are stuck with ancient Firefox 3.6
DionDesigns wrote:phpBB has shown no interest in platform-consistent fonts. The current product has platform-consistent font issues that are orders of magnitude worse than the miniscule issues of a few buttons. The product in development has platform-consistent font issues that are orders of magnitude worse than the miniscule issues of a few buttons.
Those are completely different issues. Just because some other part of style has problems, doesn't mean you can add more invalid code. Please stop trying to derail topics into unrelated issues (again).

User avatar
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Re: Replace image buttons with css

Post by MattF »

DionDesigns wrote:
Arty wrote:Please check your code in different browsers on multiple operating systems.
Why?
Its simply a "Best Practice"

If you're gonna use gradients, as well as text shadows, rounded corners and any other CSS3 effects, its quite simple to simply include -moz -webkit prefixed lines of css as fallbacks. Then you don't even really need to test (except in old IE). Heck, there are numerous sites out there that will generate all the fallback code for you as well!
for example, gradients: http://www.colorzilla.com/gradient-editor/

Your Gradient CSS should really be this:

Code: Select all

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
Has an irascible disposition.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Replace image buttons with css

Post by Arty »

That page is out of date.

-ms-linear-gradient - doesn't exist
-o-linear-gradient - Opera supports unprefixed version
-moz-linear-gradient - no longer needed because recent versions support unprefixed version and its one of browsers that is being updated automatically, so nobody is using old version
-webkit-gradient - no longer needed because Chrome supports unprefixed version and Safari supports -webkit-linear-gradient syntax

Also it is better to use background-image instead of background for gradient. Then you can use rgba values without having to add background color on each line.

User avatar
Pony99CA
Registered User
Posts: 986
Joined: Sun Feb 08, 2009 2:35 am
Location: Hollister, CA
Contact:

Re: Replace image buttons with css

Post by Pony99CA »

DionDesigns wrote:I did this for a client. Here's a sample using the default Prosilver background for the buttons. The button on the right is the current image, the one on the left is text-based:

Image
Cool, but can't you use either a backgroound imatge or text-based CSS (floating a bold “ over the button, perhaps) to get the "open quote" in the button, too? ;)

That way, even people who don't speak the board's language could figure out what the button did.

Steve
Last edited by Pony99CA on Tue Jun 04, 2013 2:03 am, edited 1 time in total.
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Replace image buttons with css

Post by Arty »

That can be done by adding ether background or text via :before pseudo element.

Code: Select all

ul.profile-icons li.quote-icon { position: relative; }
ul.profile-icons li.quote-icon:before { content: ''; display: block; position: absolute; top: 0; left: 0; add background image here and set width/height }
or

Code: Select all

ul.profile-icons li.quote-icon { position: relative; }
ul.profile-icons li.quote-icon:before { content: "\'\'"; display: block; position: absolute; top: 0; left: 0; add font here }

Post Reply