Skip to content

Instantly share code, notes, and snippets.

@JamieLottering

JamieLottering/custom_theme.css

Created July 3, 2011 22:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JamieLottering/1062688 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JamieLottering/1062688 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JamieLottering revised this gist Jul 4, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion theme_boilerplate.css
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,6 @@
    /* Inner options */
    .dk_mytheme .dk_options_inner {}

    /* Set a width property here */
    /* Set a height / min-height property here */
    .dk_mytheme .dk_options_inner,
    .dk_mytheme.dk_touch .dk_options {}
  2. JamieLottering revised this gist Jul 4, 2011. No changes.
  3. JamieLottering revised this gist Jul 4, 2011. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions theme_boilerplate.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,12 @@
    /**
    * Your theme name here
    *
    * Say something about the theme
    *
    * Give yourself some credit here
    *
    */

    /* Container */
    .dk_mytheme .dk_container {}
    .dk_mytheme a {}
  4. JamieLottering revised this gist Jul 4, 2011. 1 changed file with 0 additions and 58 deletions.
    58 changes: 0 additions & 58 deletions custom_theme.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,61 +1,3 @@
    .dk_theme_orange {
    background: #ffffff;
    background: -moz-linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    background: -webkit-gradient(linear,
    left top,
    left bottom,
    color-stop(0%,#ffffff),
    color-stop(50%,#f1f1f1),
    color-stop(51%,#e1e1e1),
    color-stop(100%,#f6f6f6)
    );
    background: -webkit-linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    background: -o-linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    background: -ms-linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    background: linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    }
    .dk_theme_orange .dk_options a:hover,
    .dk_theme_orange .dk_option_current a {
    background-color: #E15A01;
    border-bottom-color: #604A42;
    color: #fff;
    text-shadow: #604A42 0 1px 0;
    }
    .dk_theme_orange .dk_toggle,
    .dk_theme_orange.dk_open .dk_toggle {
    background-color: transparent;
    }
    .dk_theme_orange.dk_focus .dk_toggle{
    box-shadow: 0 0 5px #E15A01;
    -moz-box-shadow: 0 0 5px #E15A01;
    -webkit-box-shadow: 0 0 5px #E15A01;
    }

    .dk_theme_black {
    background: #aebcbf;
    background: -moz-linear-gradient(top,
  5. JamieLottering revised this gist Jul 4, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dropkick_example_callback.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    $('.change').dropkick({
    change: function (value, label) {
    $('body').css({ background : value }).find('legend').css({ color: value });
    alert('You picked: ' + label + ':' + value);
    }
    });
  6. JamieLottering revised this gist Jul 4, 2011. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions select.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <select name="pretty" tabindex="1" class="pretty dk">
    <option value="">Choose a reaction</option>
    <option value="amazed">Amazed</option>
    <option value="bored">Bored</option>
    <option value="surprised">Surprised</option>
    </select>
  7. JamieLottering revised this gist Jul 4, 2011. 1 changed file with 29 additions and 0 deletions.
    29 changes: 29 additions & 0 deletions theme_boilerplate.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    /* Container */
    .dk_mytheme .dk_container {}
    .dk_mytheme a {}

    /* Toggle */
    .dk_mytheme .dk_toggle {}
    .dk_mytheme .dk_toggle:hover {}

    /* Focus State */
    .dk_mytheme.dk_focus,
    .dk_mytheme:focus {}
    .dk_mytheme.dk_focus .dk_toggle {}

    /* Open State */
    .dk_mytheme.dk_open {}
    .dk_mytheme.dk_open .dk_toggle {}

    /* Options Menu */
    .dk_mytheme .dk_options {}
    .dk_mytheme .dk_options a {}
    .dk_mytheme .dk_options a:hover,
    .dk_mytheme .dk_option_current a {}

    /* Inner options */
    .dk_mytheme .dk_options_inner {}

    /* Set a width property here */
    .dk_mytheme .dk_options_inner,
    .dk_mytheme.dk_touch .dk_options {}
  8. JamieLottering revised this gist Jul 4, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dropkick_example_callback.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    $('.change').dropkick({
    change: function (value, label) {
    $(this).parents('form').find('h4').css({ color : value });
    $('body').css({ background : value }).find('legend').css({ color: value });
    }
    });
  9. JamieLottering revised this gist Jul 4, 2011. 1 changed file with 78 additions and 16 deletions.
    94 changes: 78 additions & 16 deletions custom_theme.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,43 @@
    .dk_theme_orange {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
    background: #ffffff;
    background: -moz-linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    background: -webkit-gradient(linear,
    left top,
    left bottom,
    color-stop(0%,#ffffff),
    color-stop(50%,#f1f1f1),
    color-stop(51%,#e1e1e1),
    color-stop(100%,#f6f6f6)
    );
    background: -webkit-linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    background: -o-linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    background: -ms-linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    background: linear-gradient(top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
    );
    }
    .dk_theme_orange .dk_options a:hover,
    .dk_theme_orange .dk_option_current a {
    @@ -26,14 +57,45 @@
    }

    .dk_theme_black {
    background: #aebcbf; /* Old browsers */
    background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
    background: #aebcbf;
    background: -moz-linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
    );
    background: -webkit-gradient(linear,
    left top,
    left bottom,
    color-stop(0%,#aebcbf),
    color-stop(50%,#6e7774),
    color-stop(51%,#0a0e0a),
    color-stop(100%,#0a0809)
    );
    background: -webkit-linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
    );
    background: -o-linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
    );
    background: -ms-linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
    );
    background: linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
    );
    }
    .dk_theme_black .dk_toggle,
    .dk_theme_black.dk_open .dk_toggle {
  10. JamieLottering revised this gist Jul 4, 2011. 2 changed files with 54 additions and 12 deletions.
    64 changes: 53 additions & 11 deletions custom_theme.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,54 @@
    .dk_theme_orange .dk_options a:hover,
    .dk_theme_orange .dk_option_current a {
    background-color: #E15A01;
    border-bottom-color: #604A42;
    color: #fff;
    text-shadow: #604A42 0 1px 0;
    .dk_theme_orange {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
    }
    .dk_theme_orange.dk_focus .dk_toggle {
    box-shadow: 0 0 5px #E15A01;
    -moz-box-shadow: 0 0 5px #E15A01;
    -webkit-box-shadow: 0 0 5px #E15A01;
    }
    .dk_theme_orange .dk_options a:hover,
    .dk_theme_orange .dk_option_current a {
    background-color: #E15A01;
    border-bottom-color: #604A42;
    color: #fff;
    text-shadow: #604A42 0 1px 0;
    }
    .dk_theme_orange .dk_toggle,
    .dk_theme_orange.dk_open .dk_toggle {
    background-color: transparent;
    }
    .dk_theme_orange.dk_focus .dk_toggle{
    box-shadow: 0 0 5px #E15A01;
    -moz-box-shadow: 0 0 5px #E15A01;
    -webkit-box-shadow: 0 0 5px #E15A01;
    }

    .dk_theme_black {
    background: #aebcbf; /* Old browsers */
    background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
    }
    .dk_theme_black .dk_toggle,
    .dk_theme_black.dk_open .dk_toggle {
    background-color: transparent;
    color: #fff;
    text-shadow: none;
    }
    .dk_theme_black .dk_options a {
    background-color: #333;
    color: #fff;
    text-shadow: none;
    }
    .dk_theme_black .dk_options a:hover,
    .dk_theme_black .dk_option_current a {
    background-color: #E15A01;
    color: #fff;
    text-shadow: #604A42 0 1px 0;
    }
    2 changes: 1 addition & 1 deletion dropkick_example_theme.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    $('.custom_theme').dropkick({
    theme: 'orange',
    theme: 'black',
    change: function (value, label) {
    $(this).dropkick('theme', value);
    }
  11. JamieLottering revised this gist Jul 3, 2011. 1 changed file with 12 additions and 0 deletions.
    12 changes: 12 additions & 0 deletions custom_theme.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    .dk_theme_orange .dk_options a:hover,
    .dk_theme_orange .dk_option_current a {
    background-color: #E15A01;
    border-bottom-color: #604A42;
    color: #fff;
    text-shadow: #604A42 0 1px 0;
    }
    .dk_theme_orange.dk_focus .dk_toggle {
    box-shadow: 0 0 5px #E15A01;
    -moz-box-shadow: 0 0 5px #E15A01;
    -webkit-box-shadow: 0 0 5px #E15A01;
    }
  12. JamieLottering revised this gist Jul 3, 2011. 3 changed files with 12 additions and 5 deletions.
    5 changes: 5 additions & 0 deletions dropkick_example_callback.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    $('.change').dropkick({
    change: function (value, label) {
    $(this).parents('form').find('h4').css({ color : value });
    }
    });
    6 changes: 1 addition & 5 deletions dropkick_example_default.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1 @@
    <script type="text/javascript" charset="utf-8">
    $(function () {
    $('.default').dropkick();
    });
    </script>
    $('.default').dropkick();
    6 changes: 6 additions & 0 deletions dropkick_example_theme.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    $('.custom_theme').dropkick({
    theme: 'orange',
    change: function (value, label) {
    $(this).dropkick('theme', value);
    }
    });
  13. JamieLottering created this gist Jul 3, 2011.
    5 changes: 5 additions & 0 deletions dropkick_example_default.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <script type="text/javascript" charset="utf-8">
    $(function () {
    $('.default').dropkick();
    });
    </script>