How to change background color in Code View window

[philja]

In my Sigil in linux, the Code View window is a sort of pale grey and doesn't help visibility when I take a screenshot. I would like the background to be white as in a version I've looked at in Windows10 but I don't see any setting in Preferences > Appearances.

I've found an entry in sigil.ini that looks as if it should be relevant but I don't understand it and have no idea how it relates to a color.

code_view_background_color=@Variant(\0\0\0\x43\0\xff\xff\0\0\0\0\0\0\0\0)

Strangely (for me), the corresponding entry in sigil.ini in the Windows10 with Sigil 1.9.10 is exactly the same although the background color there is white (or appears to be white).

So, it is likely that I have misunderstood and the entry I found is not the one governing the background color.

Is it possible to change the background color of the Code View window?

[DiapDealer]

Depending on your distro and your desktop environment, there's probably a platform plugin that sets the colors of Qt programs.

Once you've selected Preferences > Appearances, then select the Code View tab on the right. You should see tabs for Code view, Preview, Icon Themes, and Main UI when "Appearance" is highlighted on the left. The background and text colors are handled by the theme. You'll have to figure out how your system is theming Qt programs and adjust the background there. Probably kvantum and/or qt5-ct.

[philja]

Thank you DiapDealer. I had been in the Preferences > Appearances and under the Code View tab I'd seen color settings for everything except the background and I hadn't expanded my thinking sufficiently to imagine it was under the OS themes control.

I don't have either kvantum or qt5-ct installed and I am reluctant to explore too far at the moment because UbuntuStudio 22.04.1 LTS should be released in the next 2 or 3 weeks and that will involve a change from XFCE to KDE Plasma so no doubt there will be subsequent changes to get to live with as well. That will remain for a longer-term solution, possibly.

But thanks to your hints, I found a high contrast appearance > style setting in the OS system settings that does the job for the Code View window in Sigil. It also does revolting things to the icon bar but I can live with that for the duration of a few screenshots.

[DiapDealer]

You can also use QSS (Qt style sheets) to customize Sigil's appearance. It works similar to css. If you create a file named qt_styles.qss in Sigil's preferences folder, Sigil will automatically load it when launched. The following contents were enough to make sure Code View's background was white for me.

CodeViewEditor {
    background: white;
}

[philja]

Originally Posted by DiapDealer

You can also QSS (Qt style sheets) to customize Sigil's appearance. It works similar to css. If you create a file named qt_styles.qss in Sigil's preferences folder, Sigil will automatically load it when launched. The following contents were enough to make sure Code View's background was white for me.

CodeViewEditor {
    background: white;
}

Thank you again, DiapDealer. QSS files? A whole new adventure playground for me. I'll have to look into that someplace.

Well, I made the qt_styles.qss file and it did the job and allows me to do my screenshots while keeping my habitual desktop appearance style.

Thanks again.

[DiapDealer]

No problem. Here's Qt's primer on qss if you're interested:

https://doc.qt.io/qt-5/stylesheet.html.

[philja]

Originally Posted by DiapDealer

No problem. Here's Qt's primer on qss if you're interested:

https://doc.qt.io/qt-5/stylesheet.html.

Thanks again.

[quocsan]

Originally Posted by DiapDealer

You can also use QSS (Qt style sheets) to customize Sigil's appearance. It works similar to css. If you create a file named qt_styles.qss in Sigil's preferences folder, Sigil will automatically load it when launched. The following contents were enough to make sure Code View's background was white for me.

CodeViewEditor {
    background: white;
}

Dear DiapDealer,
I've intended to change space between paragraphs in Code View by putting something in “qt_styles.qss” file. I've tried so many times but gained no success.
Could you please show me how to solve this matter?
Thanks.

[Turtle91]

Originally Posted by quocsan

Dear DiapDealer,
I've intended to change space between paragraphs in Code View by putting something in “qt_styles.qss” file. I've tried so many times but gained no success.
Could you please show me how to solve this matter?
Thanks.

Diap is certainly the knowledgeable one around here about that stuff...and BetterRed...they will be able to answer how to customize for you.


In the meantime, there are a couple of built-in Sigil functions you can try. These are just for appearance while editing in code view as none of this styling affects how the ePub will display in readers/apps.


1) Right click anywhere in code view and select 'Mend and Prettify all HTML files'. That puts a decent amount of space between the paragraphs...it also fixes some very basic html errors.


2) There is a toggle to turn on/off word wrapping (so the words go off screen to the right)...I'm pretty sure it's in the view menu???

[quocsan]

Many thanks for your helpful information, Turtle91.

[philja]

Further to my original problem with background color in Code View - which was solved by the qt_styles.qss suggestion --

Since implementing that solution, I have made a clean install of the latest LTS version of my operating system, UbuntuStudio 22.04.1. While setting up missing but favorite applications, it came Sigil's turn to be installed.

I found on Sigil's website that I could have the latest version of Sigil by using the flatpak version so in the interests of keeping the same version on linux and Windows boxes, I installed flatpak Sigil 1.9.20.

The flatpak version seems to take no account of the qt_styles.qss file when launching. I suppose somehow I should have known that flatpaks came with all their own baggage.

Where can I apply the same influence to the Code View background color in Sigil flatpak versions? And does this have implications for all the other custom user dictionaries, clips etc stored in .local/share/sigil-ebook/ directory ?

[DiapDealer]

I've no idea, to be honest. I don't have any experience (or involvement) with the Flatpak version of Sigil. I only know that Sigil can be installed and used via Flatpak. Customization of Flatpak programs is not something I have a stake in. Perhaps someone else will be able to help? But I suspect the preferences location of the Flatpack version has merely been relocated from where the official version stores its stuff. If so, clicking the "Open Preferences Location" button in Sigil's Preference dialog should reveal where that new location is.

[philja]

Originally Posted by DiapDealer

I've no idea, to be honest. I don't have any experience (or involvement) with the Flatpak version of Sigil. I only know that Sigil can be installed and used via Flatpak. Customization of Flatpak programs is not something I have a stake in. Perhaps someone else will be able to help? But I suspect the preferences location of the Flatpack version has merely been relocated from where the official version stores it's stuff. If so, clicking the "Open Preferences Location" button in Sigil's Preference dialog should reveal where that new location is.

Thanks, DiapDealer. An inspired reply, again. I took your suggestion and found the preferences under flatpak are :

~/.var/app/com.sigil_ebook.Sigil/data/sigil-ebook/sigil/

and the file structure there parallels what I was used to seeing under ~/.local/share/sigil_ebook/sigil/

So I dropped a copy of qt_styles.qss into the appropriate spot and promptly regained control of the Code View background color.

I'll do the same with some of the other files if I find I'm missing other preferences.

[DiapDealer]

Hey, thanks for reporting back. We've all learned something!