High Resolution is a theme that uses the same icons from Lim Chee Aun's Phoenity Aura project that K-Meleon uses by default. This skin expands the browser's default skin to display better on higher resolution monitors and systems with scaling enabled. It will work on K-Meleon version 75 and up.
Download High Resolution & check out the screenshots on GitHub:
https://rjjiii.github.io/K-Meleon/HighResolution/index.html
Or scroll down to download it attached to this message.
I put this together initially as a reference because it was hard to find a clear explanation of the newer skinning system. If you want to modify or create a KM 75-style skin you can open the .cfg and .txt files in any text editor. I'm going to explain several things about 75-style themes in general below. This is only relevant if you're customizing or creating skins:
1. All versions of K-Meleon are backwards compatible with the classic style of skins. K-Meleon introduced a new skinning system but can still use older skins and older syntax. Also, you can use both old-style and new-style syntax in the same skin for versions 75 & 76.
2. Version 75 introduced the ability for users to set a preferred toolbar size. In classic-style skins, the theme author sets the size of toolbars and buttons. In a 75-style skin, the theme author can set the exact sizes just like before OR they can sync the sizes to the user's preferred size. One skin can use both techniques for different toolbars.
3. There are two ways to set a button to the user's preferred size. First, the toolbar can be defined the same way as a classic skin but with the size set to (0,0). If you do this you can only put one icon on each row of the image file because K-Meleon has no width value to cut a row of the image into multiple buttons. This technique also seems to require the .PNG format.
4. The other way is to use the 75-style syntax. It looks much simpler than the classic-style skins because the complexity is moved elsewhere. For example, here is the syntax for a back button:
Back{
navBack|SHistoryBack
Go back one page
}
In that entry, the top line "Back" is the name of the button. It will be displayed as text beside the icon if you add a "!" like "!Back". The second line has the left-click command first, then a pipe (|) character, and then the right-click command. The left-click command is the only thing that sets the image. I'll explain that further down. Finally, there is an optional tooltip caption.
5. 75-style themes include a skin.cfg instead of a menuicons.cfg. This is a JSON file and somewhat awkward to edit. A JSON file is composed entirely of "key":"value" pairs. It can't include comments or any extra characters. The "value" can be an array. Arrays can be arrays of values, arrays of pairs, or arrays of arrays. Arrays use alternating brackets ([]) and curly braces ({}) to nest themselves within value spaces. I hope this will help to visualize it:
"animals":{
"reptiles":"gecko",
"birds":"penguin",
"mammals":[
"falcon",
"elephant",
{"canines":[
"dog",
"wolf",
"dingo"
]
}
]
}
6. Finally, how does skin.cfg work?
Skin.cfg pairs commands with images to create icons. It cuts images into columns of icons. Each column is paired with a command. The top row in a column is the cold/neutral state icon. The second row down is the hot/active state. The third row is the dead/disabled state. If hot or disabled icons are not present, K-Meleon uses the cold icon instead. The icon will appear in toolbars when using the 75-style syntax above. It will also appear beside menu entries that call the command. Check out
the development thread for a discussion on how the JSON file is parsed by the browser.
The browser handles the file in a somewhat rigid way. If you look at the bottom of version 75's default theme you'll see an unused section. This is where you can put all of your custom buttons. Deleting this section or adding new sections can result in errors. Here is a kind of overview of how it works:
{
"images":[
{
"name":"imagefileXX.png",
"width": this will be a value that tells the browser where to divide imagefileXX.png into its many icons,
"height": the browser uses this value to find the closest sized set of icons to the user's toolbar size preference
}
]
"commands":[
"ID_COMMAND",
"macros(macro_name)"
]
}
7. And feel free to ask any questions if this is unclear
Updated to version 1.0 on 08/15/2022:
http://kmeleonbrowser.org/forum/read.php?10,156213,156466#msg-156466
Edited 2 time(s). Last edit at 08/16/2022 04:41AM by RJJIII.