MobileRead Forums - View Single Post

thiago.eec · 08-09-2020, 09:01 PM

Quote:

Originally Posted by Rellwood

I would be so happy if I could just pay someone to create a template or file that I could just add and not have to do it myself and mess it up.

No need for paying. Just go to your calibre installation folder and find these files:

Code:

Calibre2\app\resources\jacket\template.xhtml
Calibre2\app\resources\jacket\stylesheet.css

On my Windows machine, the installation folder is:

Code:

C:\Program Files\Calibre2\app\resources\jacket

Now, you add your custom columns by editing the template.xhtml file, like this (see the red lines):

Spoiler:

Code:

<html xmlns="{xmlns}">
    <head>
        <title>{title_str}</title>
        <meta name="calibre-content" content="jacket"/>
        <style type="text/css">{css}</style>
    </head>
    <body>
        <div class="cbj_banner">
            <table class="cbj_header">
            	<tr>
            		<td class="cbj_title" colspan="2">{title}</td>
            	</tr>
                <tr>
                    <!-- If you do not want the series number to be formatted using roman numerals
                        change {series.roman} to {series}. You can also access the raw series name and number
                        using {series.name}, {series.number} or {series.roman_number} -->
                    <td  class="cbj_series" colspan="2">{series.roman}</td>
                </tr>
            	<tr>
            		<td class="cbj_author" colspan="2">{author}</td>
            	</tr>
                <tr>
                	<td class="cbj_pubdata" colspan="2">{publisher} ({pubdate})</td>
                </tr>

            	<tr>
            		<td class="cbj_author" colspan="2"><hr class="metadata_divider" /></td>
            	</tr>

                <tr class="cbj_rating">
                    <td class="cbj_label">{rating_label}:</td>
                    <td class="cbj_content">{rating}</td>
                </tr>
                <tr class="cbj_tags">
                    <td class="cbj_label">{tags_label}:</td>
                    <!-- If you want the tags to be alphabetical, change {tags} to
                        {tags.alphabetical} -->
                    <td class="cbj_content">{tags}</td>
                </tr>
                <tr data-calibre-jacket-searchable-tags="1" style="color:white; display:none"><td colspan="2">{searchable_tags}</td></tr>
            </table>
            <div class="cbj_footer">{footer}</div>
        </div>
        <hr class="cbj_kindle_banner_hr" />
        <!-- 
        In addition you can add code to show the values of custom columns here.
        The value is available as _column_name and the title as
        _column_name_label.  For example, if you have a custom column with
        label #genre, you can add it to this template with _genre_label and
        _genre. Note that the # is replaced by an underscore. For example
        
        <div><b>{_genre_label}:</b> {_genre}</div>
        -->
		
                <div><b>{_pages_label}:</b> {_pages}</div>
		<div class="read_date"><b>{_read_date_label}:</b> {_read_date}</div>

        <div class="cbj_comments">{comments}</div>
    </body>
</html>

On the above example, I've added two custom columns: #pages and #read_date. Notice that the # has been replaced by an underscore. For the #read_date column I added a class, corresponding to a CSS rule defined on the stylesheet.css file (see below).

Spoiler:

Code:

/*
**	Book Jacket generation
**
**	The template for Book Jackets is template.xhtml
**	This CSS is inserted into the generated HTML at conversion time
**
**	Users can control parts of the presentation of a generated book jacket by
** 	editing this file and template.xhtml
**
**	The general form of a generated Book Jacket:
**
**	                  Title
**	Series: series [series_index]
**	Published: year_of_publication
**	Rating: #_of_stars
**	Tags: tag1, tag2, tag3 ...
**
**	Comments
**
**	If a book does not have Series information, a date of publication, a rating or tags
**	the corresponding row is automatically removed from the generated book jacket.
*/

/*
**	Banner
**	Only affects EPUB, kindle ignores this type of formatting
*/
.cbj_banner {
	background: #eee;
    color: black;
	border: thin solid black;
	margin: 1em;
	padding: 1em;
	border-radius:8px;
	}

/*
**	Title
*/
table.cbj_header td.cbj_title {
	font-size: 1.5em;
	font-style: italic;
	text-align: center;
}

/*
**	Series
*/
table.cbj_header td.cbj_series {
	text-align: center;
}

/*
**	Author
*/
table.cbj_header td.cbj_author {
	text-align: center;
}

/*
**	Publisher/published
*/
table.cbj_header td.cbj_pubdata {
	text-align: center;
}

/*
**	Table containing Rating and Tags
*/
table.cbj_header {
	width: 100%;
	}

/*
**	General formatting for banner labels
*/
table.cbj_header td.cbj_label {
	font-family: sans-serif;
	text-align: right;
	width: 33%;
	}

/*
**	General formatting for banner content
*/
table.cbj_header td.cbj_content {
	font-family: sans-serif;
	text-align: left;
	width:67%;
	}

/*
** Metadata divider
*/
hr.metadata_divider {
	width:90%;
	margin-left:5%;
	border-top: solid white 0px;
	border-right: solid white 0px;
    border-bottom: solid black 1px;
    border-left: solid white 0px;
	}



/*
**	To skip a banner item (Series|Published|Rating|Tags),
**	edit the appropriate CSS rule below.
*/
table.cbj_header tr.cbj_series {
	/* Uncomment the next line to remove 'Series' from banner section */
	/* display:none; */
	}

table.cbj_header tr.cbj_pubdata {
	/* Uncomment the next line to remove 'Published (year of publication)' from banner section */
	/* display:none; */
	}

table.cbj_header tr.cbj_rating {
	/* Uncomment the next line to remove 'Rating' from banner section */
	/* display:none; */
	}

table.cbj_header tr.cbj_tags {
	/* Uncomment the next line to remove 'Tags' from banner section */
	/* display:none; */
	}

hr {
	/* This rule controls formatting for any hr elements contained in the jacket */
	border-top: 0px solid white;
	border-right: 0px solid white;
	border-bottom: 2px solid black;
	border-left: 0px solid white;
	margin-left: 10%;
	width: 80%;
	}

.cbj_footer {
	font-family: sans-serif;
	font-size: 0.8em;
	margin-top: 8px;
	text-align: center;
	}

.cbj_comments {
	font-family: sans-serif; 
	}

.read_date {
	text-align: center; 
	}

The CSS rule is just an example. You can use whatever you want, or none.