Dark and Light FreeCAD stylesheets (v1.8a)

[pablogil]

Hello,

I would like to share with you some QT stylesheets specially "baked" for use in FreeCAD. I have been developing them in the last two weeks without prior knowledge of QT styling, it was kind of a luck that QT is pretty similar to CSS which I master from sometime ago. Anyway it was hard to figure out the subcontrols, rules and specific stuff of QT so don't blame on me if it's not fully depurated. I have uploaded all of them to Github so that you have the opportunity to fork, pull requests or whatever.
They are 2 base stylesheets, Dark and Light, with 3 variations each (green, blue and orange). It's really easy to change colors if you know a little bit of CSS.

freecad_stylesheets-blue.png (291.37 KiB) Viewed 7346 times

freecad_stylesheets-green.png (293.34 KiB) Viewed 7346 times

freecad_stylesheets-orange.png (293.47 KiB) Viewed 7346 times

I have tested them on OSX, Windows and Ubuntu so they should work on any OS, anyway, let me know if you find glitches.
Some comments about FreeCAD and theming:

• Images inside stylesheets are forced to use full paths in order to work, that means all these .qss files should be edited per user and computer. I hope FreeCAD developers make a workaround about it.
• the "Task panel" is not stylable right now (FreeCAD 0.15) but, thanks to the help of wmayer, it will be on FreeCAD 0.16. You can test it with wmayer-qsint development branch and with these stylesheets. Bugs and more info here
• in app icons-buttons are designed in svg but are not stylable, that is, it's not possible to change them... I hope it also changes in the near future
• I only found a bug when styling: in OSX, height and width in "QMainWindow::separator:horizontal" and "QMainWindow::separator:vertical" produces a weird line when moving the separators. I think it's a problem of FreeCAD and not from the stylesheets.

Download (install instructions)

FreeCAD Dark and Light stylesheets v1.8a

• correctly linked images

Previous versions
FreeCAD Dark and Light stylesheets v1.8

• styles for Expressions
• minor fixes and improvements

FreeCAD Dark and Light stylesheets v1.7a

• Hotfix: solves a "development blue background" inside Task View

FreeCAD Dark and Light stylesheets v1.7

• lots of fixes
• now more stable between OSs
• even more goodlooking =)

FreeCAD Dark and Light stylesheets v1.6

• new background color for lists
• Up/Down button of Spinboxes are moved both to the right in order to improve usability
• fixed lots of styles that didn't work or produced odd effects
• cleaned a bit styles commented and not in use anymore

FreeCAD Dark and Light stylesheets v1.5

• relative paths for stylesheet images now work (only FreeCAD 0.16 dev)
• fold/unfold images inside Task Panel header now works (only FreeCAD 0.16 dev)
• added "foreground color"
• placed an area with experimental styles

FreeCAD Dark and Light stylesheets v1.4

• a lot of fixes and improvements
• If you use wmayer-qsint branch the "Task Panel" will also be styled

FreeCAD Dark and Light stylesheets v1.3

• improved "snap buttons" alignment inside toolbar

FreeCAD Dark and Light stylesheets v1.2

• improved buttons inside toolbar and alignments

FreeCAD Dark and Light stylesheets v1.1

Source
GitHub

I hope you like them and feel like helping improve FreeCAD look and feel.
Cheers

[wmayer]

Great work. Nice to see that somebody works on this as there are really not so many stylesheets out there.

Images inside stylesheets are forced to use full paths in order to work, that means all these .qss files should be edited per user and computer.

Can you give an example?

the "Task panel" is not stylable right now (stable FreeCAD 0.15), I hope it changes in the near future

The task panel classes is 3rd party code and unfortunately the widget classes override the paintEvent() method in a way that makes it incompatible to stylesheets.

in app icons-buttons are designed in svg but are not stylable, that is, it's not possible to change them... I hope it also changes in the near future

Do you mean this issue #2053?

I only found a bug when styling: in OSX, height and width in "QMainWindow::separator:horizontal" and "QMainWindow::separator:vertical" produces a weird line when moving the separators. I think it's a problem of FreeCAD and not from the stylesheets.

