Some Decent stylesheet.css files?

[enuddleyarbl]

Without changing the styling within the text of the book, itself, only the few items at the top of my stylesheet (down to the comment saying "This whole section is styling for specific page types of a book") will change anything. Those make changes to how some of the standard html tags (margins, paragraphs, headings, etc.) behave. Once that stylesheet is in place, you'd then have to edit the styles in the text of the book to use any particular style.

For instance, many books will use a <blockquote> tag for things like notes or letters. To change how those things look, you'd have to replace the text's surrounding <blockquote></blockquote> tags with <div class="note"></div> or <div class="letter"></div> tags. That way, the text that was initially styled with blockquote styling will be styled with whatever styling is in the stylesheet for the note or letter (in this case) custom classes.

I've attached a sample of how I use the various styles. You can just add it to your library and edit it to see how the styles/tags can be used.

Once you've made all the style/class changes you want, in the Calibre Editor, you can use the "Remove Unused CSS Rules" tool to remove all the unused rules in that stylesheet.

EDIT: Of course, you can edit that stylesheet however you want to change how things look (or just to prune out things you don't care about). Over time, I've added all kinds of one-of-a-kind type classes that are probably useless to most people (for instance, almost everything in the "Stuff Unique to Particular Books" section near the bottom of the stylesheet). You can probably remove that section and leave a much less unwieldy (more wieldy?) stylesheet to play around with.

[Vakke]

Originally Posted by enuddleyarbl

Without changing the styling within the text of the book, itself, only the few items at the top of my stylesheet (down to the comment saying "This whole section is styling for specific page types of a book") will change anything. Those make changes to how some of the standard html tags (margins, paragraphs, headings, etc.) behave. Once that stylesheet is in place, you'd then have to edit the styles in the text of the book to use any particular style.

For instance, many books will use a <blockquote> tag for things like notes or letters. To change how those things look, you'd have to replace the text's surrounding <blockquote></blockquote> tags with <div class="note"></div> or <div class="letter"></div> tags. That way, the text that was initially styled with blockquote styling will be styled with whatever styling is in the stylesheet for the note or letter (in this case) custom classes.

I've attached a sample of how I use the various styles. You can just add it to your library and edit it to see how the styles/tags can be used.

Once you've made all the style/class changes you want, in the Calibre Editor, you can use the "Remove Unused CSS Rules" tool to remove all the unused rules in that stylesheet.

EDIT: Of course, you can edit that stylesheet however you want to change how things look (or just to prune out things you don't care about). Over time, I've added all kinds of one-of-a-kind type classes that are probably useless to most people (for instance, almost everything in the "Stuff Unique to Particular Books" section near the bottom of the stylesheet). You can probably remove that section and leave a much less unwieldy (more wieldy?) stylesheet to play around with.

Thank you very much!

I think I'm getting a bit hang of the editing but I need much more practice. One thing I'm wondering is the space between body text paragraphs. Is there a command just to get rid of them and use the the defined indent?

Edit: I think I found something to add margins to the body part of the text.

[JSWolf]

Originally Posted by Vakke

Would you be able to help a noob on how can I use your CSS to modify my ePubs?

I've tried to replace stylesheet.css completely but it doesn't seem to work and I've also tried to inject it from conversion styling but I cannot get it to work.

Is there something clear I'm missing?

Yes, you are missing something really hugh. You can use that CSS to modify your eBooks. It will not work.

You need to modify your eBooks based on the CSS in the eBook. Yes, you can have some of your own classes, but too many of them will not work because they won't match the CSS in the eBook. You have to do it on an eBook by eBook basis.

Do not think starting with that CSS is a good idea. It's not and it's going to cause more work for you. Plus, if the eBook is ePub2, it won't work even more so.

[JSWolf]

Originally Posted by Vakke

Thank you very much!

I think I'm getting a bit hang of the editing but I need much more practice. One thing I'm wondering is the space between body text paragraphs. Is there a command just to get rid of them and use the the defined indent?

Edit: I think I found something to add margins to the body part of the text.

You do not want to add margins because you have a margin slider on your Libra 2. You want the L/R margins to be 0. You cannot reduce the margins, but you can increase them with the slider.

[Vakke]

Originally Posted by JSWolf

You do not want to add margins because you have a margin slider on your Libra 2. You want the L/R margins to be 0. You cannot reduce the margins, but you can increase them with the slider.

You missed a point here JSWolf.

I'm using KOReader to test these ePub files, all are ePub3, the added margins are copied from native ePub file which had those settings to not have paragraphs between the body text chapters.

What is your recommendation? Should the stylesheet.css be edited at all? Should I just use KOReader to handle the modification of the end product and not touch the original CSS at all?

As I've stated I'm not too familiar with this part of the ePub files and your answers and suggestions don't enlighten me as they lack any advice.

[JSWolf]

Originally Posted by Vakke

You missed a point here JSWolf.

I'm using KOReader to test these ePub files, all are ePub3, the added margins are copied from native ePub file which had those settings to not have paragraphs between the body text chapters.

What is your recommendation? Should the stylesheet.css be edited at all? Should I just use KOReader to handle the modification of the end product and not touch the original CSS at all?

As I've stated I'm not too familiar with this part of the ePub files and your answers and suggestions don't enlighten me as they lack any advice.

The first thing to do it delete any HTML files in the ePub you don't want. Then remove all unused CSS. From there you edit the CSS and HTML as needed.

It's what I do. I also add in my own CSS. I don't add in all that much. When I am done editing the CSS/HTML, I once again delete any unused CSS.

What you have to do with the CSS depends on the source CSS and what's done in the HTML.

[Vakke]

Originally Posted by JSWolf

The first thing to do it delete any HTML files in the ePub you don't want. Then remove all unused CSS. From there you edit the CSS and HTML as needed.

It's what I do. I also add in my own CSS. I don't add in all that much. When I am done editing the CSS/HTML, I once again delete any unused CSS.

What you have to do with the CSS depends on the source CSS and what's done in the HTML.

Thank you!

Would you be able to share the CSS you use so I could test does it fit my needs?

[theducks]

CSS use is a 'Matching game'.

class="foo" is just a link to the CSS entry .foo, where the actual styling is defined.

Define once, use Many is why CSS is so great. One place to change the looks of all places class="foo" was used. One tiny change and Bold can change to Italic everyplace foo was used

The space between lines of code is for US HUMANS, it does not affect the render (if done right), Look at the line numbers on the Left there can be many lines of text (really big paragraph) and only 1 number. Again, the number is for US to locate when there is an error on line 42.

[JSWolf]

Originally Posted by Vakke

Thank you!

Would you be able to share the CSS you use so I could test does it fit my needs?

This is the CSS I add to the existing CSS.

blockquote {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 1em;
  margin-left: 1.5em;
}
.blockquote {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 0;
  margin-left: 1.5em;
}
body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
img {
  max-height: 100%;
  max-width: 100%;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}
hr {
  margin-top: 0.9em;
  margin-right: 40%;
  margin-bottom: 0.9em;
  margin-left: 40%;
  border-top: 2px solid;
}
.cover {
  text-align: center;
  text-indent: 0;
  height: 100%;
}
h2 {
  text-align: center;
  text-indent: 0;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

[DNSB]

Originally Posted by Vakke

Would you be able to help a noob on how can I use your CSS to modify my ePubs?

I've tried to replace stylesheet.css completely but it doesn't seem to work and I've also tried to inject it from conversion styling but I cannot get it to work.

Is there something clear I'm missing?

Most CSS stylesheets use names for styles which must match the names in the html files. That is if the first paragraphs in a chapter and after section breaks are styled with <p class="fmtx1"> and the remaining paragraphs are styled with <p class="tx"> and your stylesheet uses a naked p for those first paragraphs and .para for subsequent paragraphs, you must either edit the stylesheet or the html files to match those names.

Then we have the ebooks that use p and p + p to handle the same situation and the ones that go in for multiple styles for each paragraph, the ones that wrap multiple divs with styles around everything to really make use of the cascading in cascading style sheets.

What this means is that you must inspect the CSS with the mark 1 eyeball to understand what it is doing and then modify it to what you need.

[theducks]

Those examples scream BPH stylesheet
as

fmtx1 is Front matter alternate body style 1

That was the way the book I mentioned earlier should have been coded by the contractor.

Every part (area) of a book has an industry name. Code Pros know them all,

en2, bm1 (UNIX style naming? AWK,SED,Grep, cd, mkdir ... ) not the long +ss names I see in many EPUB3

[DNSB]

Originally Posted by theducks

Those examples scream BPH stylesheet
as

fmtx1 is Front matter alternate body style 1

That was the way the book I mentioned earlier should have been coded by the contractor.

I've been working on an old series for my wife and that's why I mentioned those particular items. Oddly, the use of bmtx, bmtx1, fmtx, fmtx1, tx and tx1 which used to be consistent in the first 3 or 4 books of the series are inconsistent in the later books. The last one I worked on used bmtx for all indented paragraphs while using bmtx1, fmtx1 and tx1 for the chapter opener paragraphs. Since I use a collection of saved searches, just meant having to modify a few items.

Basically, I was trying to say that you need to inspect the CSS and html files to understand what needs to be changed—it's not as easy as a simple copy/paste the stylesheet and you're done.

[JSWolf]

Originally Posted by DNSB

I've been working on an old series for my wife and that's why I mentioned those particular items. Oddly, the use of bmtx, bmtx1, fmtx, fmtx1, tx and tx1 which used to be consistent in the first 3 or 4 books of the series are inconsistent in the later books. The last one I worked on used bmtx for all indented paragraphs while using bmtx1, fmtx1 and tx1 for the chapter opener paragraphs. Since I use a collection of saved searches, just meant having to modify a few items.

Basically, I was trying to say that you need to inspect the CSS and html files to understand what needs to be changed—it's not as easy as a simple copy/paste the stylesheet and you're done.

Those class names are still used.

[DNSB]

Originally Posted by JSWolf

Those class names are still used.

In the book referenced, indented paragraphs instead of using 3 classes with identical content, used 1 class. The other two were still in the stylesheet but were not referenced in the HTML/text files.

[JSWolf]

This is some rather poor CSS generated by the atrocious program Vellum. Try using that CSS in the first post of this thread and watch it fail. This CSS uses not much you can pre-edit. You need to do the editing by hand. That's why the CSS I add has not all that many classes.

/*
 * Little Shattered Dreams
 * Stylesheet generated by Vellum
 */
@font-face {
  font-family: Montserrat;
  font-weight: normal;
  font-style: normal;
  src: url(../fonts/Montserrat-Regular.ttf);
}
@font-face {
  font-family: Montserrat;
  font-weight: 500;
  font-style: normal;
  src: url(../fonts/Montserrat-Medium.ttf);
}
@font-face {
  font-family: Montserrat;
  font-weight: bold;
  font-style: normal;
  src: url(../fonts/Montserrat-Bold.ttf);
}
p {
  margin-bottom: 0;
  text-indent: 0;
  line-height: 1.4;
  margin-top: 0;
  text-align: justify;
}
p.subsq {
  text-indent: 1.5em;
}
.implicit-break {
  margin-top: 1.4em;
  margin-bottom: 0;
  height: 0;
}
.element-bodymatter .text > .implicit-break {
  margin-bottom: 1.4em;
  clear: both;
  margin-top: 0;
  height: 1.4em;
}
.toc-item p, .heading h1 {
  line-height: 1.2 !important;
}
.toc-item {
  margin-bottom: 0.1em;
  page-break-inside: avoid;
}
div.alignment-block.inset-block {
  margin-right: 1.5em;
  margin-left: 1.5em;
}
ul {
  padding-left: 3em;
  padding-right: 1.5em;
  margin-top: 1.4em;
  margin-bottom: 1.4em;
  clear: left;
}
p, li {
  hyphens: auto;
  adobe-hyphenate: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-before: 4;
}
body {
  font-family: Palatino, serif;
  font-weight: normal;
  font-style: normal;
}
h1, h2 {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  page-break-inside: avoid;
  font-kerning: auto;
}
@page {
  margin-left: 24px;
  margin-right: 24px;
}
a, a * {
  color: rgb(36, 39, 116);
}
a, span.underline {
  text-decoration: underline;
}
li {
  line-height: 1.4 !important;
  text-align: left;
}
.implicit-break {
  page-break-inside: avoid;
}
.alignment-block {
  clear: both;
}
.element-type-epigraph.element-without-heading {
  margin-top: 10em;
}
.element-type-also-by .heading .title-block, p.copyright-content {
  font-size: 90%;
}
.heading-container-single h1.element-title, .heading-alignment-fixed .element-title, p.alignment-block-content-center {
  text-align: center;
}
p.also-by-content {
  text-indent: 0;
  font-size: 90%;
  text-align: center;
}
p.also-by-content, p.also-by-content.alignment-block-content {
  margin-top: 0.5em;
}
.cover-image {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.toc-contents {
  padding-left: 5%;
  padding-right: 5%;
}
p.toc-content {
  text-align: left;
  font-size: 90%;
}
.toc-item.has-no-children .toc-item-title {
  text-indent: -1.5rem;
  padding-left: 1.5rem;
}
.toc-backmatter-group {
  margin-top: 0.75em;
}
h2.title-page-contributor-without-introduction {
  margin-bottom: 0.5em;
}
.element-type-toc .heading .title-block {
  font-size: 95%;
}
p.copyright-content {
  text-indent: 0;
  text-align: left;
  margin-top: 0.75em;
}
.element-type-copyright.element-without-heading {
  margin-top: 2.5em;
}
div.title-page {
  text-align: center;
  margin-right: 2%;
  margin-left: 2%;
}
div.title-page .title-page-title-subtitle-block {
  margin-left: 6%;
  margin-right: 6%;
}
div.title-page-title-subtitle-block {
  min-height: 140px;
  margin-top: 140px;
  margin-bottom: 2em;
}
h1.title-page-title, h2.title-page-contributor {
  font-weight: normal;
  text-align: center;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  line-height: 1.2 !important;
}
h1.title-page-title {
  font-size: 150%;
  text-transform: uppercase;
}
div.title-page-contributor-block {
  min-height: 80px;
  margin-bottom: 1.5em;
}
h2.title-page-contributor-primary, .heading-format-reduced .element-title {
  font-size: 120%;
}
.heading-container-single {
  text-align: center;
  margin-left: 6%;
  margin-right: 6%;
  letter-spacing: 0.03em;
}
.heading-size-full {
  min-height: 12em;
}
.heading-size-full.heading-without-image .heading-contents {
  padding-top: 4.5em;
}
.heading-size-small .heading-contents {
  padding-top: 2em;
}
.heading {
  margin-bottom: 2em;
}
.heading-alignment-fixed {
  margin-left: 6%;
  margin-right: 6%;
  text-align: center;
}
.heading-size-small .title-subtitle-block, .heading-size-small .title-subtitle-block .title-block, .heading-size-small .title-subtitle-block .element-number-block {
  padding-top: 0;
}
.heading-container-single .element-title {
  font-size: 130%;
}
.heading-format-full .element-number-block {
  min-height: 1.75em;
}
h2.title-page-contributor span.title-page-contributor-name, .element-title {
  text-transform: uppercase;
}
.element-title, h1.title-page-title {
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  font-style: normal;
}
h2.title-page-contributor span.title-page-contributor-name {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-style: normal;
}
div.alignment-block {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}
p.alignment-block-content {
  text-indent: 0;
  margin-top: 0;
}
p.alignment-block-content-left {
  text-align: left;
}