MobileRead Forums
Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Software > Calibre > Editor
Reload this Page Trouble getting background color change to display properly

Notices

Reply
Page 1 of 2 1 2
 
Thread Tools Search this Thread
Old 07-22-2022, 03:47 PM   #1
Coolmeadow Kid
Member
Coolmeadow Kid began at the beginning.
 
Posts: 23
Karma: 10
Join Date: Jan 2017
Location: West of Fort Worth, TX
Device: Kindle Fire 7, 2015, Fire HD 8 2021
Trouble getting background color change to display properly
Hi. I've got one index section on a book that I want to change to a solid black color with white letters. In the edit screen the file preview shows perfect. When sending to a Kindle Fire or using the caliber book View button, it shows blocks of black with white letters, but still a white background. I'd appreciate any help in how to get this to show the way I want it to work. Included is a screen shot of what it looks like. The file preview in edit mode is on the right and looks perfect. The book view from the main Caliber page is superimposed on the edit screen just to the left.
Thanks for any help you can offer.
Attached Thumbnails
Click image for larger version Name: Anchor leg crash section 2.jpg Views: 119 Size: 385.8 KB ID: 195235  
Last edited by Coolmeadow Kid; 07-22-2022 at 05:14 PM.
Coolmeadow Kid is offline   Reply With Quote
Old 07-22-2022, 08:01 PM   #2
Foozle
Connoisseur
Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.
 
Posts: 62
Karma: 221034
Join Date: May 2021
Device: None
What is your background and text color code?
Foozle is offline   Reply With Quote
Advert
Old 07-22-2022, 09:05 PM   #3
Coolmeadow Kid
Member
Coolmeadow Kid began at the beginning.
 
Posts: 23
Karma: 10
Join Date: Jan 2017
Location: West of Fort Worth, TX
Device: Kindle Fire 7, 2015, Fire HD 8 2021
If I'm looking at the right things, the black background is #000000 and the white text is ffffff. Just the basic colors in the drop down color menus on the HTML edit window. If this isn't what you're looking for, let me know where to find it. FYI, I don't understand HTML language. In 11 books in this series, I have recognized the HTML Calibre creates when the program converts from docx to epub and copy and paste the specific strings to get the desired effect. So it's all on recognition and none on understanding! I know that may not help you to help me, but it's all I know to do at my age. Thanks for your willingness to try to help!!
Coolmeadow Kid is offline   Reply With Quote
Old 07-22-2022, 09:45 PM   #4
Karellen
Wizard
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 1,611
Karma: 9500498
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
Quote:
Originally Posted by Coolmeadow Kid View Post
If I'm looking at the right things, the black background is #000000 and the white text is ffffff.
How did you apply this?
What code did you use and where did you apply it to get the effect that you show in your screenshot?
Karellen is offline   Reply With Quote
Old 07-23-2022, 12:41 AM   #5
Coolmeadow Kid
Member
Coolmeadow Kid began at the beginning.
 
Posts: 23
Karma: 10
Join Date: Jan 2017
Location: West of Fort Worth, TX
Device: Kindle Fire 7, 2015, Fire HD 8 2021
Honestly, this was done 4 years ago and I don't remember. Plus that computer bit the dust 3 years ago, so I lost any notes I might have had on what I did. I know I tried multiple things I found on internet searches over a week or two. I was elated when this one showed the desired outcome on the File preview side of the epub edit page. When I loaded the book on my Kindle Fire and read the book that way looking for errors to fix, I noticed it didn't display the total black page like it does on the file preview screen showed. I never had any luck finding a fix for it, so chalked it up to one of those things that would just stay a mystery. I think I even posted a question on this forum but didn't get any help. Sorry I'm no help to clarify things for you. Thanks!
Coolmeadow Kid is offline   Reply With Quote
Advert
Old 07-23-2022, 01:36 AM   #6
Foozle
Connoisseur
Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.
 
