README (How to easily customize your theme)
===========================================

Many users like to customize their theme. So I made some customizing easier for you. Now it's easy to create your own predefined color, customize title alignment or icon size. Just read the Content, chose one option and start customizing right away. Please keep in mind that each section is written independently of others, so you need not to read all of them if you want to use just one.



*********
Contents:
*********
1. Creating your own predefined color

2. How to align title to the left or right or center and
   using different direction writing

3. How to change button icon size



*************************************
1. Creating your own predefined color
*************************************
Do you want to use your own predefined color of a theme? Do you want to use different color for window border and for GTK+ theme (the inside of a window)? Here you can find the way how to easily do it.

To make your own predefined color just open "metacity-theme-1.xml" file of the theme in a text editor and replace all occurrences of "gtk:bg[SELECTED]" (without quotes) for "yourdesiredcolor" (without quotes) - color is in #RRGGBB format. For example to change window border and title bar color to olive green replace every

gtk:bg[SELECTED]

for

#7A8A53



Note:
-----
This customization applies to this theme only and would not probably work somewhere else. Although it may work in another themes because "gtk:bg[SELECTED]" is often used for the colors of the themes.

Also note that when you use too dark or too bright colors then the theme won't be displayed correctly.





********************************************************
2. How to align title to the left or right or center and
   using different direction writing
********************************************************
It's easy to align title to the left side of a title bar, or to the right or to the center. Everything is already predefined in the source XML and all you need to do is simply change a piece of the source XML. Here is how to do it:



1. choose theme version and open its XML file named "metacity-theme-1.xml" in a text editor.

2. find this string (without quotes): "<!--titles-->"

3. there you can see something like this:

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_ltr_center_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_ltr_center_unfocused"/>
</draw_ops>


4. we are interested in lines with this:

	<include name="title_ltr_center_focused"/>
	
	and this
	
	<include name="title_ltr_center_unfocused"/>

	
5. especially in a value of the "name" attribute, so this:

name="title_ltr_center_focused"
	
	and this
	
name="title_ltr_center_unfocused"

6. as you can see there is one difference between two names and it is a word "focused" (or "unfocused") in the end of the name (the words are separated by underscore). The "focused" word means that the title is used in focused window (or unfocused window in the case of "unfocused" word). We do not need change any of those words. But it is important to know that there are 2 lines in the source XML - one for focused window and one for unfocused window. And we are going to change both lines of the code in the same way.

7. so we see:

name="title_ltr_center_focused"

which means, that the title is centered (look at the word "center"). And we want to change the name so the title will be aligned to the left side of the title bar. We change only the "center" word to "left". So after the change it will look like this:

name="title_ltr_left_focused"

8. and we do the same change to the line for unfocused window so we have next line looking like this:

name="title_ltr_left_unfocused"


9. now the lines look like these:

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_ltr_left_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_ltr_left_unfocused"/>
</draw_ops>


10. and it's done. Now the title is aligned to the left side of the title bar.



Now let's align title to the right side. We do the same changes as mentioned above except that instead of changing the word "center" to "left" we change it to "right" so after the change the lines look like these:

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_ltr_right_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_ltr_right_unfocused"/>
</draw_ops>


Now the title is aligned to the right.



And now let's discuss how to make title to be well displayed when we are using right-to-left direction writing. As you can see there are some 3 letters in a name - "ltr" or "rtl". These letters simply mean that the title is meant to be used for:

"ltr"   left-to-right direction writing languages (such as English, French, Spanish etc.) 

"rtl"   right-to-left direction writing languages (such as Arabic, Persian, Hebrew etc.)


So if you want to use title for right-to-left direction writing, replace the 3 mentioned letters to "rtl". So we have the lines look like these (for alignment to the right):

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_rtl_right_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_rtl_right_unfocused"/>
</draw_ops>


And it's done. Title is displayed in right-to-left direction writing while aligned to the right.

And what is the difference in rendering (displaying) the left-to-right or right-to-left direction writing titles? Well in most cases you don't see the difference because windows are often large enough to display whole title. But when you change size of a window that the whole title isn't displayed then comes the difference between two variants of direction writing.

The left-to-right direction writing titles (English etc.) in the small window always show the left side of the title (beginning of the title) and hides the right side of the title (the end of the title) - because the window is too small to show the end of the title. The right-to-left direction writing titles (Arabic etc.) do reverse - always show the right side of the title (which is the beginning of the title) and hides the left side of the title (which is the end of the title).



Note:
-----
Please keep in mind that the names are my own predefined names, not Metacity predefined names. So in another themes this section will not work because the themes would have a different XML code where wouldn't be lines like these:

<!--titles-->
<draw_ops name="title_focused">
	<include name="title_ltr_center_focused"/>
</draw_ops>
<draw_ops name="title_unfocused">
	<include name="title_ltr_center_unfocused"/>
</draw_ops>





*********************************
3. How to change button icon size
*********************************
If you wish to change size of an icon inside a button then there is a very easy way how to do it.

Open "metacity-theme-1.xml" file of the theme in a text editor and find this string "<!--icon size" (without quotes). There you can see this line:

<constant name="Isize" value="67"/>

This line defines a constant with a name "Isize" and it's value "67" (or maybe another number). And we are interested in the number. This number is height of a button icon in percentage of the icon area height inside of button. What is icon area will be mentioned later. So 67 means that the size of the icon is 67% of a icon area height.

And as you surely guess we need only to change this number to your desired percentage height. So if you want to make the size of the icon to be 50% of the icon area height then change the number to "50" (without quotes). Now the line look like this:

<constant name="Isize" value="50"/>

And now you have easily changed the button icon size. Now you can experiment with different numbers and watch the changes.


And what is the icon area? If you look at previous lines before the mentioned constant, you can see another constant which looks like this:

<constant name="Bpad" value="3"/>

This constant defines button padding between button edge and icon area edge in pixels. So in this case the padding is 3 pixels. I used border effects inside of buttons and so I wanted to prevent the borders to be included in icon size's measurement. You need not to change the Bpad constant. But it is good to know that the constant exists. The icon area is equal to button size minus the button padding (icon area = button size - Bpad).



Note:
-----
Please keep in mind that there is another constant <constant name="Imin" value="12"/> which defines the minimum icon size (in pixels). So when the icon size in percentage exceeds the minimum icon size in pixels then the icon size of a button will be always the minimum icon size defined by <constant name="Imin" value="12"/> - unless you change this constant too. What you can do so in a similar way as with the icon size in percentage.

Also keep in mind that the constant is my own predefined constant so in another themes this section will not work because the themes would have a different XML source code where wouldn't be line like this:

<constant name="Isize" value="67"/>

or this

<constant name="Imin" value="12"/>

or even this

<constant name="Bpad" value="3"/>



*******
The End
*******
