To do your own theme, you need:
1 - imagine name, for example gray
2 - define property theme
with theme name.
3 - rewrite css rules with prefix fancy-theme-name
,
in this sample fancy-theme-gray
.
//your-style.css .fancy-theme-gray .fancy-field-radio-input { background-image: url(img/unice-radio.png); } .fancy-theme-gray .fancy-field-radio .fancy-field-text:hover .fancy-field-radio-input { background-position: 0 0px; } .fancy-theme-gray .fancy-field-radio-on:hover .fancy-field-radio-input { background-position: 0 -14px !important; } .fancy-theme-gray .fancy-field .fancy-field-label { color: #737373; font-family: "open sans", sans-serif; font-size: 14px; font-weight: 300; } .fancy-theme-gray .fancy-field-checkbox-input { background-image: url(img/unice-checkbox.png); } .fancy-theme-gray .fancy-field-checkbox-input:hover { background-position: 0 0px; } .fancy-theme-gray .fancy-checkbox-on .fancy-field-checkbox-input { background-position: 0 -14px; } .fancy-theme-gray .fancy-checkbox-on .fancy-field-checkbox-input:hover { background-position: 0 -14px; } .fancy-theme-gray .fancy-button { background: #168de2; border-radius: 20px; font-family: 'open sans', sans-serif; font-size: 14px; font-stretch: normal; font-variant: normal; font-weight: normal; padding: 0 15px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .fancy-theme-gray .fancy-button:hover { background-color: #ffa930; } .fancy-theme-gray .fancy-panel-header { background: #cacaca; background: #e2e2e2; } .fancy-theme-gray .fancy-panel-header .fancy-panel-header-text { color: #737373; font-family: 'open sans', sans-serif; font-size: 14px; font-weight: bold; } .fancy-theme-gray .fancy-field .fancy-field-text-input { border: 1px solid #d9d9d9; } .fancy-theme-gray .fancy-combo table { border: 1px solid #d9d9d9; } .fancy-theme-gray .fancy-textarea .fancy-textarea-text-input { border: 1px solid #d9d9d9; } .fancy-theme-gray.fancy-panel .fancy-panel-body { border: 1px solid #f2f2f2; } .fancy-theme-gray .fancy-form { background-color: #fff; } .fancy-theme-gray.fancy-panel .fancy-panel-bbar { background-color: #fff; } .fancy-theme-gray.fancy-combo-result-list li.fancy-combo-list-active { background-color: #5897fb; }