Custom CSS for modules for And Bible

Custom CSS for individual modules or globally for And Bible (And Bible 4.0+)

And Bible offers option to include custom CSS and fonts in module zip files. Place your CSS file under module directory (or subdirectory), and define CSS file path in config file with AndBibleCSS=path-to/yourcssfile.css

CSS file you need to format as follows:

Prefix everything with .sword-YOURMODULE class (where YOURMODULE is the module initials of your module). For night mode, prefix everything with .night class.

If you have used <hi type="my-type"> tag in your module, you can define css for your tags with .hi-my-type class definitions.

Example:

mods.d/HISB.conf

[HISB]
DataPath=./modules/texts/ztext/HISB/
AndBibleCSS=style/style.css
...

Put your font file SILEOTSR.ttf to ./modules/texts/ztext/HISB/style/. Define your css in ./modules/texts/ztext/HISB/style/style.css as follows

@font-face {
    font-family: 'Custom HISB Font';
    src: url('./SILEOTSR.ttf') format('truetype');
}

.sword-HISB {
    font-family: 'Custom HISB Font';
}

.sword-HISB .hi-x-trlit {
    color: green;
    font-size: 0.7em;
    vertical-align: top;
    font-weight: bold;
}

.night .sword-HISB {
    vertical-align: text-top;
 
    color: #00FF00; /*#green; */
}

.night .sword-HISB .hi-x-trlit {
    color:  white; /*#green;*/
    font-size: 0.7em;
    vertical-align: top;
    font-weight: bold;
}

Global styling

If you want to create a module that alters global style (i.e. how And Bible looks overall), you can create add-on module (i.e. put Category=And Bible) and add configuration AndBibleProvidesStyle=True line to the conf.

Example config

[StyleExample]
DataPath=./modules/texts/ztext/StyleExample/
Version=1.0
ShortPromo=Module that provides custom CSS and applies to all documents. Also provides example font.
Description=Module that provides custom CSS and applies to all documents.
DistributionLicense=Copyrighted; Freely distributable
Category=And Bible
ModDrv=RawGenBook
InstallSize=194837
AndBibleMinimumVersion=539
AndBibleProvidesFont=Style Example Font;style/SILEOTSR.ttf
AndBibleProvidesStyle=True
AndBibleCSS=style/style.css

Debugging css

Please see Android Webview Remote debugging guide to see how you can investigate how to manipulate css.