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.

Like this stuff and all you do!

Thanks! :cool:

I've updated the first post with new version of High Resolution.

Changes and new features:
* Cleaned up several icons.
* Made comments more clear and consistent.
* Changed custom toolbar to create a restart button which seemed more useful.
* Changed name. (Explanation below.)
* Changed loading icon to fit in better.
+ Added bitmaps for the favorites and hotlist bar.
+ Added an icon for the bookmark editing window.
+ Added command for fullscreen. (The image has been there since 2015.)
+ Added a throbber.
+ Added new icons for loading pages and local pages.

A few more observations:
1. I changed the name because K-Meleon no longer supports variants. I thought I could make a skin(variant) like the old Phoenity(Large) but that feature was deprecated with KM74 and then removed in KM75. Both the Shared and Default theme folders can be referenced by any theme, but it's no longer possible to make a variant of _other_ themes like Klassic or Phoenity.

2. Throbbers can be any size but the formatting is very rigid. I was only able to create a working AVI if I used the tools listed in the wiki which are now seemingly abandonware. I'll change the links in the wiki to point to archive.org soon.

I've updated the first post with version 1.0 of High Resolution. I feel comfortable calling this 1.0 because I don't see anything left to complete the theme.

I tried out a design for a throbber that directly used the icon assets and matched the loading icon. I think it may look too much like a button though so I left it as an option. The pulsing monitor throbber mostly matches the icons and it feels more clearly separate. Feedback is of course welcome.

Changes and new features:
* Cleaned K-Meleon logo icon.
* Improved comments.
+ Added icons for hotlist and favorites.
+ Added an alternate throbber.