Qt Stylesheet Snippet Repository

Ideas for improvements and requests for new features in XnView MP

Moderators: XnTriq, xnview

Post Reply

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

Re: Qt Stylesheet Snippet Repository

Post by XnTriq » Sat Nov 20, 2010 11:30 pm

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: 5364
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq » Sat Dec 11, 2010 4:00 am

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: 5364
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq » Sat Dec 11, 2010 5:45 am

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 » Sat Dec 11, 2010 2:47 pm

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: 5364
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Qt Stylesheet Snippet Repository

Post by XnTriq » Sun Dec 12, 2010 12:45 am

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 » Sun Dec 12, 2010 1:46 am

Thanks, I changed the link.
John

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

Re: Qt Stylesheet Snippet Repository

Post by XnTriq » Sat Nov 24, 2012 3:45 am


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

Re: Qt Stylesheet Snippet Repository

Post by xnview » Mon Nov 26, 2012 8:52 am

XnTriq wrote:Qt Blog: Cleaning up styles in Qt5 and adding Fusion (30/Oct/2012)
Great :)
Pierre.

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

Re: Qt Stylesheet Snippet Repository

Post by XnTriq » Sat Jan 14, 2017 4:15 am


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

Re: Qt Stylesheet Snippet Repository

Post by m.Th. » Thu Jan 26, 2017 7:17 am

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.

The Ascetic Experience - The best photos and texts from Holy Mountain (Athos)

- Dark Themed XnViewMP 0.90 64bit & XnView 2.00 x64 on Win7 x64 -

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

Re: Qt Stylesheet Snippet Repository

Post by XnTriq » Fri Jan 27, 2017 8:30 pm

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: 1522
Joined: Wed Aug 16, 2006 6:31 am
Contact:

Re: Qt Stylesheet Snippet Repository

Post by m.Th. » Sat Jan 28, 2017 8:18 am

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.

The Ascetic Experience - The best photos and texts from Holy Mountain (Athos)

- Dark Themed XnViewMP 0.90 64bit & XnView 2.00 x64 on Win7 x64 -

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

Re: Qt Stylesheet Snippet Repository

Post by XnTriq » Sat Jan 28, 2017 10:30 am

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: 1522
Joined: Wed Aug 16, 2006 6:31 am
Contact:

Re: Qt Stylesheet Snippet Repository

Post by m.Th. » Sat Jan 28, 2017 3:49 pm

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.

The Ascetic Experience - The best photos and texts from Holy Mountain (Athos)

- Dark Themed XnViewMP 0.90 64bit & XnView 2.00 x64 on Win7 x64 -

Post Reply