Qt Stylesheet Snippet Repository

Ideas for improvements and requests for new features in XnView MP

Moderators: XnTriq, helmut, xnview

User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq »

In my initial post I tried to cover the theoretics behind Qt styles. (I'll add more links to references and tutorials as I find them.) Now it's time to get our hands dirty.

The easiest and fastest way to achieve results is to use an existing theme as a template and build upon it. JohnFredC and oops66 have paved the way for the rest of us. However, there's still some work to be done.

Here are some samples for your dissecting pleasure:
For the last two years I was hoping for QtStyles.net to become a one stop shop for all things QSS. Unfortunately the site never took off and seems to be abandoned now :|
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq »

Unfortunately I haven't found a cheat sheet for QSS.
Please keep in mind that Qt supports only a subset of CSS.
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq »

JohnFredC ([url=http://newsgroup.xnview.com/viewtopic.php?p=88970#p88970]XnView MP & theme[/url]) wrote:So far I haven't found a way to simplify the tab stuff in the Category/Folder tabbed thing... there are at least two unnecessary lines there that I haven't been able to identify. And what controls the colors of the inactive tabs?
  • QTabBar::tab:!active
  • QTabBar::tab:!selected
  • QTabBar::tab:first:!active
  • QTabBar::tab:first:!selected
  • QTabBar::tab:middle:!active
  • QTabBar::tab:middle:!selected
  • QTabBar::tab:last:!active
  • QTabBar::tab:last:!selected
  • QTabBar[shape="0"]::tab:!active
  • QTabBar[shape="0"]::tab:!selected
  • QTabBar[shape="1"]::tab:!active
  • QTabBar[shape="1"]::tab:!selected
  • QTabBar[shape="2"]::tab:!active
  • QTabBar[shape="2"]::tab:!selected

Code: Select all

QTabBar::tab { background-color: yellow; }
QTabBar::tab:!active { background-color: fuchsia; }
QTabBar::tab:!selected { background-color: red; }
QTabBar[shape="0"]::tab:!active { background-color: lime; }
QTabBar[shape="0"]::tab:!selected { background-color: green; }
QTabBar[shape="2"]::tab:!active { background-color: aqua; }
QTabBar[shape="2"]::tab:!selected { background-color: blue; }
User avatar
JohnFredC
XnThusiast
Posts: 2010
Joined: Wed Mar 17, 2004 8:33 pm
Location: Sarasota Florida

Re: Qt Stylesheet Snippet Repository

Post by JohnFredC »

Unfortunately, none of those affect the line arrowed in the following image:

Image

We need a reference to which controls map to which QT widgets. There are some peculiar relationships that I have discovered and will try to document in this thread when there is time (Christmas is coming!)... 8)

If anyone is interested, here is a link to a zip of my QSS files ("beta") for MP (as of 12/11/10):

JohnFredC Theme for MP

And a full-size preview (obviously a "work in progress"):

Image

There are lots of problems with my theme, particularly in the dialogs and the presentation of the status bar, so it will not be for everyone (or anyone, perhaps), but I will try to keep the link updated.

Note: Since in MP 0.3x, themes are defined separately from thumb colors (AND preview background colors AND view background colors, etc), you will ALSO need to modify those settings to make your MP look like mine!
Last edited by JohnFredC on Sun Dec 12, 2010 1:46 am, edited 1 time in total.
John
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq »

JohnFredC wrote:Unfortunately, none of those affect the line arrowed in the following image:
I can't find it, and it's driving me nuts :evil:

Code: Select all

QDockWidget QWidget { border: 1px solid blue; }
QTabWidget::pane { border-top: 3px solid aqua; }
QTabBar { border: 2px solid red; }
QFrame { border: 1px solid lime; }
JohnFredC wrote:We need a reference to which controls map to which QT widgets. There are some peculiar relationships that I have discovered and will try to document in this thread when there is time (Christmas is coming!)... 8)
Like this?
JohnFredC wrote:If anyone is interested, here is a link to a zip of my QSS files ("beta") for MP (as of 12/11/10):

JohnFredC Theme for MP

And a full-size preview (obviously a "work in progress"):

Image
Nice :-)

