Skinning Guide - Revision history

Ludek: /* Folder structure */

2024-03-06T17:58:45Z

Folder structure

← Older revision		Revision as of 17:58, 6 March 2024
Line 16:		Line 16:
	Icons are held in the skin/icons subfolder. They must all be in SVG format. Icons are organized/named by filename,		Icons are held in the skin/icons subfolder. They must all be in SVG format. Icons are organized/named by filename,
	(Tip: To more easily browse and preview the icons, check out tibold's "svgsee" program, which shows thumbnail previews of svg files: https://github.com/tibold/svg-explorer-extension/releases)		(Tip: To more easily browse and preview the icons, check out tibold's "svgsee" program, which shows thumbnail previews of svg files: https://github.com/tibold/svg-explorer-extension/releases)

			'''Note:''' When creating your own skin, use the '_add' suffix in the filename to not overwrite the base file. So instead of 'skin_base.less' use 'skin_base_add.less' and thus values/variables defined in 'skin_base_add.less' is just complement to the base 'skin_base_add.less'. See other skin examples (e.g. unzip /skins/MeterialDesign.zip) to see and understand the structure.

	===Adding configurable settings to your skin===		===Adding configurable settings to your skin===

Drakinite: /* Creating Icons */

2022-05-01T17:11:22Z

Creating Icons

← Older revision		Revision as of 17:11, 1 May 2022
Line 26:		Line 26:
	For creating icons, we recommend a program like [https://inkscape.org Inkscape], a free and open-source vector graphics software. If you use a program like Adobe Illustrator, more work must be done after exporting to clean up the SVG and make it display properly in MediaMonkey.		For creating icons, we recommend a program like [https://inkscape.org Inkscape], a free and open-source vector graphics software. If you use a program like Adobe Illustrator, more work must be done after exporting to clean up the SVG and make it display properly in MediaMonkey.

	For info on how to use icons in code ~~or HTML~~, see [[Getting_Started_(Addons)#Icons\|Getting Started (Addons)/Icons]].		For info on how to use icons in code, see [[Getting_Started_(Addons)#Icons\|Getting Started (Addons)/Icons]].

	===Creating a Document===		===Creating a Document===

Drakinite: /* Creating Icons */

2022-05-01T17:11:03Z

Creating Icons

← Older revision		Revision as of 17:11, 1 May 2022
Line 24:		Line 24:
	==Creating Icons==		==Creating Icons==

	For creating icons, we recommend [https://inkscape.org Inkscape], a free and open-source vector graphics software. If you use a program like Adobe Illustrator, more work must be done after exporting to clean up the SVG and make it display properly in MediaMonkey.		For creating icons, we recommend a program like [https://inkscape.org Inkscape], a free and open-source vector graphics software. If you use a program like Adobe Illustrator, more work must be done after exporting to clean up the SVG and make it display properly in MediaMonkey.

			For info on how to use icons in code or HTML, see [[Getting_Started_(Addons)#Icons\|Getting Started (Addons)/Icons]].

	===Creating a Document===		===Creating a Document===

Drakinite: /* SVG Export */

2021-12-11T19:17:17Z

SVG Export

← Older revision		Revision as of 19:17, 11 December 2021
Line 50:		Line 50:
	# Navigate to Input/Output > SVG output		# Navigate to Input/Output > SVG output
	# Ensure that:		# Ensure that:
	## Use named colors is unchecked		## ''Use named colors'' is unchecked
	## XML formatting > Inline attributes is checked		## ''XML formatting > Inline attributes'' is checked

	When saving:		When saving:

Drakinite: /* Creating Shapes and Text */

2021-12-11T19:16:55Z

Creating Shapes and Text

← Older revision		Revision as of 19:16, 11 December 2021
Line 34:		Line 34:

	===Creating Shapes and Text===		===Creating Shapes and Text===
	It is important to convert any prebuilt shapes and text into pure paths, to ensure that the SVGs display properly on all systems ~~despite the fonts~~. To do this:		It is important to convert any prebuilt shapes and text into pure paths, to ensure that the SVGs display properly on all systems. To do this:
	# Right click the shape or text		# Right click the shape or text
	# Click on Path > Object to Path		# Click on Path > Object to Path

Drakinite: Added icon creation tutorial

2021-12-11T19:15:47Z

Added icon creation tutorial

← Older revision		Revision as of 19:15, 11 December 2021
Line 21:		Line 21:

	Make sure your JSON syntax is valid. We recommend using an IDE that supports syntax checking, such as Visual Studio Code (however, it is not necessary).		Make sure your JSON syntax is valid. We recommend using an IDE that supports syntax checking, such as Visual Studio Code (however, it is not necessary).

			==Creating Icons==

			For creating icons, we recommend [https://inkscape.org Inkscape], a free and open-source vector graphics software. If you use a program like Adobe Illustrator, more work must be done after exporting to clean up the SVG and make it display properly in MediaMonkey.

			===Creating a Document===
			Click File > New to create a new document.
			To resize your icon to 100x100:
			# open Document Properties (Ctrl + Shift + D)
			# Change ''Display Units'' to px
			# Under ''Custom Size'', change Width and Height to 100 and Units to px.

			===Creating Shapes and Text===
			It is important to convert any prebuilt shapes and text into pure paths, to ensure that the SVGs display properly on all systems despite the fonts. To do this:
			# Right click the shape or text
			# Click on Path > Object to Path

			===Colors===
			It is important that icons display properly on all skins. Please do not include colors in your icons, so that the user gets a consistent experience for all icons. To do this:
			# Select all objects in the document
			# Open the Fill and Stroke menu (Ctrl + Shift + F)
			# Under the Fill tab, ensure that "Unset paint" is selected (Usually looks like a question mark)
			# Under the Stroke tab, ensure that "Unset paint" is selected (Usually looks like a question mark)

			===SVG Export===
			To export SVGs correctly, change the export settings:
			# Go to Edit > Preferences
			# Navigate to Input/Output > SVG output
			# Ensure that:
			## Use named colors is unchecked
			## XML formatting > Inline attributes is checked

			When saving:
			# Click File > Save As...
			# Instead of "Inkscape SVG", select "Plain SVG"

			===After saving the icon===
			After saving, only one extra thing must be done to make sure the icon displays properly.
			# Open the SVG icon in a text editor.
			# Close to the top, you will see <code><svg width="100" height="100" viewBox...</code>
			# Change <code>width="100" height="100"</code> to <code>width="100%" height="100%"</code>. This will prevent the icon from being sized incorrectly.

	''More coming soon''		''More coming soon''

Drakinite at 21:56, 12 November 2021

2021-11-12T21:56:30Z

← Older revision		Revision as of 21:56, 12 November 2021
Line 16:		Line 16:
	Icons are held in the skin/icons subfolder. They must all be in SVG format. Icons are organized/named by filename,		Icons are held in the skin/icons subfolder. They must all be in SVG format. Icons are organized/named by filename,
	(Tip: To more easily browse and preview the icons, check out tibold's "svgsee" program, which shows thumbnail previews of svg files: https://github.com/tibold/svg-explorer-extension/releases)		(Tip: To more easily browse and preview the icons, check out tibold's "svgsee" program, which shows thumbnail previews of svg files: https://github.com/tibold/svg-explorer-extension/releases)

			===Adding configurable settings to your skin===
			As of 5.0.2, you do not have to write JavaScript code to add user-configurable settings to your skin. Simply add an item to your skin's info.json, titled '''skin_options''', containing an array of options. We will write detailed information on the supported controls & syntax soon, but you can get started by following the examples of Material Design and Monkey Groove. Additionally, the specifications are described here: https://www.ventismedia.com/mantis/view.php?id=18449

			Make sure your JSON syntax is valid. We recommend using an IDE that supports syntax checking, such as Visual Studio Code (however, it is not necessary).

	''More coming soon''		''More coming soon''

Drakinite: init

2020-12-20T05:54:08Z

init

New page

MediaMonkey 5 offers unprecedented flexibility with its skins and layouts. Skins and layouts can range anywhere from changing colors and text size to overhauling the entire interface. This guide will walk you through the basics of how to create a new skin.

==Introduction to the Skinning Framework==
The structure of the MM5 user interface is controlled by HTML, and its styling (Colors, sizing, positioning, margins, padding, etc.) is controlled by CSS. The skinning framework uses a language extension called LESS. Skins are written in LESS, which is then compiled into CSS in runtime. It allows for cleaner and more modular styling, with extensive support for variables and combining classes. The full documentation is available at http://lesscss.org.

===Folder structure===
All of the LESS styling can be found under the skin folder. The "main" skin file is skin_complete.less, which imports all of the other LESS files. The skinning framework is split into multiple different files for organizational purposes.
* Skin_base controls general properties such as colors;
* Skin_layout controls structural properties such as sizing and structure;
* Skin_animations controls definitions for animations;
* Skin_menu controls pop-up menus (Context menus and header menus);
* Skin_tabs controls tabs in the header;
* Skin_mainwindow controls the general window;
as well as others which are self-explanatory by name.

Icons are held in the skin/icons subfolder. They must all be in SVG format. Icons are organized/named by filename,
(Tip: To more easily browse and preview the icons, check out tibold's "svgsee" program, which shows thumbnail previews of svg files: https://github.com/tibold/svg-explorer-extension/releases)

''More coming soon''