Status bar font size and source window frame colour

Viewf1nder

New Member
First post so I hope this is the correct location. I did look in the Themes category but it says insufficient rights to post there.

I'm using the default Dark theme but there are some areas I'd like to be black despite it already being a darkish grey. I don't need a whole new complete theme, I'm using the default Dark theme and as per title, the status bar where the recording time, cpu usage and fps is shown is tiny. I've done a lot of searching here and the nearest solution I found was editing font-size under the QWidget section of the .qss file.

That does increase the status bar font but it also increases the font for all the other text based elements of GUI such as menu bars, sources and buttons.
As a result, the preview window is smaller because of the larger text in GUI. I've attached a snapshot of the areas in question.

I wonder is there a undocumented section of .qss that can only affect the status bar font and not all the buttons?

With regards to the GUI background colour of the upper preview screen in Dark theme, I've tried changing any 0x4C4C4C or rgb(76,76,76) values to 0,0,0 for black background but they only change other areas of the GUI but never the background of video previous frame. Is it a bitmap or an .svg if not controlled by an .qss file.

Tried searching for tutorials on themes but mostly about installing and changing, not modifying. Is it a trade secret that is otherwise paid for to know which value sets the status bar font or background colour of source frame?

Thank you for any pointers.
 

Attachments

  • OBS GUI for forum.png
    OBS GUI for forum.png
    46.1 KB · Views: 95

Suslik V

Active Member
To change the elements of the QStatusBar you need to change child object of it - QLabel. This can be done like this, for example (add the code to the end of your "Dark.qss" file to make fonts bold and large):
CSS:
QStatusBar::item QLabel {
    font-size: 18px;
    font-weight: bold;
}

The preview of OBS has own setting entry in the .qss file (OBSQTDisplay) - look carefully and you will find it! Or you can add next code to the end of the "Dark.qss" file to make the preview background dark blue, for example:
CSS:
OBSQTDisplay {
    qproperty-displayBackgroundColor: rgb(0, 0, 76);
}
 

Viewf1nder

New Member
@Suslik V Thank you so much, that worked!

I did see the OBSQTDisplay section the other day when I did a search for the number 76 value anywhere. I did also change the RGB values that day but it didn't work. Now I know why.

Initially, to be safe, I first made a copy of the original qproperty line and (thought I had!) commented it out with /* and made the values of the new qproperty line rgb(0,0,0). It didn't work because I didn't correctly end the /* comment with */. As a result, OBS ignored my 0,0,0 line and still used the 76,76,76 even though the new 0,0,0 line was above and before the /*. I can only guess the qss is processed sequentially.

When I saw your reply, I just directly changed the original qproperty value to 0,0,0 (without copying or commenting the old line) and it worked.
Also if I properly end the comment correctly with */ it also works.

The QLabel also worked too, thank you! I'm now able to change the universal QWidget font size back down to normal and only have a large clear to see status bar font! Previously I was simply trying to add font-size: lines trial and error into sections and seeing if it applied.

Are there any reference docs / websites to learn more about what child objects are available? A quick search took me to Qt, CSS, C#, C## and Python. For someone new to qss and wanted to look up that QStatusBar or other elements have child objects, is there a reference guide?
 
Top