FYI: The FTP download requires authetification, but I was able to access the file throught HTTP.
User avatar
JohnFredC
XnThusiast
Posts: 2010
Joined: Wed Mar 17, 2004 8:33 pm
Location: Sarasota Florida

Re: Qt Stylesheet Snippet Repository

Post by JohnFredC »

Thanks, I changed the link.
John
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq »

User avatar
xnview
Author of XnView
Posts: 44761
Joined: Mon Oct 13, 2003 7:31 am
Location: France

Re: Qt Stylesheet Snippet Repository

Post by xnview »

XnTriq wrote:Qt Blog: Cleaning up styles in Qt5 and adding Fusion (30/Oct/2012)
Great :)
Pierre.
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq »

User avatar
m.Th.
XnThusiast
Posts: 1676
Joined: Wed Aug 16, 2006 6:31 am

Re: Qt Stylesheet Snippet Repository

Post by m.Th. »

Ok, and now a blunt question:

Select an JPG/TIFF and press Ctrl+I. The IPTC dialog appears. How can I make the font from „Caption” field bigger using qtCSS?
m. Th.

- Dark Themed XnViewMP 1.7.1 64bit on Win11 x64 -
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq »

m.Th. wrote:How can I make the font from „Caption” field bigger using qtCSS?
So far, I haven't been able to narrow it down to a specific selector…

Code: Select all

QWidget {
color: lime;
font-size: 25px;
}

Code: Select all

QFrame {
color: lime;
font-size: 25px;
}

Code: Select all

QAbstractScrollArea {
color: lime;
font-size: 25px;
}
… but I'll keep digging.
User avatar
m.Th.
XnThusiast
Posts: 1676
Joined: Wed Aug 16, 2006 6:31 am

Re: Qt Stylesheet Snippet Repository

Post by m.Th. »

XnTriq wrote:
m.Th. wrote:How can I make the font from „Caption” field bigger using qtCSS?
So far, I haven't been able to narrow it down to a specific selector…

Code: Select all

QWidget {
color: lime;
font-size: 25px;
}

Code: Select all

QFrame {
color: lime;
font-size: 25px;
}

Code: Select all

QAbstractScrollArea {
color: lime;
font-size: 25px;
}
… but I'll keep digging.

Thanks a lot! Much better now! :)
m. Th.

- Dark Themed XnViewMP 1.7.1 64bit on Win11 x64 -
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq »

m.Th. wrote:Thanks a lot! Much better now! :)
None of the above (QWidget, QFrame, QAbstractScrollArea) can be used to increase the font size of the IPTC dialog without affecting other elements as well. :-|

I usually paste the additional QSS into the text field of the tab for style_sheet_win.qss (ViewThemeDark theme). Do you know of a different/better method, m.Th.?
User avatar
m.Th.
XnThusiast
Posts: 1676
Joined: Wed Aug 16, 2006 6:31 am

Re: Qt Stylesheet Snippet Repository

Post by m.Th. »

XnTriq wrote:
m.Th. wrote:Thanks a lot! Much better now! :)
None of the above (QWidget, QFrame, QAbstractScrollArea) can be used to increase the font size of the IPTC dialog without affecting other elements as well. :-|

I usually paste the additional QSS into the text field of the tab for style_sheet_win.qss (ViewThemeDark theme). Do you know of a different/better method, m.Th.?
Nope. :| I think that the additional QSS could be pasted directly in the first tab since is not a Windows only issue. Besides that, it would be nice to have this mechanism to all themes not only for the dark theme.
m. Th.

- Dark Themed XnViewMP 1.7.1 64bit on Win11 x64 -