Sample Custom CSS Code

Doug edited this page Nov 12, 2013 · 7 revisions
Clone this wiki locally

Dave has been gracious enough to share some of his custom styles he has put together for QuickJava 2, here's what he has to say about it:

I (Dave) have made a few sample custom button styles for QuickJava 2. In each example, the first row is for the Default (Off) button and the second row is for the Enabled (On) button. The styles contain multiple options, each of which can be changed or deleted.

The code for the default buttons can be found at https://github.com/ThatOneGuyDotNet/QuickJava/blob/master/content/skin/classic/quickjava/quickjava.css

I've made screenshots (for OS X only) to give you an idea of how each style looks. Including Windows/Linux would involve such a proliferation of permutations that I just don't care to tackle it! (Which Windows version? XP? 7? 8? Classic skin? Glass? Which Theme? ... You get the idea.)

These are just some of Dave's work, for the current full list visit his DropBox page


Default

DEFAULT


Plastic Translucent

PLASTIC TRANSLUCENT

background:linear-gradient(rgba(255,110,110,0.875),rgba(221,76,76,0.875),rgba(255,110,110,0.875));width:21px;

background:linear-gradient(rgba(110,162,212,0.875),rgba(76,128,178,0.875),rgba(110,162,212,0.875));


Plastic Opaque

PLASTIC OPAQUE

background:linear-gradient(rgb(255,110,110),rgb(221,76,76),rgb(255,110,110));width:21px;

background:linear-gradient(rgb(110,162,212),rgb(76,128,178),rgb(110,162,212));


Flat Translucent

FLAT TRANSLUCENT

background:linear-gradient(rgba(247,102,102,0.875),rgba(230,85,85,0.875),rgba(247,102,102,0.875));width:21px;border-radius:2px;

background:linear-gradient(rgba(102,153,204,0.875),rgba(85,136,187,0.875),rgba(102,153,204,0.875));


Flat Opaque

FLAT OPAQUE

background:linear-gradient(rgb(247,102,102),rgb(230,85,85),rgb(247,102,102));width:21px;border-radius:2px;

background:linear-gradient(rgb(102,153,204),rgb(85,136,187),rgb(102,153,204));


Oval

OVAL

background:linear-gradient(rgba(255,110,110,0.875),rgba(221,76,76,0.875),rgba(255,110,110,0.875));width:27px;border-radius:99px;

background:linear-gradient(rgba(110,162,212,0.875),rgba(76,128,178,0.875),rgba(110,162,212,0.875))


OS X

OS X

background:linear-gradient(#FFF,#CCC);color:#666;width:25px;height:19px;padding:2px;

background:linear-gradient(#777,#666);color:#FFF;


A note from the QuickJava Author (Doug): You can also change some of the spacing by adjusting the margins, like for the oval's default above can be changed to this:

Oval Narrow

background:linear-gradient(rgba(255,110,110,0.875),rgba(221,76,76,0.875),rgba(255,110,110,0.875));width:27px;border-radius:99px; margin-left: 0px;margin-right:1px;

StatCounter