Hope UI font size can be resize by the user

Saola Animate version: 2.7.1.

OS: Win10 (64-bit).

Notes:

The font size of UI are so tiny (I need to use Win10 magnifier frequently).

Hope the UI font size can be resizable.

(no require to be as resizable as Blender, but please resizable by the user).

Thank you!

1 Like

Hi,

You can change the font style of almost all parts of the UI by editing the stylesheet in <installation_folder>\resources\styles\saola_dark.qss file.
For example

* {
  font-family: Roboto;
  font-size: 10px;
}

Regards

2 Likes

Please tell me what are the different functions between these two files:

  1. win_saola_dark.qss
  2. saola_dark.qss

Hi,

Some UI styles of Saola Animate are different between Windows and macOS.
saola_dark.qss contains common styles for all OSes.
win_saola_dark.qss contains specific styles for Windows.

As an user, you can make changes in either files.

Regards

1 Like

Q1) Where can I see the changes of win_saola_dark.qss ?
I don’t know the meaning of items inside the win_saola_dark.qss
such as
(1) #SLAboutUI QWidget,
(2) QMenu::item,
(3) SLGalleryMenu QLabel.

Q2) Where can I modify the UI font-size of “Recent Projects” listing ?
image

Thank you :smiley: !

Hi,

Styles that Saola UI uses are similar to CSS:

/* First, you can use * selector to set the universal style */
* {
  font-size: 12px;
}
/* Next, you can change the style for specific items */
/* Text in About dialog (Help > About) */
#SLAboutUI QWidget
{
  font-size: 15pt;
}
/* Text of items in main menus (File, Edit...), right-click menu */
QMenu::item
{
  font-size: 15pt;
}
/* Text of labels in custom menus such as preset shadow (but Saola doesn't use label in these menus yet) */
SLGalleryMenu QLabel
{
  font-size: 8pt;
}

Recent project list is a part of a HTML page, you can change its font size in resources\welcome\css\slwelcome.css: search for #recent-file-list li

Regards

3 Likes

Your instructions are clear and concise, it is really helpful :heart: !

Thank you very much :smiley: !

1 Like

Q1) Where can I see the results of QListView::item{ }
which is set by win_saola_dark.qss?
I don’t know where to see a ListView in Saola.

Q2) Where can I set the font-size (and padding)
of these 3 parts of Timeline below?


part-1. The current time of playhead (0:00:04.500)
part-2. I don’t know what is the name of it,
and I guess it is the QComboBox{ } setting of win_saola_dark.qss?
part-3. Properties or say attributes of a object in a Scene.

I find that Saola seems setup environment
with saola_dark.qss first then win_saola_dark.qss later,
so win_saola_dark.qss will dominate the results in Windows.

Thank you :blush: !

Hi,

Q1. QListView::item is for some dropdown lists, such as list of timelines in Timeline pane.
Q2. You can use SLTimeEditorWidget QSpinBox for part-1, SLTimelineScenePanel for part-2.
part-3 is not styleable in the current version.

Regards

1 Like

Thanks for your instructions :smiley: !

But I cannot find string ‘SLTimelineScenePanel’ in saola_dark.qss.

then I see some un-known syntax under the ‘Timeline class’:

Q1) What does the ‘#timeline_left_widget’ means?
Does it mean ‘disable’ this ‘timeline_left_widget’ setting block?

Q2) What does the ‘SLTimelineCaptionPanel:disabled’ means?
What will happend when the beginning of a setting block says:
SLTimelineCaptionPanel, SLTimelineCaptionPanel:disabled

Hi,

You don’t find SLTimelineScenePanel because it doesn’t require any specific style in the default stylesheet. You need to customize its style so you must add it to the stylesheet.

If you don’t know what a selector means, you can set an unusual style for it to check where it is in the UI. For example, you can set border: 20px solid red; for #timeline_left_widget to see that it’s the left margin of the timeline.

For stylesheet syntax, you can refer to these documents:
https://doc.qt.io/Qt-5/stylesheet-syntax.html
https://doc.qt.io/qt-5/stylesheet-reference.html

Regards

1 Like