Dark and Light FreeCAD stylesheets (v1.8a)

Info about new implemented features, classes, modules or APIs. Might get technical!
pablogil
Posts: 502
Joined: Wed Nov 26, 2014 3:19 pm
Location: Badajoz (Spain)
Contact:

Dark and Light FreeCAD stylesheets (v1.8a)

Postby pablogil » Thu Jun 18, 2015 8:47 am

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 3579 times

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

freecad_stylesheets-orange.png
freecad_stylesheets-orange.png (293.47 KiB) Viewed 3579 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
Site Admin
Posts: 11222
Joined: Thu Feb 19, 2009 10:32 am

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

Postby wmayer » Thu Jun 18, 2015 9:38 am

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
Posts: 502
Joined: Wed Nov 26, 2014 3:19 pm
Location: Badajoz (Spain)
Contact:

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

Postby pablogil » Thu Jun 18, 2015 9:52 am

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
Posts: 1433
Joined: Wed Sep 28, 2011 10:39 am
Location: Toulouse, France
Contact:

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

Postby rockn » Thu Jun 18, 2015 10:48 am

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 et tutoriels FreeCAD en Français, soutenez moi : https://www.tipeee.com/formations-freecad
pablogil
Posts: 502
Joined: Wed Nov 26, 2014 3:19 pm
Location: Badajoz (Spain)
Contact:

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

Postby pablogil » Thu Jun 18, 2015 10:56 am

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
Posts: 2356
Joined: Tue Nov 12, 2013 4:06 pm
Contact:

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

Postby microelly2 » Thu Jun 18, 2015 11:40 am

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
Posts: 502
Joined: Wed Nov 26, 2014 3:19 pm
Location: Badajoz (Spain)
Contact:

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

Postby pablogil » Thu Jun 18, 2015 4:34 pm

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
Posts: 4845
Joined: Mon Dec 12, 2011 4:45 pm

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

Postby triplus » Thu Jun 18, 2015 6:36 pm

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
Posts: 2356
Joined: Tue Nov 12, 2013 4:06 pm
Contact:

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

Postby microelly2 » Thu Jun 18, 2015 9:08 pm

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 3419 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
Site Admin
Posts: 11222
Joined: Thu Feb 19, 2009 10:32 am

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

Postby wmayer » Fri Jun 19, 2015 5:09 pm

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.