Posts: 62
Karma: 221034
Join Date: May 2021
Device: None
As in your screenshot in the background, you obviously have the code in that book. Can you post the code for the colors from that book here in the thread?
Foozle is offline   Reply With Quote
Old 07-23-2022, 09:44 AM   #7
Coolmeadow Kid
Member
Coolmeadow Kid began at the beginning.
 
Posts: 23
Karma: 10
Join Date: Jan 2017
Location: West of Fort Worth, TX
Device: Kindle Fire 7, 2015, Fire HD 8 2021
Hopefully this the part you are asking for. If not, please let me know where to find what you need. Thanks again! Jim.



<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlu0003alang="en" xmlU0003Alang="en">

<head>
<title>Unknown</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<link href="page_styles.css" rel="stylesheet" type="text/css"/>
</head>

<body class="calibre11">

<p class="block_5">*</p>

<p class="block_5">*</p>
<span class="calibre3">The next thing I know, I am in a room, sitting by someone. It is dark in here, but everyone has enough of a glow around them that I can see a little. Though everything is a little fuzzy. Must be my eyes from being in the dark. I wonder how long I have been this way.
Coolmeadow Kid is offline   Reply With Quote
Old 07-23-2022, 09:49 AM   #8
Foozle
Connoisseur
Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.
 
Posts: 62
Karma: 221034
Join Date: May 2021
Device: None
Not quite, it doesn't show the actual colors code. Open the CSS file and post that code.
Foozle is offline   Reply With Quote
Old 07-23-2022, 10:04 AM   #9
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 30,944
Karma: 60358908
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
actually, that is faulty code

<span> is not supposed to be standalone, but always contained within a block level tag. p, div, h# ...

If you had run the debug tool, it should have been complaining

<p class="calibrewhatever"><span class="calibre3">

RMSDK is notorious for tossing out the CSS if it encounters bad code
theducks is offline   Reply With Quote
Old 07-23-2022, 10:29 AM   #10
Foozle
Connoisseur
Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.
 
Posts: 62
Karma: 221034
Join Date: May 2021
Device: None
Oh, yeah... Missed that. *d'oh!* But still, it would help to see the color code as well, just in case there's an error in that somewhere, too.
Foozle is offline   Reply With Quote
Old 07-23-2022, 10:51 AM   #11
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 30,944
Karma: 60358908
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by Foozle View Post
Oh, yeah... Missed that. *d'oh!* But still, it would help to see the color code as well, just in case there's an error in that somewhere, too.
Absolutely.
It would also help if the description of the result desired was more specific.
Paragraph? Just a block?
so we know where to apply the styles AND what is the target reading device (we all know how much fun it is to get universal code to work )
theducks is offline   Reply With Quote
Old 07-23-2022, 12:32 PM   #12
Coolmeadow Kid
Member
Coolmeadow Kid began at the beginning.
 
Posts: 23
Karma: 10
Join Date: Jan 2017
Location: West of Fort Worth, TX
Device: Kindle Fire 7, 2015, Fire HD 8 2021
OK, I think....I'll also run the debug tool and see if it shows anything. If so I'll copy and post that.
Spoiler:

