Changing styling for reference mode

willbeaufoy · 11-03-2015, 10:18 AM

I use black as a background color and white as a text color, meaning that by default I can't see the text in the reference mode popups, as the background is an off white color.

How can I change the text color or background color for reference mode? I know css but don't know what class/id reference mode is.

kovidgoyal · 11-03-2015, 10:24 AM

You can simply right click in the reference mode rectangle and use inspect element to get the details. IIRC it is <div id="calibre_reference_panel">

kovidgoyal · 11-03-2015, 10:30 AM

https://github.com/kovidgoyal/calibr...ca3f78ed39cba1

willbeaufoy · 11-03-2015, 10:44 AM

Ah thanks I'd missed 'inspect element'. Yes the id is calibre_reference_panel. I did:

#calibre_reference_panel {
color: #000000 !important;
}

#calibre_reference_panel p {
color: #000000 !important;
}

Which works. Not quite as important but I don't think this will work for the actual text that is selected to be referenced though, but looks like you are fixing this in your commit.

11-03-2015, 10:18 AM	#1
willbeaufoy Junior Member Posts: 4 Karma: 10 Join Date: Oct 2015 Device: Nook	Changing styling for reference mode I use black as a background color and white as a text color, meaning that by default I can't see the text in the reference mode popups, as the background is an off white color. How can I change the text color or background color for reference mode? I know css but don't know what class/id reference mode is.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Changing download mode	baffled	Android Devices	1	06-07-2014 10:02 AM
No pop-up with reference mode	net-buoy	Devices	7	08-11-2013 02:39 AM
Reference Mode in calibre Viewer	Lady Fitzgerald	Calibre	2	10-12-2010 10:19 AM
Changing font for code view mode	matthewyi	Sigil	2	11-05-2009 02:20 PM
PRS-500 Speed of changing to/from USB transfer mode	alexbe	Sony Reader Dev Corner	4	08-31-2007 11:49 AM

11-03-2015, 10:24 AM	#2
kovidgoyal creator of calibre Posts: 45,341 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	You can simply right click in the reference mode rectangle and use inspect element to get the details. IIRC it is <div id="calibre_reference_panel">

11-03-2015, 10:30 AM	#3
kovidgoyal creator of calibre Posts: 45,341 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	https://github.com/kovidgoyal/calibr...ca3f78ed39cba1

11-03-2015, 10:44 AM	#4
willbeaufoy Junior Member Posts: 4 Karma: 10 Join Date: Oct 2015 Device: Nook	Ah thanks I'd missed 'inspect element'. Yes the id is calibre_reference_panel. I did: #calibre_reference_panel { color: #000000 !important; } #calibre_reference_panel p { color: #000000 !important; } Which works. Not quite as important but I don't think this will work for the actual text that is selected to be referenced though, but looks like you are fixing this in your commit.

Advert