Difference between revisions of "Skinning"

From Mumble Wiki
Jump to: navigation, search
Line 9: Line 9:
 
It's basic structure may include:
 
It's basic structure may include:
 
<code>
 
<code>
 +
/* this is a comment */
 +
 
  QTreeView {
 
  QTreeView {
   background-color:white;
+
   background-color: white;
   color:black;
+
   color: black;
  }
+
}
+
 
 
  QTextBrowser {
 
  QTextBrowser {
   background-color:#CCCCFF;
+
   background-color: #CCCCFF; /* 3 digit hex colors also acceptable: #CCF */
  }
+
}
 
   
 
   
  QMenuBar{
+
  QMenuBar {
   }
+
   /* place more stuff here */
  QMenu{
+
}
   }
+
  QMenu {
 +
   /* place more stuff here */
 +
}
 
</code>
 
</code>
 
You may use <code>background-color</code> and <code>color</code> like a [http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS] definition.
 
You may use <code>background-color</code> and <code>color</code> like a [http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS] definition.

Revision as of 19:40, 23 May 2008

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.

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