This style tweak draws pretty vignettes around the chapter titles in KOReader. The generic form (without images) looks like this:
/* Vignettes around chapter titles in KOReader. */
/* Created by mergen3107 on KOReader GitHub community. */
/* ! Applying this CSS file might reduce rendering performance. */
/* ! Especially beware making this style tweak "Apply to all books". */
/* For easier navigation, turn off Word Wrap in your text viewer. */
/* All vignettes images are encoded as Base64 strings.*/
/* Make sure to follow the syntax strictly: */
/* background-image: url(data:image/png;base64,BASE64_STRING_HERE); */
/* Level 1 chapter titles */
h1::before, section title p::before {
content: "\A0"; /* otherwise it doesn't show */
display: block;
background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat;
background-position: center;
padding: 0.75em 0;
margin: 0.25em 0;
}
h1::after, section title p::after {
content: "\A0"; /* otherwise it doesn't show */
display: block;
background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat;
background-position: center;
padding: 0.75em 0;
margin: 0.25em 0;
}
/* Level 2 chapter titles */
h2::before, section section title p::before {
content: "\A0"; /* otherwise it doesn't show */
display: block;
background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat;
background-position: center;
padding: 0.25em 0;
margin: 0.75em 0;
}
h2::after, section section title p::after {
content: "\A0"; /* otherwise it doesn't show */
display: block;
background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat;
background-position: center;
padding: 0.15em 0;
margin: 0.75em 0;
}
/* Level 3 chapter titles */
h3::before, section section section title p::before {
content: "\A0"; /* otherwise it doesn't show */
display: block;
background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat;
background-position: center;
padding: 0.15em 0;
margin: 0.25em 0;
}
h3::after, section section section title p::after {
content: "\A0"; /* otherwise it doesn't show */
display: block;
background-image: url(data:image/png;base64,BASE64_STRING_HERE);
background-size: contain; /* to make the image fill the whole block without cropping */
background-repeat: no-repeat;
background-position: center;
padding: 0.15em 0;
margin: 0.25em 0;
}
Replace each BASE64_STRING_HERE with the string of conversion of an image to Base64 encoding.
Put the code above into a CSS file, then put the file to koreader/styletweaks directory and restart KOReader. Then enable it from Top Menu - Second tab - Style Tweaks - User Style Tweaks.
In this example, vignettes are drawn only around h1/h2/h3 chapter titles in epub books and their respective equivalents in fb2 books.
(!) For books with many chapters this style tweak might severely reduce each opening of the document. Especially beware enabling this tweak to "Apply to all books".
Here is an example of using such vignettes: _vignettes2.css