no way to compare when less than two revisions
Differences
This shows you the differences between two versions of the page.
Previous revisionNext revision | |||
— | howto:xfwm4_theme [2014/01/28 13:50] – Completed color list. Added Gtk color references. philipp | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Xfwm4 theme how-to ====== | ||
+ | |||
+ | ===== Introduction ===== | ||
+ | Xfwm4, Xfce4' | ||
+ | |||
+ | {{ howto: | ||
+ | |||
+ | ===== Themes locations ===== | ||
+ | In Xfwm4 version 4.0, the themes are searched in the following directories: | ||
+ | |||
+ | * User's home dir / | ||
+ | * System' | ||
+ | |||
+ | In Xfwm version 4.2, the theme location is in line with the standard, searched in the following directories: | ||
+ | |||
+ | * User's home dir / | ||
+ | * System' | ||
+ | |||
+ | |||
+ | |||
+ | ===== Titlebar decorations ===== | ||
+ | As windows can be in either active ((focused)) or inactive ((unfocused)) states for which xfwm4 use pixmaps named accordingly e.g. title-1-active.xpm and title-1-inactive.xpm. | ||
+ | |||
+ | For title bar decorations, | ||
+ | |||
+ | | {{ howto: | ||
+ | | Figure 2 - The pixmaps that compose the whole window | ||
+ | The same naming convention is true for unfocused windows with the word inactive substituted.e.g. title-1-inactive.xpm | ||
+ | |||
+ | Title text colour and shadow options, alignment etc are set in the themerc file (detailed in the themerc section). | ||
+ | |||
+ | |||
+ | |||
+ | ===== Window Sidebars and bottom ===== | ||
+ | Each side of a window is made up of two pixmaps. The pixmaps on the left side are named left-active.xpm and bottom-left-active.xpm. with the right side (of course) being made up of right-active.xpm and bottom-right-active.xpm. | ||
+ | |||
+ | The Window bottom grab bar is made up of bottom-active.xpm and bottom-inactive.xpm pixmaps which will be repeated to fit as the window is resized. | ||
+ | |||
+ | N.B These pixmaps also make up the mouse grab handles so keep that in mind when deciding how many pixels wide they should be (particularly the bottom-left and bottom right pixmaps which make up the main resize handles on the windows). | ||
+ | ===== Xfwm4 Buttons ===== | ||
+ | |||
+ | Xfwm4 can use up to six action buttons - stick (sticky windows), menu, shade, hide, maximize and close. | ||
+ | |||
+ | Buttons have active ((focused)), | ||
+ | AbiWord Image menu-active.gif | ||
+ | |||
+ | ^ Figure 3 - Xfwm4 button states ^ | ||
+ | | {{howto: | ||
+ | |||
+ | Xfwm4 can also used " | ||
+ | AbiWord Image stick-active.gif | ||
+ | |||
+ | ^ Figure 4 - Stick buttons with extra toggled buttons ^^ | ||
+ | | {{howto: | ||
+ | |||
+ | Xfwm4 4.6 brings a new button effect of the active window called prelight. Hovering the mouse over the buttons, the picture becomes clearer. Can be used in the six active buttons. | ||
+ | ===== Themerc file ===== | ||
+ | |||
+ | To set features such as title text colors, " | ||
+ | |||
+ | ==== Button layout ==== | ||
+ | It is also possible to " | ||
+ | |||
+ | # button_layout : | ||
+ | # O = Option menu | ||
+ | # T = Stick | ||
+ | # H = hide | ||
+ | # S = shade | ||
+ | # M = maximize | ||
+ | # C = close | ||
+ | # | = title | ||
+ | button_layout=OTS|HMC | ||
+ | |||
+ | A working example of this is the " | ||
+ | |||
+ | |||
+ | ==== Title width ==== | ||
+ | Another setting that needs to be set from the " | ||
+ | |||
+ | When set to " | ||
+ | |||
+ | {{ howto: | ||
+ | |||
+ | When set to " | ||
+ | |||
+ | {{ howto: | ||
+ | |||
+ | ==== Text shadow ==== | ||
+ | A shadow can be added to the title text by setting the boolean value " | ||
+ | |||
+ | Possible values are " | ||
+ | |||
+ | ==== Title offset ==== | ||
+ | The title text position can be adjusted to fit the theme design by using the offset values. The horizontal and vertical values can be adjusted by using the following settings: | ||
+ | |||
+ | * title_horizontal_offset | ||
+ | * title_vertical_offset_active | ||
+ | * title_vertical_offset_inactive | ||
+ | |||
+ | ==== Button offset and spacing ==== | ||
+ | Simlilarily, | ||
+ | |||
+ | The " | ||
+ | |||
+ | The " | ||
+ | |||
+ | ==== App icon ==== | ||
+ | With **show_app_icon** option you can replace the menu button with application icon. The application icon will be limited by width of menu button. Stay tuned! | ||
+ | |||
+ | * show_app_icon=true //#Shows the application icon// | ||
+ | * show_app_icon=false //#Shows the menu button// | ||
+ | |||
+ | If you don't have a menu button, you can use a blank square. Or you cannot use this option. | ||
+ | ===== Gtk Color pickup ==== | ||
+ | As you have no doubt noticed when using Xfwm4' | ||
+ | |||
+ | ^ Name ^ Gtk value ^ Description ^ | ||
+ | | active_text_color | ||
+ | | inactive_text_color | ||
+ | | active_text_shadow_color | ||
+ | | inactive_text_shadow_color | dark[insensitive] | Shadow color for inactive window' | ||
+ | | active_border_color | ||
+ | | inactive_border_color | ||
+ | | active_color_1 | ||
+ | | active_color_2 | ||
+ | | active_hilight_1 | ||
+ | | active_hilight_2 | ||
+ | | active_mid_1 | ||
+ | | active_mid_2 | ||
+ | | active_shadow_1 | ||
+ | | active_shadow_2 | ||
+ | | inactive_color_1 | ||
+ | | inactive_color_2 | ||
+ | | inactive_hilight_1 | ||
+ | | inactive_hilight_2 | ||
+ | | inactive_mid_1 | ||
+ | | inactive_mid_2 | ||
+ | | inactive_shadow_1 | ||
+ | | inactive_shadow_2 | ||
+ | |||
+ | The Gtk values " | ||
+ | The symbols get replaced by the actual color values at runtime so that the window border can inherit Gtk theme colors automatically, | ||
+ | |||
+ | To use the defined colors in the XFWM theme, the XPM files have to be edited. Since XPM files are plain text, they can be edited with your favorite text editor. | ||
+ | |||
+ | ===== From Wikipedia, the free encyclopedia. ===== | ||
+ | XPM (X PixMap) is an ASCII image format used by the X Window System. It was created in 1989 by Daniel Dardailler and Colas Nahaboo working in Inria Laboratories, | ||
+ | |||
+ | Therefore, if you open an xpm file with your favorite text editor, you'll see something like this: | ||
+ | |||
+ | /* XPM */ | ||
+ | static char * title_2_active_xpm[] = { | ||
+ | "5 21 10 1", | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | "# | ||
+ | " | ||
+ | " | ||
+ | "& | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | |||
+ | Not going too deep into the details of the XPM format, an XPM image is made of different sections, the values that describe the format of the image, the colors that compose the image, the pixels (and there is also the extensions, but it's safe to ignore them for now) | ||
+ | |||
+ | A character is assigned to each color of the image (if the image has more colors than available charaters, then more than a single character can be assiged to a colors). | ||
+ | |||
+ | To get the gtk colors applied to your theme, you need to edit the XPM files and add the proper color symbols to the color definition table. | ||
+ | |||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | "# | ||
+ | " | ||
+ | " | ||
+ | "& | ||
+ | " | ||
+ | " | ||
+ | |||
+ | must be changed to | ||
+ | |||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | "# | ||
+ | " | ||
+ | " | ||
+ | "& | ||
+ | " | ||
+ | " | ||
+ | |||
+ | As a matter of fact, " | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Xfwm 4.2 new functionality ===== | ||
+ | As simple as it is, the color symbol replacement table of the XPM format is not powerfull enough to achive the nice color gradients seen in most recent themes. | ||
+ | |||
+ | Xfwm 4.2 includes yet another functionality that gives real nice result while being still compatible with the previous theme format: It composes the final image from the XPM file and it colors replacement table, and another PNG file with transparency, | ||
+ | |||
+ | {{ howto: | ||
+ | |||
+ | The names of the PNG files are identical to the names of the corresponding XPM files, with the " | ||
+ | |||
+ | This technique has several advantages: | ||
+ | |||
+ | * It's fairly simple from a theme designer point of view, most people are working with similar techniques when composing themes with tools such as [[http:// | ||
+ | * It's backward compatible with xfwm4 from Xfce 4.0, the PNG files are just ignored by xfwm4 4.0. | ||
+ | |||
+ | |||
+ | |||
+ | ===== Conclusion ===== | ||
+ | I hope this small " | ||
+ | |||
+ | you can also find xfce theme at [[http:// | ||
+ | |||
+ | ===== List of frame and button part names ===== | ||
+ | |||
+ | This is a list of all possible part names in a decoration, so you can easily copy and paste them. (Tip: if using Firefox hold Ctrl while dragging, to select cells instead of lines. ;-)) | ||
+ | |||
+ | ^ Active | ||
+ | | menu-active | ||
+ | | shade-active | ||
+ | | stick-active | ||
+ | | hide-active | ||
+ | | maximize-active | ||
+ | | close-active | ||
+ | | top-left-active | ||
+ | | title-1-active | ||
+ | | title-2-active | ||
+ | | title-3-active | ||
+ | | title-4-active | ||
+ | | title-5-active | ||
+ | | top-right-active | ||
+ | | right-active | ||
+ | | bottom-right-active | bottom-right-inactive | | ||
+ | | bottom-active | ||
+ | | bottom-left-active | ||
+ | | left-active | ||
+ | ===== Credits ===== | ||
+ | This how-to has been started by Drewbian (drewbian at tsn dot cc) and later modifed by Olivier Fourdan (fourdan at xfce dot org) and Renato Santos (renatosan at gmail dot com). |