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 (https://github.com/AndBible/special-modules/tree/master/HISB):
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; }
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
Please see Android Webview Remote debugging guide to see how you can investigate how to manipulate css.