[edit]
*** This thread is dead. for the updated version search ‘Theme Selector Installation’ in the Development talks section. 
***
[/edit]
Hi All,
I’ve created a ‘colors.css’ file to allow a fairly simple colour change but my knowledge of css etc is very limited and I cant figure out how to override the colours on the playback time circle and volume knob in my css file. (data-fgcolor and data-bgcolor found in the ‘indextpl.html’ file). is this actually possible or am I banging my head against a brick wall? I really hope one of you clever chaps can enlighten me.
thanks in advance, sog. 
oh, and thanks again for a really great audio player!
*edit - almost complete… (in red and black - but its easy to edit) [updated: 02/mar/2015]
copy and paste the code below into a file named colors.css and place it in the var/www/css folder…
[code]/* Main Body Background colour */
html, body, .btnlist, #timeknob, #timeflow, #playlist, #database, #playback,
.playlist li, .database li, .input-large .input-append,
input[type=“text”], .toggle, .drpodown-toggle {
background: #000 !important; }
a[title=“Actions”] { border: 2px solid #000 !important; }
#volume {
background: #000; } /* DONT USE “!important” HERE!! */
/* Main Body Background colour2 - Menus Statusbars etc. */
.playlist .active, .database .active, .ui-pnotify, .dropdown-menu,
#menu-top, #menu-bottom, #menu-top .dropdown-menu > li > a, .alert-info,
#context-menus .dropdown-menu > li > a, #menu-bottom a, .tile, .form-actions {
background: #600 !important; }
.btnlist {
border-top: 2px solid #600 !important;
border-bottom: 2px solid #600 !important; }
.playlist li, .database li {
border-bottom: 2px solid #600 !important; }
/* Main Body Foreground colour1 - Artist Album and Song info */
html, body, a, a:hover, strong, h1, h2, h3, h4, .alert-info,
#currentsong, #currentartist, #currentalbum, .playlist li, .database li,
#db-currentpath, #countdown-display, .volumeknob, .toggle-radio, .input-large {
color: #fff !important; }
/* Main Body Foreground colour2 - Other info */
#playlist-position, #format-bitrate, #twbutton, #fbbutton, #gbutton,
.playlist span, .playlist em, .database span, .database em, .db-icon,
#total, p, .help-block, .control-label, .playlist li::before, .icon-root, .tile {
color: #f00 !important; }
/* Buttons and Menus -Normal colour */
.btn, .btn:active, .btn.active, .btn:hover, .btn:focus,
.ui-pnotify .alert, #menu-bottom li {
color: #ffffff !important;
background: #700 !important; }
.input-large, input[type=“text”] {
border-color: #700 !important; }
/* Buttons and Menus - Highlight colour */
.playbackknobcolors {
color: #ff00ff;
background: #0000ff; }
.btn.btn-primary, .selected, .active,
.btn.btn-primary:hover, .btn.btn-primary:focus,
.btn.btn-primary:active, .btn.btn-primary.active,
#menu-bottom li.active a {
color: #FFFFFF !important;
background: #b00 !important; }
.input-large:focus, input[type=“text”]:focus {
border-color: #b00 !important; }
.toggle {
border: 2px solid #b00 !important; }
/* NON COLOUR RELATED TWEAKS */
#volume { border:0px solid #000 !important; } /* hides volume outline on page load. */
.form-actions { border-top: 0px solid #b00 !important; } /* odd line removed */
a[title=“Actions”] { position: relative !important; z-index: 10; } /* bodge buttons over text in music browser */
#menu-top, #menu-bottom { height: 42px !important; border-top: 1px solid #000; border-bottom: 1px solid #000 }
#previous, #stop, #play, #next { width: 55px; border: 1px solid #000 !important; } /* MAKE PLAYBACK BUTTONS BIGGER */
#volumeup, #volumemute, #volumedn, #repeat,
#random, #single, #consume { margin: 0 1px; width: 45px; }
.playback-controls { margin: 0 0 0 -125px; width: 250px !important; } /* AS ABOVE */
#single { display: none; } /* HIDE SINGLE PLAY BUTTON */
#volume, #timeknob, .container, .dropdown {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none; } /* PREVENTS TEXT ITEMS FROM BEING SELECTABLE */
.dropdown-toggle { border: 1px solid #b00; }
#menu-settings { border: 0 !important; } /* THIS PREVENTS THE ABOVE PUTTING A BORDER AROUND THE MENU TXT */[/code]
Then add the line
<link rel="stylesheet" href="css/colors.css">a line above in the file var/www/_header.php and youre done!
*(you may need to refresh the volumio page a few times for it to change)