I get a whole host of different behaviors when I do this and preview the results, and sometimes see the shortened max-width take effect

The first thing to try when editing skins is to open up the browser's dev tools and check the "disable cache" button (in the "Network" tab in both Chrome and Firefox), and keep the dev tools open for the remainder of your style-editing session. Browsers are typically aggressive about caching stylesheets, often requiring multiple reloads to force them to update to newer CSS. The "disable cache" option works around that.

I want to customize my page and make it look fancy.

If i may offer two hints to that end:

• Remove the vendor-prefixed CSS styles (-moz-..., -webkit-..., -mx-...). Modern browsers will often emit warnings in the dev console proclaiming that such prefixes are no longer supported.

• Do not set a fixed max width for the site. Let the user set the width by sizing the window how they would like it. Forcing a fixed max width on a user mocks the user by effectively telling them, "we know better than you do how your screen space needs to be used."

Thanks for the tips!

After I posted this issue I poked through the docs some more and found a workaround: I cloned the fossil-scm repository and found the skins directory with the css.txt file and other files. I then copied the files I wanted to my repository, edited them, and then ran fossil ui --skin /my-skin-directory. This produced the desired result.

I also modified the css, setting max-width: fit-content (which was helpfully suggested by my IDE) and this produced exactly the result I was looking for.

I don't think that my previous issue was due to browser caching because moving the css files to my local repository, running the ui and refreshing my page immediately reflected my changes each time, so I think there is something strange going on with the current functionality. Let me know if you need more details.

By the way, max-width: fit-content really looks a lot better. I recommend trying it out.

and then ran fossil ui --skin /my-skin-directory.

Note that using --skin ... has one side-effect which may not be obvious: users will not be able to select their own skin using the /skins page. Whether that's a feature or a bug is left for you decide, but IMO it's a feature.

If all you're after is to inject a bit more "air" into the page, the "Modern" skin from the Inskinerator project does that, and it's ready to be copied. You don't even have to run Inskinerator itself; you can swipe the generated CSS directly from that linked page; it's demoing Modern.

Compared to the current Fossil default skin, Modern adds:

• hierarchical indents on the left to make the page structure clearer
• semi-hierarchical margins on the right (nearly fixed at all levels, but wider than default)
• more line spacing
• default font size

As to your solution of a fixed-width page, I'm in agreement with Stephan. Fixed widths that look fine on the desktop break down on mobile, and they're further likely to be unhelpful on pages like /dir and /vdiff`.

Thanks for the tip! The Insinkerator changes do look nice.

By the way, I found that max-width: fit-content achieved the result I was looking for. I recommend giving it a try.