block_ {
color: black;
display: block;
line-height: 1.2;
text-align: left;
text-indent: 36pt;
margin: 0;
padding: 0;
}
.block_1 {
background-color: #FFF;
color: black;
display: block;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
text-align: center;
margin: 0;
padding: 0;
}
.block_2 {
display: block;
line-height: 1.2;
text-align: left;
text-indent: 36pt;
margin: 0;
padding: 0;
}
.block_3 {
color: black;
display: block;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
text-align: center;
margin: 0;
padding: 0;
}
.block_4 {
background-color: #FFF;
color: black;
display: block;
line-height: 1.2;
text-align: left;
text-indent: 36pt;
margin: 0;
padding: 0;
}
.block_5 {
display: block;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
text-align: center;
margin: 0;
padding: 0;
}
.block_6 {
display: block;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}
.block_7 {
display: block;
font-weight: bold;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}
.block_8 {
color: black;
display: block;
font-family: serif;
font-size: 0.75em;
text-align: center;
margin: 0;
padding: 0;
}
.block_9 {
color: black;
display: block;
font-family: serif;
font-size: 0.75em;
text-align: left;
margin: 0;
padding: 0;
}
.block_11 {
display: block;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
text-align: left;
text-indent: 36pt;
margin: 0;
padding: 0;
}
.block_12 {
color: black;
display: block;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}
.block_13 {
color: black;
display: block;
font-weight: bold;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}
.block_14 {
background-color: #FFF;
color: black;
display: block;
font-family: serif;
font-size: 0.75em;
text-align: left;
margin: 0;
padding: 0;
}
.block_15 {
background-color: #FFF;
color: black;
display: block;
font-weight: bold;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}
.block_16 {
background-color: #FFF;
color: black;
display: block;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}
.block_17 {
background-color: #FFF;
color: black;
display: block;
font-family: serif;
font-size: 0.75em;
text-align: center;
margin: 0;
padding: 0;
}
.block_18 {
color: black;
display: block;
font-family: serif;
font-size: 0.75em;
font-weight: normal;
text-align: left;
margin: 0;
padding: 0;
}
.block_19 {
background-color: #FFF;
display: block;
line-height: 1.2;
text-align: left;
text-indent: 36pt;
margin: 0;
padding: 0;
}
.block_20 {
display: block;
font-size: 0.75em;
text-align: left;
text-indent: 36pt;
margin: 0;
padding: 0;
}
.block_21 {
background-color: #FFF;
display: block;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}
.block_22 {
color: black;
display: block;
font-family: serif;
font-size: 0.75em;
line-height: 1.2;
text-align: left;
margin: 0 0 8pt;
padding: 0;
}
.block_23 {
background-color: #FFF;
display: block;
line-height: 1.2;
text-align: center;
margin: 0;
padding: 0;
}
.calibre {
color: #000;
display: block;
font-family: "Times New Roman", serif;
font-size: 1em;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
margin: 0 72pt;
}
.calibre1 {
display: block;
margin: 1em 0;
}
.calibre2 {
font-weight: bold;
}
.calibre3 {
color: rgb(255, 255, 255);
}
.calibre4 {
font-style: italic;
}
.calibre5 {
font-size: 0.75em;
line-height: 1.2;
vertical-align: super;
}
.calibre6 {
font-style: italic;
line-height: 1.2;
}
.calibre7 {
display: block;
line-height: 1.2;
}
.calibre8 {
font-weight: bold;
line-height: 1.2;
}
.calibre9 {
display: block;
line-height: 1.2;
margin: 0;
padding: 0;
}
.calibre10 {
background-color: #000;
color: #000;
display: block;
font-family: "Times New Roman", serif;
font-size: 1em;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
margin: 0 72pt;
}
.calibre11 {
background-color: rgb(0, 0, 0);
}
.calibre12 {
color: rgb(209, 209, 209);
}
.calibre13 {
color: rgb(176, 176, 176);
}
.calibre14 {
color: rgb(108, 108, 108);
}
.calibre15 {
color: rgb(63, 63, 63);
}
.calibre16 {
display: block;
font-size: 1em;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
margin: 0 72pt;
}
.calibre19 {
font-size: 0.75em;
line-height: 1.2;
vertical-align: super;
white-space: pre-wrap;
}
.tab {
line-height: 1.2;
white-space: pre-wrap;
}
.text_ {
font-style: italic;
font-weight: bold;
line-height: 1.2;
}
.text_1 {
font-style: italic;
font-weight: bold;
line-height: 1.2;
text-decoration: underline;
}
.text_2 {
background-color: #FFF;
line-height: 1.2;
}
.text_3 {
background-color: #FFF;
font-size: 1.33333em;
line-height: 1.2;
}
.text_4 {
background-color: #FFF;
font-size: 1.83333em;
font-weight: bold;
line-height: 1.2;
}
.text_5 {
color: #000;
line-height: 1.2;
}
.text_6 {
background-color: #FFF;
font-size: 0.75em;
line-height: 1.2;
vertical-align: super;
}
.text_7 {
background-color: #FFF;
font-size: 1em;
line-height: 1.2;
vertical-align: super;
}
Last edited by theducks; 07-23-2022 at 01:44 PM. Reason: spoilered
Coolmeadow Kid is offline   Reply With Quote
Old 07-23-2022, 12:48 PM   #13
Coolmeadow Kid
Member
Coolmeadow Kid began at the beginning.
 
