Dark and Light FreeCAD stylesheets (v1.8a)

Info about new community or project announcements, implemented features, classes, modules or APIs. Might get technical!
PLEASE DO NOT POST HELP REQUESTS OR OTHER DISCUSSIONS HERE!
Forum rules
Be nice to others! Respect the FreeCAD code of conduct!
Post Reply
User avatar
pablogil
Posts: 881
Joined: Wed Nov 26, 2014 3:19 pm
Location: Badajoz (Spain)
Contact:

Dark and Light FreeCAD stylesheets (v1.8a)

Post by 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
freecad_stylesheets-blue.png (291.37 KiB) Viewed 18255 times
freecad_stylesheets-green.png
freecad_stylesheets-green.png (293.34 KiB) Viewed 18255 times
freecad_stylesheets-orange.png
freecad_stylesheets-orange.png (293.47 KiB) Viewed 18255 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
Last edited by pablogil on Sun Jan 31, 2016 4:07 pm, edited 15 times in total.
Dark and Light stylesheets v2.0 to theme your FreeCAD UI, more information here
wmayer
Founder
Posts: 20243
Joined: Thu Feb 19, 2009 10:32 am
Contact:

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by 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.
User avatar
pablogil
Posts: 881
Joined: Wed Nov 26, 2014 3:19 pm
Location: Badajoz (Spain)
Contact:

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by 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...
Dark and Light stylesheets v2.0 to theme your FreeCAD UI, more information here
User avatar
rockn
Veteran
Posts: 1791
Joined: Wed Sep 28, 2011 10:39 am
Location: Toulouse, France
Contact:

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by 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 !
Formations - Assistance - Développement : https://freecad-france.com
User avatar
pablogil
Posts: 881
Joined: Wed Nov 26, 2014 3:19 pm
Location: Badajoz (Spain)
Contact:

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by pablogil »

rockn wrote: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
=)
Dark and Light stylesheets v2.0 to theme your FreeCAD UI, more information here
User avatar
microelly2
Veteran
Posts: 4688
Joined: Tue Nov 12, 2013 4:06 pm
Contact:

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by 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.
User avatar
pablogil
Posts: 881
Joined: Wed Nov 26, 2014 3:19 pm
Location: Badajoz (Spain)
Contact:

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by pablogil »

microelly2 wrote: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
=)
Dark and Light stylesheets v2.0 to theme your FreeCAD UI, more information here
triplus
Veteran
Posts: 9471
Joined: Mon Dec 12, 2011 4:45 pm

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by 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.
User avatar
microelly2
Veteran
Posts: 4688
Joined: Tue Nov 12, 2013 4:06 pm
Contact:

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by microelly2 »

styles is integrated to pluginmanager (first linux only).

Usage:
1 update package pluginloader
2 restart pluginloader
3 install package "styles"
bn_686.png
bn_686.png (22.17 KiB) Viewed 18094 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
Founder
Posts: 20243
Joined: Thu Feb 19, 2009 10:32 am
Contact:

Re: Dark and Light FreeCAD stylesheets (v1.1)

Post by 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.
Post Reply