Many aspects of Fossil's appearance can be customized by customizing the site skin. This document details certain specific CSS tweaks which users have asked about via the forums.
This is a "living document" - please feel free to suggest additions via the Fossil forum.
This document is not an introduction to CSS - the web is full of tutorials on that topic. It covers only the specifics of customizing certain CSS-based behaviors in a Fossil UI. That said...
Is it Really !important
?
By and large, CSS's !important
qualifier is not needed when
customizing Fossil's CSS. On occasion, however, particular styles may
be set directly on DOM elements when Fossil generates its HTML, and
such cases require the use of !important
to override them.
Main UI CSS
Number of Columns in /dir
View
The width of columns on the /dir
page is calculated
dynamically as the page is generated, to attempt to fit the widest
name in a given directory. The number of columns is determined
automatically by CSS. To modify the number of columns and/or the entry width:
div.columns {
columns: WIDTH COLUMN_COUNT !important;
/* Examples:
columns: 20ex 3 !important
columns: auto auto !important
*/
}
/* The default rule uses div.columns, but it can also be selected using: */
div.columns.files { ... }
The !important
qualifier is required here because the style values are dynamically
calculated and applied when the HTML is emitted.
The file list itself can be further customized via:
div.columns > ul {
...
}
ul.browser {
...
}
Forum-specific CSS
Limiting Display Length of Long Posts
Excessively long posts can make scrolling through threads problematic, especially on mobile devices. The amount of a post which is visible can be configured using:
div.forumPostBody {
max-height: 25em; /* change to the preferred maximum effective height */
overflow: auto; /* tells the browser to add scrollbars as needed */
}