Request for various text colour and background shading, and borders

Bloom Bloom Feature Requests
1

Would it be possible to have different colour options for the text colour, different background colour option for textbox, and also different types of borders (e.g. different thickness, or dotted line etc.)

This is because for bilingual or trilingual book using the same script, it would be helpful to differentiate the text of the two languages by having (e.g. one language text in one colour and another colour for the second language).

There are also users here who would like to include a bilingual/trilingual picture vocabulary page in their reading book, and would like to have different background colours for the text boxes underneath the picture to indicate the different languages. Thanks!

2

I don’t know when we might get to supporting this in the Bloom UI, but it’s fairly easy to do with customBookStyles.css (in the book folder, for a single book) or customCollectionStyles.css (in the collection folder, for all the books). For example,

.bloom-content1 {background-color: yellow; color: red;}
.bloom-content2 {background-color: pink; color: blue;}

Will cause the Language1 data to be red-on-yellow and language 2 to be blue on pink.

Surely not the colors you want, but you can use various color names or an RGB code like #ffe6e6 (a much paler pink). https://www.w3schools.com/colors/colors_picker.asp is one site that can help you pick the color you want.

1 Like
3

Thanks John for the instructions. This request is from the workshop I’m involved in this week. I’ll help Philina to do this.

4

Fair warning: we don’t often change things that might break this sort of trick between one version of Bloom and the next, but no promises. It might be necessary to work out a new version of these rules at some point.

5

There is also a very limited set of options within Bloom itself.
Turn on “Change Layout” mode, then click the cog for your text box:

image

6

Thank you John and Andrew for your replies. Those codes in css file work and is very helpful!

Blessings,

Philina

7

Thank you! That’s great!
I was able to make it work for a collection; but i don’t see customBookStyles.css in the book folder for a single book. There are several .css files in individual book folders.
I see:
Traditional-XMatter
previewMode
languageDisplay
Basic Book
basePage

Is it one of those where I can paste in the colors?
Bethann

8

We also found there was no customBookStyles.css file in the book folder, but the notes at the top of customCollectionStyles.css mentions “you can also add a file named “customBookStyles.css” in the book folder…”

I made a coy of customCollectionStyles.css, renamed it as customBookStyles.css, then moved it to the Book folder.

9

It appears to be a bug that we are not generating that file now.
But you can simply create one as an empty file with that file name.

I’m creating a card to restore that file.

10

I had to do what Liz describes between Oct 2017 and Mar 2018 as well, not realizing that the file should be in each Book folder. so maybe this bug has been around for a while. For more customizable format options and a request for transferring the custom…styles.css file to other books in a collection, see https://community.software.sil.org/t/custombookstyles-for-a-template-page-collection/1266.

11

Sorry. I actually read the comment in customCollectionStyles.css incorrectly.
I thought it stated you would find customBookStyles.css in the book folder. But it states you can create it.
So this is not a bug. We don’t plan to generate the empty file automatically.