How to Make or Edit JWM Themes

How to do things, solutions, recipes, tutorials
Post Reply
Message
Author
User avatar
Subito Piano
Posts: 731
Joined: Mon 28 May 2007, 03:12
Location: UPSTATE New York
Contact:

How to Make or Edit JWM Themes

#1 Post by Subito Piano »

If you have a JWM theme that is "almost" perfect for you, how do you edit it? Maybe the font is an ugly color or you want the active selection to really stand out in a bright color. Here's an explanation of each line in the "colors" file and the "jwmrc" file for JWM themes (explained below). Use this to try tweaking themes to your liking. Look at each line to see what theme element it controls -- which font, size, & color, background colors, etc. -- then take a theme and change the appropriate lines to the fonts, colors, and sizes you like. After experimenting, maybe you will build your own theme from the ground up! (This is my first how-to. Corrections gladly received!)
Second
First, JWM themes are located in /root/.jwm/themes. A theme consists of four files: two files to make a theme, and two PNGs for the GUI to change themes:
  • Theme-name-colors (these are the main colors and background, i think. See below)
    Theme-name-jwmrc - (specific colors, sizes, etc. See below)
    Theme-name-tray.png (picture of the leftmost part tray with the menu & next four icons)
    Theme-name-window.png (picture of the top-right window border showing the minimize, maximize, and close buttons)
The .png files are not strictly necessary, but helpful to others. You can figure out how to make them. (I hope!)

Second, here are samples of the two files to tweak, the "colors" file and the "jwmrc" file:

This is a sample COLORS file (It's my tweaked version of the "Sub-marine-colors" file with explanations after the → arrows.)
______________________________
#see /usr/local/jwmconfig2/theme-switcher script.
MENU_BG='#4D525B' → color of menu background. (Hex digit or HTML color OK throughout this file)
ACTIVE_BG='gray50:gray10' → color of active (selected) background
FOREGROUND='cyan' → color of selected font (in menu)
PAGER_BG='gray45' → color of the "windows" shown in your pager. "Pager" means the tray icons to select between desktops.
FG_SELECTED='gray65' → color of currently active desktop

______________________________

Now, this is a sample JWM file (my tweaked version of the "Sub-marine-jwm" file with explanations after the → arrows.)
______________________________
<?xml version=1.0?>
<JWM>
<!--
TITLE: JWM-Vu-darkgray2 → this is just an explanatory note (it doesn't affect theme)
JWM ver: v2.1 - mod by vg → explanatory note
JWM v.2.3.7 - Sub-marine mod by tallboy → explanatory note
-->

<WindowStyle>
<Font>DejaVu Sans-11:bold</Font> → font & size for window title bar. "DejaVu Sans-11" is normal font, "DejaVu Sans-11:italic" is italic font, etc.
<Foreground>gray90</Foreground> → color of inactive window title bar font
<Width>3</Width> → width of border around window. 3 is typical, 6 is thick. This attribute (width) may be missing, but you can add it if you like.
<Background>gray70:gray30</Background> → color of inactive window title bar
<Active>
<Foreground>cyan</Foreground> → color of active window title bar font
<Background>#9dbbdb:black</Background> → color of active window title bar NOTE the two colors separated by a colon, this gives a 3D effect, like the title bar is convex rather than flat. Choose any two colors you like but it's probably best to choose a darker and a lighter version of the same basic color
</Active>
</WindowStyle>

<TrayStyle>
<Font>DejaVu Sans-11</Font> → font size for tray
<Foreground>cyan</Foreground> → font color for tray
<Background>#9dbbdb:black</Background> → font color for tray, in this case the 3D convex effect
<Outline>black</Outline> → outline color
</TrayStyle>

<TaskListStyle decorations="motif">
<Font>DejaVu Sans-9</Font> → font size for inactive windows listed in the tray
<Foreground>gray90</Foreground> → font color for above
<Background>gray60:gray20</Background> → background color for above, here 3D
<Active>
<Foreground>cyan</Foreground> → font size for active window listed in the tray
<Background>gray50:gray10</Background> → font color for above
<Outline>cyan</Outline> → background color for above, here 3D
</Active>
</TaskListStyle>

<PagerStyle>
<Foreground>gray60</Foreground> → font color for inactive pager "buttons" in tray
<Background>gray40</Background> → color of inactive pager "buttons" in tray
<Active>
<Foreground>gray80</Foreground> → font color for active pager "buttons" in tray
<Background>gray55</Background> → color of active pager "buttons" in tray
</Active>
</PagerStyle>

<MenuStyle>
<Font>DejaVu Sans-10</Font> → font size in menu
<Foreground>white</Foreground> → font color in menu (inactive, i.e., unchosen, selections)
<Background>#4D525B</Background> → background color in menu (inactive items)
<Outline>black</Outline> → color of outline around menu
<Active>
<Foreground>cyan</Foreground> → font color in menu (active, i.e., selected, item)
<Background>#9dbbdb:black</Background> → background color in menu (active item)
<Outline>black</Outline> → color of outline.
</Active>
</MenuStyle>

<PopupStyle>
<Font>DejaVu Sans-10</Font> → font & size for popup windows
<Outline>black</Outline> → outline color for popups
<Foreground>#4D525B</Foreground> → font color for popups
<Background>gold</Background> → background color of popups
</PopupStyle>

</JWM>
______________________________
NOTE that the inactive and active windows are sometimes laid out differently from above, but you should be able to figure them out.

To experiment with themes, make a copy of a theme theme you like under new names (like "Test-theme-jwmrc" & "Test-theme-colors" -- don't worry about the PNG files right now), then open your new "Test-theme-jwmrc" file in a text editor, change one or two elements, and save. Then go to MENU>DESKTOP>JWMDesk Manager, click on JWM Theme and see what it looks like! If you make more changes to your test theme while it is the currently-chosen theme, you'll need to save your changes, then go to the theme changer (i.e., JWM Theme), choose a completely different theme, wait for the theme to change, then switch back to your test theme. Now your changes should show up.

If you want to share your theme, then use your new theme, take a screenshot or two, and crop & export to make the "Test-theme-tray.png" and the "Test-theme-window.png" files. All four files together make a theme. Put them in a new directory and zip them up to save and/or share.

Hmm -- I'm NOT really sure how much the COLORS file matters. Experiment!

ALSO NOTE that certain elements in your theme file(s) are overridden by the file /root/.jwm/jwmrc-personal. (For instance, there is a "window" entry there in my machine that would likely override the "window" entry in my saved themes.) You can rename that file while you are experimenting, then afterward either "un-rename" it - or not, if you prefer. I think that file is created when you use the various tabs in JWMDesk Manager to tweak the appearance of the menu, windows, and tray; your tweaks are stored in that file and override the theme file. However, your theme file should be left intact, just as you created it.

Hope this helps!
[color=green]"God is love" - [url=https://www.esv.org/1+John+4/]I John 4:12[/url][/color]
ðŸ￾§ ðŸ￾§ ðŸ￾§ Rockin' on a 2007 IBM/Lenovo T60 Centrino Duo with 32-bit XenialPup 7.5! :D
(A/V Linux for live digital synth needs)

Post Reply