Posts: 23
Karma: 10
Join Date: Jan 2017
Location: West of Fort Worth, TX
Device: Kindle Fire 7, 2015, Fire HD 8 2021
I get a lot of these in the left screen when I click the debug link: Link points to a location not present in the target file****[toc.ncx]

then one of these in the right screen: Warning [1 / 57]
toc.ncx (line: 30)
The link "None" points to a location toc_id_25 in the file index_split_001.html that does not exist. You should either remove the location so that the link points to the top of the file, or change the link to point to the correct location.
Try to correct all fixable errors automatically

I clicked the link to try to correct all fixable errors automatically but it still shows all the same bugs. But I don't understand how to 'correct the links pointing to a location not in the target file'. And I'm quickly starting to understand that this is WAY beyond my ability to fix or even comprehend!!! (where are the smiley faces when I need them!!)
Last edited by Coolmeadow Kid; 07-23-2022 at 12:55 PM.
Coolmeadow Kid is offline   Reply With Quote
Old 07-23-2022, 03:29 PM   #14
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,448
Karma: 145491800
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by theducks View Post
actually, that is faulty code

<span> is not supposed to be standalone, but always contained within a block level tag. p, div, h# ...

If you had run the debug tool, it should have been complaining

<p class="calibrewhatever"><span class="calibre3">

RMSDK is notorious for tossing out the CSS if it encounters bad code
It can also drop the HTML from where the error is to the end of the file.
JSWolf is offline   Reply With Quote
Old 07-23-2022, 05:29 PM   #15
Foozle
Connoisseur
Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.Foozle ought to be getting tired of karma fortunes by now.
 
Posts: 62
Karma: 221034
Join Date: May 2021
Device: None
IMO, there are way too many styles that have differing elements. Some have the color codes as names and others as hex, for starters. Some don't even have the colors at all. Then there is the absolute abundance of block styles in general.

You would just need one single style to make your background black and the text white. Such as:

body {
background-color: black;
color: white;
}

That would apply the background and text colors to all the pages all at once as it uses the main body tag to implement that.

Then you should clean up all the styles to combine like ones together, such as:

.block_6 {
display: block;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}

.block_16 {
background-color: #FFF;
color: black;
display: block;
line-height: 1.2;
text-align: left;
margin: 0;
padding: 0;
}

Notice the only difference are the color lines. You can remove that and combine those two into a single style. Just make sure to change your references throughout the book. Then just continue cleaning up the styles until it's clean with only a few styles instead of *gestures to all* all that garbage.
Last edited by Foozle; 07-23-2022 at 05:35 PM.
Foozle is offline   Reply With Quote
Reply
Page 1 of 2 1 2

« Previous Thread | Next Thread »

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
How can I change background color? AxaRu Sigil 5 02-11-2022 10:25 AM
How to css change background color of an epub? alegriadelarte Editor 1 05-15-2018 03:37 PM
change background color? suniram Calibre 8 05-26-2016 01:17 PM
Altering HTML Script To Properly Display Background Images In ADE Ereaders. Turk.Turkleton Sigil 16 09-25-2012 12:34 PM
Change Link2SD background color giosa Sony Reader Dev Corner 0 03-01-2012 06:33 PM


All times are GMT -4. The time now is 04:43 PM.

Contact Us - FAQ - Guidelines - Privacy - Top

MobileRead.com is a privately owned, operated and funded community.