Difference between revisions of "Skinning"

From Mumble Wiki
Jump to: navigation, search
m
Line 1: Line 1:
 
Note: This tutorial will probably not be complete.
 
Note: This tutorial will probably not be complete.
 +
 +
==Introduction==
 +
 +
For the purpose of avoiding confusion, we will use one skin in this entire guide, named ''Chocolate''.
 +
 +
Let us start off by realizing that creating a skin for Mumble is not hard, but it ''is'' complicated. Before asking other people what to do, try googling! It really, really works!
 +
 +
Now, here is an explanation of the exact layout of a Mumble skin.
 +
 +
First, in order to use a skin, you must have a ''skins'' folder inside of Program Files\Mumble. Inside of the ''skins'' folder, you will need to create ''another'' folder, and this folder will be your skin's name. For example, if I wanted to create a skin called "Chocolate", then I would have the following directory structure:
 +
C:\Program Files\Mumble\skins\Chocolate
 +
And here is what is inside this folder:
 +
Chocolate.qss
 +
authenticated.svg
 +
channel.svg
 +
channel_active.svg
 +
channel_linked.svg
 +
comment.svg
 +
comment_seen.svg
 +
config_asio.png
 +
config_basic.png
 +
config_dsound.png
 +
config_lcd.png
 +
config_msgs.png
 +
config_network.png
 +
config_osd.png
 +
config_plugin.png
 +
config_shortcuts.png
 +
config_ui.png
 +
deafened_self.svg
 +
deafened_server.svg
 +
layout_classic.svg
 +
layout_custom.svg
 +
layout_hybrid.svg
 +
layout_stacked.svg
 +
mumble.osx.png
 +
mumble.svg
 +
muted_local.svg
 +
muted_self.svg
 +
muted_server.svg
 +
muted_suppressed.svg
 +
rec.svg
 +
talking_alt.svg
 +
talking_off.svg
 +
talking_on.svg
 +
talking_whisper.svg
 +
 +
