Theme Porting Guide

Note: as the development of 1.0.0 is still ongoing, this guide will likely be updated from time to time, until 1.0.0 is released.

Stylesheet[edit]

Namechanges:

trackContainerView -> TrackContainerView

Additions - OpulenZ plugin knob style:

opl2instrumentView knob {
color: rgb(128,128,128);
qproperty-outerColor: rgb(255,255,255);
qproperty-innerRadius: 2;
qproperty-outerRadius: 9;
qproperty-lineWidth: 2;
}

This is needed for the new instrument. You can leave it as is or modify the knob line colour, like on other instruments.

Additions - sfxr plugin knob style:


sfxrInstrumentView knob {
	color: #000;
	qproperty-outerColor: rgb(194, 177, 145); 
	qproperty-innerRadius: 2;
	qproperty-outerRadius: 9;
	qproperty-lineWidth: 2;
}
 
sfxrInstrumentView knob#envKnob {
	color:	#263352;
	qproperty-outerColor: #4b66a4;
}

sfxrInstrumentView knob#freqKnob {
	color:	#1e4a22;
	qproperty-outerColor: #3c9544;
}

sfxrInstrumentView knob#changeKnob {
	color:	#591c1c;
	qproperty-outerColor: #b23737;
}

sfxrInstrumentView knob#sqrKnob {
	color:	#3b2714;
	qproperty-outerColor: #724c27;
}

sfxrInstrumentView knob#repeatKnob {
	color:	#292929;
	qproperty-outerColor: #515151;
}

sfxrInstrumentView knob#phaserKnob {
	color:	#144c4d;
	qproperty-outerColor: #299899;
}

sfxrInstrumentView knob#filterKnob {
	color:	#47224c;
	qproperty-outerColor: #8e4397;
}

Same as above, except the sfxr plugin has code for different coloured knob lines. The knobs are colour-coded and grouped by type.

Additions - Palette block:

palette:background {color: #5b6571}
palette:windowtext {color: #f0f0f0}
palette:base {color: #808080}
palette:text {color: #e0e0e0}
palette:button {color: #c9c9c9}
palette:shadow {color: #000000}
palette:buttontext {color: #000000}
palette:brighttext {color: #4afd85}
palette:highlight {color: #202020}
palette:highlightedtext {color: #ffffff}

Notes: each line must begin with "palette:", with no leading whitespace, and the next word must be written right next to it - no space after the colon (:). The color value **MUST** be of the form #RRGGBB, no rgb(x,y,z) or rgba(x,y,z,a), no #RGB. I know this is a bit clunky and hacky, but that's how it is right now and at least it lets you modify colours. Omitting the palette block will not break the theme, but instead the default colours will be used for things - so you'll probably want to add it in and modify the colour values to make them fit your theme.

The "brighttext" colour is used on the FX mixer to highlight the text of the active channel, and on those blinky things on the instrument tracks that blink in time with the notes. "button" is used as the base colour for buttons, although you can override this with CSS so it's not all that useful. "buttontext" is the same. "highlight" and "highlightedtext" - like it says on the tin. Again, these can be overridden with CSS - but not everywhere, I think... so better set them just in case. "windowtext" is an important one: it is used for the lines on the default knobs (not ones on instruments), both the large and small ones. So you can now style your knobs better!

Look at the new stylesheet for hints on how to do some more cool things, such as modifying scrollbars, or that neat (if I say so myself) popping-up effect of the text boxes.

Additions - Pattern colours

/* instrument pattern */
patternView {
	color: rgb( 119, 199, 216 );
}

/* sample track pattern */
SampleTCOView { 
	color: rgb( 74, 253, 133 );
}

/* automation pattern */
AutomationPatternView {
	color: #99afff;
}

These define the instrument, sample track and automation pattern colours in song editor (and bb-editor for automations). You can only change the base colour, the other colours are still unchangeable for now, so choose your colours wisely...

Images[edit]

must be the same width as fader_background now, ie. 23 pixels. Exactly 23. Height can be whatever, although you shouldn't probably make it very much taller than the original. A few pixels difference is fine.

These three images are for the new buttons in automation editor which let you choose how you edit automations (freehand, linear vectors or curve vectors).

These images are used now in the bb-editor, before they were unused.

Must be added. This image now houses the icon for the bb-track-editor-button in the main toolbar, while bb_track.png is used only for the tracks themselves.