If this only happens on OSX it's rather a bug in Qt then.

[pablogil]

Hi wmayer,

Images inside stylesheets are forced to use full paths in order to work, that means all these .qss files should be edited per user and computer.

Can you give an example?

If you try relative paths they just don't work (I guess relative paths should "start" from the .qss file itself), a simple example (none of them work):

• background-image: url(/images/background_freecad.png);
• background-image: url(images/background_freecad.png);
• background-image: url(:/images/background_freecad.png);
• background-image: url(./images/background_freecad.png);

Any other idea?...

the "Task panel" is not stylable right now (stable FreeCAD 0.15), I hope it changes in the near future

The task panel classes is 3rd party code and unfortunately the widget classes override the paintEvent() method in a way that makes it incompatible to stylesheets.

I suggested adding to this 3rd party code IDs or classes so that it's possible to reach them with stylesheets... would it be possible?

in app icons-buttons are designed in svg but are not stylable, that is, it's not possible to change them... I hope it also changes in the near future

Do you mean this issue #2053?

Yes, I'm referring to that

I only found a bug when styling: in OSX, height and width in "QMainWindow::separator:horizontal" and "QMainWindow::separator:vertical" produces a weird line when moving the separators. I think it's a problem of FreeCAD and not from the stylesheets.

If this only happens on OSX it's rather a bug in Qt then.

I could be... I'm not expert on coding or QT so I just pointed it out: if I comment "width: 4px;" it works properly but do not shows the background because it has not width enough to see it...

[rockn]

Nice work ! You solve a recurrent problem with the Draft Snap tool button, now they look more easy to distinguish active/deactive. I will test that !

[pablogil]

Nice work ! You solve a recurrent problem with the Draft Snap tool button, now they look more easy to distinguish active/deactive. I will test that !

Yes, it took some time to figure it out but now they are partially independent from the rest of tool buttons
=)

[microelly2]

nice work and good to know that there is somebody to ask qt style questions ,
i will integrate them to my pluginloader
and hope to get them installable with a macro dialog.

[pablogil]

nice work and good to know that there is somebody to ask qt style questions ,
i will integrate them to my pluginloader
and hope to get them installable with a macro dialog.

Sure, count on it
=)

[triplus]

Looks good. Maybe in the future as there is an option for this available in the preferences one or two alternative style sheets could be available in FreeCAD by default.

[microelly2]

styles is integrated to pluginmanager (first linux only).

Usage:
1 update package pluginloader
2 restart pluginloader
3 install package "styles"

bn_686.png (22.17 KiB) Viewed 7186 times

4 Menu
Preferences -> General -> Stylesheet ...

5 thats it - no further patch required.


if you will add further styles I have to update the config

Code: Select all

  styles: &styles
    name: FreeCAD styles
    status: noignore
    web: http://forum.freecadweb.org/viewtopic.php?f=9&t=11419
    man: https://github.com/pgilfernandez/FreeCAD_stylesheets/blob/master/README.md
    description: QT themes (stylesheet) specially developed for FreeCAD
    author: pgilfernandez
    source: https://github.com/pgilfernandez/FreeCAD_stylesheets/archive/master.zip
    method: zip
    sourcedir: FreeCAD_stylesheets-master
    destdir: UserAppData/Gui/Stylesheets
    replace:
       files: 
         - dark-green.qss
         - dark-blue.qss
         - dark-orange.qss
         - light-green.qss
         - light-blue.qss
         - light-orange.qss
       pattern:  \[PATH_TO_IMAGES\] 
       data:  UserAppData/Gui/Stylesheets/images
 

[wmayer]

If you try relative paths they just don't work (I guess relative paths should "start" from the .qss file itself), a simple example (none of them work):

Relative paths cannot work because the Qt API doesn't accept a file path but only the content of this file. So, the images are only considered relative to the cwd. But if you e.g. change the cwd with

Code: Select all

from PySide import QtCore
QtCore.QDir.setCurrent(App.getUserAppDataDir() + "Gui/Stylesheets")

and then load the style sheet it works.