If you want to look at any of these icons, you can find them [http://mumble.git.sourceforge.net/git/gitweb.cgi?p=mumble/mumble;a=tree;f=icons;h=9691c5ce970489fd92445dce0bc8b59d595da093;hb=HEAD here].
 +
 +
But this is all a skin is. It is ''one'' file that contains the coding elements of the skin - the code that defines the color of the background, the fonts, etc. - and then the images that Mumble uses. '''''Any images listed here are autoloaded by simply placing them in Program Files\Chocolate'''''.
 +
 +
Here are images that can be defined in the QSS:
 +
arrow_down.png   
 +
arrow_left.png   
 +
arrow_right.png              arrow_*.png dimensions: 7x7
 +
arrow_up.png     
 +
branch.png
 +
branch_closed.png 
 +
branch_end.png                branch_*.png dimensions: 10x18
 +
branch_more.png
 +
branch_open.png
 +
checkbox_0.png
 +
checkbox_0_d.png
 +
checkbox_0_hover.png
 +
checkbox_0_hover_d.png
 +
checkbox_0_pressed.png
 +
checkbox_1.png                checkbox_*.png dimensions: 13x13
 +
checkbox_1_d.png
 +
checkbox_1_hover.png
 +
checkbox_1_hover_d.png
 +
checkbox_1_pressed.png
 +
radiobutton_0.png
 +
radiobutton_0_hover.png
 +
radiobutton_0_pressed.png
 +
radiobutton_1.png            radiobutton_*.png dimensions: 13x13
 +
radiobutton_1_hover.png
 +
radiobutton_1_pressed.png
 +
 +
You should be able to use SVGs instead of PNGs for these images, if you so wish.
 +
 +
== Explanation of SVG ==
 +
 +
SVG is "Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated)". ([http://en.wikipedia.org/wiki/Scalable_Vector_Graphics Wikipedia). Basically, these are ''not'' binary images. An application reads them, and then turns them into an image. They are simply large text files. Because of this, however, they scale tremendously well...from tiny icons to images the size of your entire screen. Mumble now primarily uses SVG, although there are still some images in the PNG format.
 +
 +
In order to create an SVG file, you need a SVG creator. The best one is probably [http://www.inkscape.org/ Inkscape]. A big problem at the moment is that most people are foreign to SVG creation. However, SVG creation with Inkscape is not hard, and you probably will have quite a bit of fun with it. Remember that in SVG, there are no dimensions. Everything is scalable.
  
 
== Creating a Mumble Skin ==
 
== Creating a Mumble Skin ==
Line 5: Line 90:
 
=== QSS Files ===
 
=== QSS Files ===
  
In your settings you may select a QSS file as a skin.
+
From Configure -> Settings -> User Interface -> Skin, you can set the QSS file to use. This contains all of the code elements of the skin.
  
It's basic structure may include:
+
The basic structure of a QSS file may include:
 
<code>
 
<code>
 
  /* this is a comment */
 
  /* this is a comment */
Line 39: Line 124:
 
These are more recommendations than standards, but either way, it's here to reduce any confusion.
 
These are more recommendations than standards, but either way, it's here to reduce any confusion.
  
==== Skins Directory ====
+
==== Image Pointing ====
  
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:
+
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:
 
<code>
 
<code>
 
  /* change the left arrow of the scrollbar */
 
  /* change the left arrow of the scrollbar */
 
  QScrollBar::left-arrow {
 
  QScrollBar::left-arrow {
   image: url(./skins/yourskin/arrow_left.png);
+
   image: url(skin:arrow_left.png);
 
  }
 
  }
 
</code>
 
</code>
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.
+
Notice the colon ":" means the current skin directory. So, the current directory is Chocolate's root directory (eg: "C:\Program Files\Mumble\skins\Chocolate"). Thus, the image is located at "C:\Program Files\Mumble\skins\Chocolate\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:
+
This is assuming arrow_left.png is in the same directory as the current QSS file. If you had it in a "images" folder inside of your skin folder, then it would be
 
<code>
 
<code>
   image: url(skin:arrow_left.png);
+
/* change the left arrow of the scrollbar */
 +
QScrollBar::left-arrow {
 +
   image: url(skin:images/arrow_left.png);
 +
}
 
</code>
 
</code>
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 ====
 
==== Style ====
  
 
It is recommended to use the "WindowsXP" or "WindowsVista" style for all skins. This is because it has the least cosmetic defects.
 
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 ==
 
== See Also ==

Revision as of 23:07, 22 December 2009

Note: This tutorial will probably not be complete.

Introduction

For the purpose of avoiding confusion, we will use one skin in this entire guide, named Chocolate.

Let us start off by realizing that creating a skin for Mumble is not hard, but it is complicated. Before asking other people what to do, try googling! It really, really works!

Now, here is an explanation of the exact layout of a Mumble skin.

First, in order to use a skin, you must have a skins folder inside of Program Files\Mumble. Inside of the skins folder, you will need to create another folder, and this folder will be your skin's name. For example, if I wanted to create a skin called "Chocolate", then I would have the following directory structure:

C:\Program Files\Mumble\skins\Chocolate

And here is what is inside this folder:

Chocolate.qss
authenticated.svg
channel.svg
channel_active.svg
channel_linked.svg
comment.svg
comment_seen.svg
config_asio.png
config_basic.png
config_dsound.png
config_lcd.png
config_msgs.png
config_network.png
config_osd.png
config_plugin.png
config_shortcuts.png
config_ui.png
deafened_self.svg
deafened_server.svg
layout_classic.svg
layout_custom.svg
layout_hybrid.svg
layout_stacked.svg
mumble.osx.png
mumble.svg
muted_local.svg
muted_self.svg
muted_server.svg
muted_suppressed.svg
rec.svg
talking_alt.svg
talking_off.svg
talking_on.svg
talking_whisper.svg 

If you want to look at any of these icons, you can find them here.

But this is all a skin is. It is one file that contains the coding elements of the skin - the code that defines the color of the background, the fonts, etc. - and then the images that Mumble uses. Any images listed here are autoloaded by simply placing them in Program Files\Chocolate.

Here are images that can be defined in the QSS:

arrow_down.png     
arrow_left.png     
arrow_right.png               arrow_*.png dimensions: 7x7
arrow_up.png       
branch.png
branch_closed.png  
branch_end.png                branch_*.png dimensions: 10x18
branch_more.png
branch_open.png
checkbox_0.png
checkbox_0_d.png
checkbox_0_hover.png
checkbox_0_hover_d.png
checkbox_0_pressed.png
checkbox_1.png                checkbox_*.png dimensions: 13x13
checkbox_1_d.png
checkbox_1_hover.png
checkbox_1_hover_d.png
checkbox_1_pressed.png
radiobutton_0.png
radiobutton_0_hover.png
radiobutton_0_pressed.png
radiobutton_1.png             radiobutton_*.png dimensions: 13x13
radiobutton_1_hover.png
radiobutton_1_pressed.png 

You should be able to use SVGs instead of PNGs for these images, if you so wish.

Explanation of SVG

SVG is "Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated)". ([http://en.wikipedia.org/wiki/Scalable_Vector_Graphics Wikipedia). Basically, these are not binary images. An application reads them, and then turns them into an image. They are simply large text files. Because of this, however, they scale tremendously well...from tiny icons to images the size of your entire screen. Mumble now primarily uses SVG, although there are still some images in the PNG format.

In order to create an SVG file, you need a SVG creator. The best one is probably Inkscape. A big problem at the moment is that most people are foreign to SVG creation. However, SVG creation with Inkscape is not hard, and you probably will have quite a bit of fun with it. Remember that in SVG, there are no dimensions. Everything is scalable.

Creating a Mumble Skin

QSS Files

From Configure -> Settings -> User Interface -> Skin, you can set the QSS file to use. This contains all of the code elements of the skin.

The basic structure of a QSS file 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.

Image Pointing

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(skin:arrow_left.png);
}

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

This is assuming arrow_left.png is in the same directory as the current QSS file. If you had it in a "images" folder inside of your skin folder, then it would be

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

Style

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

See Also

  • Skins for a list of Skins