Symphony.

At various places in the Symphony UI there are PNGs used for buttons, namely the green “Create new” and grey “Delete” call to actions. While these are rather nice, I think they slightly hinder development because it’s a pain to create new PNGs. This is particularly true for Extensions.

I propose changing these buttons so that they are rendered using plain HTML and CSS. We would have to change the front from its current bitmap-font type to something close (perhaps 10px of the core font?). Rounded corners can be achieved in Safari/Firefox using border-radius and would fall-back to square corners in IE.

With a generic button class and passing a colour (green, grey etc.), Extension developers would have a quick way of adding these buttons, and changing the copy, into their creations.

It will also be another step towards making Symphony fully translatable.

Thoughts?

YES. But I suppose you already knew that.

Here’s an approximation of the current design:

button {
    padding: 0 8px;
    border: 0;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    margin: 0;
    color: #FFF;
    font-family: Verdana, sans-serif;
    font-size: 9px;
    line-height: 15px;
    text-transform: uppercase;
    cursor: pointer;
}
button.green {
    background-color: rgb(129, 185, 52);
}
button:hover,
button:focus {
    background-color: rgb(0, 0, 0);
}

...

<button class="green">create new</button>

I agree. And Scott is on the record as saying he hates the current implementation:

Also, I really hate image-based text. I only see them as temporary, since to get serious about localisation, we’d need to get rid of these images.

Excellent. Thanks for the CSS briandrum. Who fancies integrating this? ;-)

Please make the “create new” buttons a little bigger! Clients miss them a lot. The “delete” button can stay nice and small, though. :-)

Good idea nixing the image-based buttons.

Yes, I’m surprised the image-based buttons are still present since they are widely disliked.

Please make the “create new” buttons a little bigger!

+9999981!

+9999981!

Are you sure? Any serious developer would gor for:

+9999982!

:-)

I’d like to second—or are we up to third?—the request for making the “Create New” buttons bigger. I’m using Symphony on some client sites and beefier buttons would definitely be very handy, especially considering their placement isn’t where most people normally look.

Woot! I’m a Symphony core developer.

Well, this just needed a little CSS, so I adapted briandrum’s code for the anchors and buttons used in the admin interface. It took a bit of fiddling to get this to work consistently for Firefox and Safari. It’ll need some testing in other browsers. Let me know if you see any issues. Thanks.

Anyway, looks good to me, so I sent a pull request for the GitHub commit.

Hmm. I had left some blank lines and an empty CSS rule. Best to use this commit instead.

I love this community! In four hours there’s a patch submitted for the next release :-)

Glad to help!

I’m a front end guy, so this is where I can contribute. Hopefully, I can learn more to help out with the back end.

This is now in the integration branch.

Incidentally, Rowan (buzzomatic) had partially done this and was going to be put into a future point release at some point. Thanks bauhouse for expediting the process :)

What about using @font-face and integrating silkscreen to keep the look and feel in modern browsers?

Thanks, Allen!

@Nils, It sounded like the majority wanted a large typeface, but I think it would be good to have the option to use silkscreen. Would it be best offered as a GitHub branch?

I’m not sure whether it should be an option. Is the consensus is “larger” then we should go with larger and drop Silkscreen. The bitmap font doesn’t really fit the rest of Symphony, whereby many styles fall back on browser/OS defaults.

I like Silkscreen, but in favour of consistence and simplicity I vote for Browser defaults.

@Nils: BTW: You could probably add some desired @import rules to Symphony’s admin CSS using my Admin CSS Override extension.