How to style (CSS) Custom columns/fields in Book details pane? What are their IDs?

[01100001]

Under Preferences > Look & feel > Book details > Text styling it appears you can style the content shown in the Book details pane.

This is what I am referring to:



I am looking to style a custom column/field and its content in the Book details pane (called Filenames2 (#filenames2)). It looks like this (and is based on the help received from our members here):



But I don't know what their HTML ID attribute values are so I can use them and style them using CSS. Also, I cannot be sure what their HTML markup looks like.

I tried a couple, and neither is working:

#_filenames2 ul,
#_filenames2 ul li {
    padding-left: 0;
    margin-left: 0;
    text-indent: 0;
}

#_filenames2 li {
    user-select: all;
}

ul,
ul li {
    padding-left: 0;
    margin-left: 0;
    text-indent: 0;
}

li {
    user-select: all;
}

Question: What am I missing here? Also, is there any way to view the markup of the actual fields and their values being shown in the Book details pane? (I know there's a partial example shown in the Preferences > Look & feel > Book details > Text styling field.)

[kovidgoyal]

The example tell you everything you need to know. The ids for custom columns are underscore + field name. And classes are based on column datatypes.

I suggest you first try styling a simple custom column.

[01100001]

So what I was already doing (as seen in the first example). It wasn't working because Calibre uses QT-specific CSS property for indentation -qt-list-indent.

Thanks to this link @kovidgoyal had shared in an older post showing all supported HTML Tags & Attributes and CSS Properties & Selectors: https://doc.qt.io/qt-5/richtext-html-subset.html

That clears things up. I will have to find some other way to sort my issues.

Thank you!

Edit to clarify: The CSS property user-select isn't supported.

[chaley]

Originally Posted by 01100001

So what I was already doing (as seen in the first example). It wasn't working because Calibre uses QT-specific CSS property for indentation -qt-list-indent.

Thanks to this link @kovidgoyal had shared in an older post showing all supported HTML Tags & Attributes and CSS Properties & Selectors: https://doc.qt.io/qt-5/richtext-html-subset.html

That clears things up. I will have to find some other way to sort my issues.

Thank you!

Edit to clarify: The CSS property user-select isn't supported.

Having failed with CSS I made it work using a table instead of an unordered list.

program:
	j = '';
	for i in $tags:
		j = j & '<tr><td>&bull;</td><td><a href="' & re(i, '"', '&quot;') & '">' & i & '</a></td></tr>'
	rof;
	if j then '<table>' & j & '</table>'else '' fi;

EDIT: Forgot the </tr> on the original template. Corrected.

[01100001]

Ha, good idea! Thanks!