Custom CSS

This feature enables you to:

• overwrite fonts, text styles, colours, etc. of the theme you selected.

• add extra customised cuss entries to suit your own needs

• customise content styles of the modules you created

Which version supports this feature?

This feature is available from version 21.06.

After you upgraded to version 21.06 or install a version later than 21.05, you should have the following file in your UniqueBible.app installation folder:

[unique_bible_app_folder] > htmlResources > css > custom.css

From version 21.07, this file is automatically created for you if you don't have one in place.

Initially, it is an empty file. You need to edit this file and save it. To make the changes effective, you need to restart UniqueBible.app.

Everything you entered into this file takes priority. That's mean if you assign a style in this file that is already assigned in the theme you selected. Your entries will overwirte the selected theme for display. This gives you flexibility that you can modify only part of the theme you selected rather than building a whole new theme. Of course, you can also overwrite all values to set you own new theme. It is all up to your choice. In addition, you can add styles to support better display of your customised content.

An Example

Use a text editor to edit the custom.css file mentioned above.

To overwrite text selection colour of the theme you already selected, save the following content in the file and restart the app:

::selection { background: #2516ad; }

A Practical Example on Font Management

With custom css, you can add or display content with particular fonts.

You may read this example: https://github.com/eliranwong/UniqueBible/issues/321#issuecomment-811599648

References

You may check our default.css or dark.css for assigned items.

To learn more about css

There are many tutorials about css online. Below is one of them:

https://www.w3schools.com/css/