CSS Styling based on class/existing styling

[1ily]

Hello!

I have a colour eink device, and it feels like the colour feature is going to a waste when most of my books are black and white.

I had the idea of adding colour to any div/p/span/header classes with a certain class or ID, but it misses the occasional text portion.

Is there any way to apply styling based on an existing class with the bold/italic styling?

h1, h2, h3, h4, h5, h6, i, em,div[class*="italic"],p[class*="italic"],span[class*="italic"], b, strong {
color: #8D4CF6;
}

span[class*="title"],p[id*="chapter"],div[id*="chapter"],span[id*="chapter"],p[id*="epilogue"],div[id*="epilogue"] ,span[id*="chapter"],span[id*="epilogue"],p[value*="Table of Contents"],p[value*="ToC"] ,div[value*="Table of Contents"],div[value*="ToC"],p[value*="prologue"] ,div[value*="prologue"],div[value*="prologue"] ,span[value*="prologue"] {
color: #8D4CF6;
}

[Karellen]

Where is that code snippet from? Is that your CSS code?

[1ily]

Originally Posted by Karellen

Where is that code snippet from? Is that your CSS code?

Yes, I made it myself. I put it in Preferences..Common options..Styling

It's not the cleanest thing in the world, but works in MOST cases. It misses any text portion where the class names are gibberish or ones that don't use the <i> or <b> tags. I'd like to change it and apply the color to all classes with a specific style attached to it or find another solution...

[Karellen]

Oh right. You are adding it in conversion, not actually editing the css in the ebook.

TBH, I have never fiddled with conversion settings as for me it is just easier to edit the css in the ebook.

So you are trying to colour the italic text.

If it were mine, I would change the <span class="italics"> to the correct <i> tags
Then I would create a css entry like this...

em, i, .italic {
font-style: italic;
color: #8D4CF6;
}

But if you still want to do that in conversion, others will need to advise you. But go ahead and try editing the css directly in a single ebook and see how it works out.

[kovidgoyal]

Use the transform styles tool. There you can make rules like if the font-weight is bold add extra properties and so on

[1ily]

Originally Posted by Karellen

Oh right. You are adding it in conversion, not actually editing the css in the ebook.

TBH, I have never fiddled with conversion settings as for me it is just easier to edit the css in the ebook.

So you are trying to colour the italic text.

If it were mine, I would change the <span class="italics"> to the correct <i> tags
Then I would create a css entry like this...

em, i, .italic {
font-style: italic;
color: #8D4CF6;
}

But if you still want to do that in conversion, others will need to advise you. But go ahead and try editing the css directly in a single ebook and see how it works out.

That is a good way to go about it, but I chose to do span[class*="italic"] because some of the class names have odd naming variations like "italic7", so the *= will catch any class name as long as "italic" somewhere inside it and apply the style!

[1ily]

Originally Posted by kovidgoyal

Use the transform styles tool. There you can make rules like if the font-weight is bold add extra properties and so on

This is exactly what I was looking for. Thank you!

[Karellen]

Originally Posted by 1ily

because some of the class names have odd naming variations like "italic7"

Great that you got it sorted out.
Though it does raise a side issue, why does your ebook need at least 7 italic classes? Something wrong there. Anyway just a bit of a worm to eat at you.

[JSWolf]

Originally Posted by Karellen

Great that you got it sorted out.
Though it does raise a side issue, why does your ebook need at least 7 italic classes? Something wrong there. Anyway just a bit of a worm to eat at you.

I've seen multiple italic classes for different reasons such as an embedded font or sans-serif or monospace, regular italic, bold italic, part of offset text so it has LR margins, etc.