Difference between revisions of "Skinning"

From Mumble Wiki
Jump to: navigation, search
Line 96: Line 96:
  
 
[[Category:Development]]
 
[[Category:Development]]
 +
[[Category:Needs Update for 1.2.0]]

Revision as of 04:30, 15 November 2009

Note: This tutorial will probably not be complete.

Creating a Mumble Skin

QSS Files

In your settings you may select a QSS file as a skin.

It's basic structure may include:

/* this is a comment */

QTreeView {
  background-color: white;
  color: black;
}
 
QTextBrowser {
  background-color: #CCCCFF; /* 3 digit hex colors also acceptable: #CCF */
}

QMenuBar {
  /* place more stuff here */
}
QMenu {
  /* place more stuff here */
}

You may use background-color and color like a CSS definition.

  • QTreeView refers to the channel/player area of Mumble.
  • QTextBrowser refers to where messages are printed.
  • QMenuBar and QMenu refers to the top menu.

For more complex skinning, your QSS file should have more general elements, such as scrollbars, checkboxes, buttons, and text. It is recommended to refer to the Qt Style Sheets Documentation for this. For styling a particular part of Mumble, see Qt Structure.

Standards

These are more recommendations than standards, but either way, it's here to reduce any confusion.

Skins Directory

The "skins" directory is where all the skins should go. You then should make your skin within it's own directory. For example, place your skin QSS file in your skin's own directory like so: "C:\Program Files\Mumble\skins\yourskin\yourskin.qss". If you use additional images not already defined by Mumble you should keep it within its own directory as described here. Here's an example of such a case:

/* change the left arrow of the scrollbar */
QScrollBar::left-arrow {
  image: url(./skins/yourskin/arrow_left.png);
}

Notice the period "." means the current directory. So, the current directory is Mumble's root directory (eg: "C:\Program Files\Mumble"). Thus, the image is located at "C:\Program Files\Mumble\skins\yourskin\arrow_left.png". Refer to the Qt Style Sheets Documentation, as previously linked, for more information.

It's worth mentioning the bit of code previously mentioned should not be used. It is much better to use the following:

  image: url(skin:arrow_left.png);

This is assuming arrow_left.png is in the same directory as the current QSS file and accomplishes the exact same thing as the former.

Style

It is recommended to use the "WindowsXP" or "WindowsVista" style for all skins. This is because it has the least cosmetic defects.

Changing Icons

If you place your QSS skin file in a folder with icons, the icons will be loaded next time Mumble is started.

Here's a list of icon files:

  • authenticated.png
  • channel.png
  • channel_linked.png
  • config_asio.png
  • config_basic.png
  • config_dsound.png
  • config_msgs.png
  • config_network.png
  • config_osd.png
  • config_plugin.png
  • config_shortcuts.png
  • config_ui.png
  • deafened_overlay.png
  • deafened_self.png
  • deafened_server.png
  • mumble.16x16.png
  • mumble.32x32.png
  • mumble.48x48.png
  • mumble.64x64.png
  • muted_local.png
  • muted_overlay.png
  • muted_self.png
  • muted_server.png
  • talking_alt.png
  • talking_off.png
  • talking_on.png

See Also

  • Skins for a list of Skins