Attention all theme makers!

Working on a theme for LMMS? Post progress and get feedback.
Since the release of the next version of LMMS is getting near, I thought it'd be nice to post some guidelines on porting themes from 0.4.15 to the new LMMS.

This covers the most important things, some things may still be added but probably not too many, I'll update this text if needed.

=======================


Stylesheet
----------

Namechanges:

trackContainerView -> TrackContainerView

Additions - OpulenZ plugin knob style:

Code: Select all

	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:

Code: Select all

sfxrInstrumentView knob {
    color: #b06319;
    qproperty-outerColor: rgb(194, 177, 145);
    qproperty-innerRadius: 2;
    qproperty-outerRadius: 10;
    qproperty-lineWidth: 2;
}
Same as above.

The default stylesheet now also contains separate colours for the sfxr knobs. Your theme will work without these, but the knobs will not look as nice. Copy-paste them from the default theme CSS if you want them preserved.

Additions - Palette block:

Code: Select all

	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.

Addition - pattern colours:

Code: Select all

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

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

/* automation pattern */
AutomationPatternView {
	color: #99afff;
}
Defines the colours for patterns in the song editor.

Images
------
  • fader_knob.png
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.
  • progression_linear.png
  • progression_discrete.png
  • progression_cubic_hermite.png
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).
  • step_btn_add.png
  • step_btn_remove.png
These images are used now in the bb-editor, before they were unused.
  • bb_track_btn.png
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.
Addition: bb_track_btn.png

Must be added to themes.
Updated again for new plugin info (sfxr).
News: the pattern colours must now be defined in CSS.

This is important! Without this information in the CSS, your theme will probably make all patterns except bb-track patterns grey, making your theme unusable.

The upside is obvious: you get to choose those colours! You can now select what colour you want instrument, automation and sample track patterns to be.

Here's the CSS code:

Code: Select all

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

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

/* automation pattern */
AutomationPatternView {
	color: #99afff;
}
So would you add option to choose custom B&B pattern too?
sti2nd wrote:So would you add option to choose custom B&B pattern too?
You can already choose BB-pattern colours - they're user-definable. You can change the colour of any BB-pattern in LMMS by right-clicking the pattern and selecting "change colour". This was possible even in 0.4.15 and probably earlier.
Hi,
tried to update a theme applying this method, but I can't get rid of the piano-roll bug.

Even adding the lines you said in style.css (and having deleted all the spaces before every line*), the bug is still there, and the stylesheets looks a lot different from the new one taken from the default theme.


* the lines I added:

Code: Select all

opl2instrumentView knob {
	color: rgb(128,128,128);
	qproperty-outerColor: rgb(255,255,255);
	qproperty-innerRadius: 2;
	qproperty-outerRadius: 9;
	qproperty-lineWidth: 2;
}
sfxrInstrumentView knob {
	color: #b06319;
	qproperty-outerColor: rgb(194, 177, 145);
	qproperty-innerRadius: 2;
	qproperty-outerRadius: 10;
	qproperty-lineWidth: 2;
}

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}

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

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

    /* automation pattern */
AutomationPatternView {
color: #99afff;
}
And I added them at the end of the file...
(and of course I edited all the trackCont..etc... using the find&change function of my wordpad)


Then, idk why, using "code" and then copy-pasting the content will add some spaces at the beginning of every line...
Copy the piano roll block from the default theme.
AWESOME !!