Page 1 of 2

Qt Stylesheet Snippet Repository

Posted: Sun Nov 07, 2010 11:00 pm
by XnTriq

Re: Qt Stylesheet Snippet Repository

Posted: Sat Nov 20, 2010 11:30 pm
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 :|

Re: Qt Stylesheet Snippet Repository

Posted: Sat Dec 11, 2010 4:00 am
by XnTriq
Unfortunately I haven't found a cheat sheet for QSS.
Please keep in mind that Qt supports only a subset of CSS.

Re: Qt Stylesheet Snippet Repository

Posted: Sat Dec 11, 2010 5:45 am
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; }

Re: Qt Stylesheet Snippet Repository

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

Re: Qt Stylesheet Snippet Repository

Posted: Sun Dec 12, 2010 12:45 am
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.

Re: Qt Stylesheet Snippet Repository

Posted: Sun Dec 12, 2010 1:46 am
by JohnFredC
Thanks, I changed the link.

Re: Qt Stylesheet Snippet Repository

Posted: Sat Nov 24, 2012 3:45 am
by XnTriq

Re: Qt Stylesheet Snippet Repository

Posted: Mon Nov 26, 2012 8:52 am
by xnview
XnTriq wrote:Qt Blog: Cleaning up styles in Qt5 and adding Fusion (30/Oct/2012)
Great :)

Re: Qt Stylesheet Snippet Repository

Posted: Sat Jan 14, 2017 4:15 am
by XnTriq

Re: Qt Stylesheet Snippet Repository

Posted: Thu Jan 26, 2017 7:17 am
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?

Re: Qt Stylesheet Snippet Repository

Posted: Fri Jan 27, 2017 8:30 pm
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.

Re: Qt Stylesheet Snippet Repository

Posted: Sat Jan 28, 2017 8:18 am
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! :)

Re: Qt Stylesheet Snippet Repository

Posted: Sat Jan 28, 2017 10:30 am
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.?

Re: Qt Stylesheet Snippet Repository

Posted: Sat Jan 28, 2017 3:49 pm
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.