|
|
|
|
@ -1,15 +1,105 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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". */
|
|
|
|
|
|
|
|
|
|
Put the CSS file from the archive to koreader/styletweaks/ directory and restart KOReader.
|
|
|
|
|
/* 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 (white space after comma is on purpose): */
|
|
|
|
|
/* background-image: url(data:image/png;base64, BASE64_STRING_HERE); */
|
|
|
|
|
|
|
|
|
|
/* Level 1 chapter titles */
|
|
|
|
|
h1::before, section title p::before {
|
|
|
|
|
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;
|
|
|
|
|
content: ""; /* otherwise it doesn't show */
|
|
|
|
|
font-family: "FreeSans"; /* to remove the weird arrow symbol */
|
|
|
|
|
padding: 0.5em 0;
|
|
|
|
|
margin: 0.5em 0;
|
|
|
|
|
}
|
|
|
|
|
h1::after, section title p::after {
|
|
|
|
|
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;
|
|
|
|
|
content: ""; /* otherwise it doesn't show */
|
|
|
|
|
font-family: "FreeSans"; /* to remove the weird arrow symbol */
|
|
|
|
|
padding: 0.5em 0;
|
|
|
|
|
margin: 0.5em 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Level 2 chapter titles */
|
|
|
|
|
h2::before, section section title p::before {
|
|
|
|
|
display: block;BASE64_STRING_HERE
|
|
|
|
|
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;
|
|
|
|
|
content: ""; /* otherwise it doesn't show */
|
|
|
|
|
font-family: "FreeSans"; /* to remove the weird arrow symbol */
|
|
|
|
|
padding: 0.25em 0;
|
|
|
|
|
margin: 0.25em 0;
|
|
|
|
|
}
|
|
|
|
|
h2::after, section section title p::after {
|
|
|
|
|
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;
|
|
|
|
|
content: ""; /* otherwise it doesn't show */
|
|
|
|
|
font-family: "FreeSans"; /* to remove the weird arrow symbol */
|
|
|
|
|
padding: 0.25em 0;
|
|
|
|
|
margin: 0.25em 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Level 3 chapter titles */
|
|
|
|
|
h3::before, section section section title p::before {
|
|
|
|
|
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;
|
|
|
|
|
content: ""; /* otherwise it doesn't show */
|
|
|
|
|
font-family: "FreeSans"; /* to remove the weird arrow symbol */
|
|
|
|
|
padding: 0.05em 0;
|
|
|
|
|
margin: 0.1em 0;
|
|
|
|
|
}
|
|
|
|
|
h3::after, section section section title p::after {
|
|
|
|
|
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;
|
|
|
|
|
content: ""; /* otherwise it doesn't show */
|
|
|
|
|
font-family: "FreeSans"; /* to remove the weird arrow symbol */
|
|
|
|
|
padding: 0.05em 0;
|
|
|
|
|
margin: 0.1em 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.
|
|
|
|
|
[KOReader_Vignettes.zip](https://disk.yandex.com/d/zI2cZ_4TUZAk3w)
|
|
|
|
|
|
|
|
|
|
Vignettes are drawn only around h1/h2/h3 chapter titles in epub books and their respective equivalents in fb2 books.
|
|
|
|
|
|
|
|
|
|
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".
|
|
|
|
|
|
|
|
|
|
See example below:
|
|
|
|
|
Here is an example of using such vignettes:
|
|
|
|
|
[KOReader_Vignettes.zip](https://disk.yandex.com/d/zI2cZ_4TUZAk3w)
|
|
|
|
|
|
|
|
|
|
|
mergen3107
11 months ago