Jens
Uncategorized
Qt
Labs
Styles
Posted by Jens
 in Uncategorized, Qt, Labs, Styles
 on Tuesday, May 13, 2008 @ 20:28

textedit with gtkstyle

Now that 4.4 is out, I finally found the time to kick off some new development and one of my pet projects these days is QGtkStyle. We already have QCleanlooks, icon themes, standard shortcuts and dialog buttons to integrate with GNOME, but to achieve true perfection we need to use the Gtk theme engine directly just like we do on Mac and Windows. QGtkStyle does exactly this, and in addition extends and surpasses QCleanlooks in a lot of other areas as well. All group boxes are now flat style to blend better with GNOME dialogs. Icon theme support has improved, scrollbar buttons are disabled at edges and item view branches now support hover.

spreadsheet example

The style is already available right now as a Qt 4.4 plugin on Labs and given that you can accept the normal disclaimers about using unreleased and experimental code, you can start playing with it immediately.

This is how the Arora browser looks:

clearlooks style

All the above shots were taken using the “Clearlooks” engine. Here are a few alternatives:

Ubuntu Human:
mediaplayer

Mythbuntu:
mediaplayer

And of course the unforgettable Raleigh engine:
mediaplayer

kamlie
Styles
Posted by kamlie
 in Styles
 on Friday, January 11, 2008 @ 14:52

“You look at your stylesheet in awe, amazed at your own artistic power. You have just styled your widget to perfection, and it is so beautiful one could cry. Now, just to finish off with that one-pixel adjustment to the left, and…. what!? Why does it suddenly look different?”

I am sure many of you have been there when stylesheets do unexpected things. This stems from the fact that the styles were not originally meant to support stylesheets and all the adjustment capabilities that come with them. So whenever a stylesheet tries to do something that the underlying style cannot offer, it falls back onto a different style.

For this reason, we are currently aiming at trying to make stylesheets a little more consistent and predictable, and there are several approaches that can be followed. I hereby invite the readers to post some comments about what they think is important with stylesheets.

You are free to write whatever you feel, but here are some guiding questions:

  • What is your typical use of stylesheets? Giving widgets a brand new look, or just changing a color here and there?
  • Is your program used on more than one platform?
girish
Qt
Qtopia
KDE
Styles
Posted by girish
 in Qt, Qtopia, KDE, Styles
 on Tuesday, November 27, 2007 @ 16:37

This feels great. This post is an eight year old dream come true - I have always wanted to write an article titled “… for fun and profit” ever since I read the amazing phrack article :).

Qt Style Sheets makes it possible to style Qt widgets, we all know that. But, what if some user loved this Qt application and would love it even more, if only it had red push buttons (some users have strange fetishes)?

Qt 4.3’s well kept secret
In Qt 4.3, users can customize the style of any application without touching or recompiling the code. All Qt applications can take an external stylesheet using the -stylesheet command line switch. So, create a file called mystyle.qss containing “QPushButton { background: red; }”. Now start, any Qt applications as “qtapp -stylesheet mystyle.qss”. Sweeeet.

Theming Qt
So one can style widgets, but what if one wants to move things around. What if one wants the application to have a completely different layout. We have received many requests for supporting layouting in Qt Style Sheets, but did you know theming Qt applications is already possible?

So let’s see - we need a mechanism for the user to specify the layout. We can probably define our own XML format but it turns out Qt already has one and you use it all the time - .ui files. .ui file is nothing but the user interface described in XML. All we need is a mechanism to load these ui files on the fly.

Enter our hero QUiLoader. QUiLoader reads a ui file and gives you back a QWidget pointer. Ui files can be edited using Qt Designer, so you don’t need to create your own layout tool. In addition, QUiLoader::setWorkingDirectory allows creating ui files with external resources. That said, the main disadvantage is that theming this way requires you to modify your application.

I cooked up a media player that implements the above idea. You can add new themes in the themes/ folder. In addition to a layout(ui) file, the theme can also specify a style sheet. MediaPlayer can load these new themes with no recompilation.

Here’s the Classic theme that has the media controls on the bottom.
Classic Media Player

Here’s the Modern theme that has the media controls on the side.
Modern Media Player

To create a new theme,
* Unpack the source (with git history)
* qmake && make
* cp -R themes/classic themes/mytheme. At this point, mytheme and classic are identical.
* Edit file in mytheme/mediaplayer.ui using Designer
* Edit style sheet in mytheme/mediaplayer.qss using text editor
* Edit icons (play/stop/pause) under mytheme/.
* Notice how media player can support new layouts and styles with no recompilation at all.

Enjoy!

P.S: This is really a guest blog since I don’t work for Trolltech anymore :-) Please contact me at ramakrishnan dot girish at gmail, if you have any questions.

girish
Qt
KDE
Itemviews
Styles
Posted by girish
 in Qt, KDE, Itemviews, Styles
 on Thursday, November 01, 2007 @ 11:27

It all started as a small feature request - Adding style sheet support for Item views. I quickly found out that our default delegate, QItemDelegate, doesn’t use QStyle the way it is supposed to. Jens had faced the same problem when trying to provide native look and feel for Vista and ended up writing his own delegate. This is quite a limitation because currently authors of custom QStyles can customize the look of everything in Qt except item views.

So was born QStyledItemDelegate - The default delegate for Item views starting 4.4. To let that sink in - all our views now delegate painting to QStyledItemDelegate instead of QItemDelegate. QStyledItemDelegate prompty plays its part by delegating everything to QStyle :-) The cool thing is that this delegate uses the QStyle to determine the sizeHint, the layout of the text, indicators and icon. And of course, it paints everything through QStyle. Complete control to QStyle.

Jens has already incorporated this new feature into QWindowsVistaStyle. So, by default, your views will look all fancy in 4.4 like below:

vistatree2.png

We are unsure about how selection in table view must be handled. We are open to suggestions:

Chart example in vista style

On other platforms, they should exactly like before. If you had written your own delegate using QItemDelegate, it is completely unaffected by this change. If having to write a custom QStyle or a custom delegate sounds daunting, just use style sheets. Try something like this,

QTreeView::item {
    border: 1px solid #d9d9d9;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

QTreeView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
    border: 1px solid #bfcde4;
}

QTreeView::item:selected {
    border: 1px solid #567dbc;
}

QTreeView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
}

QTreeView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
}

Here’s how it looks:

stylesheet-treeview.png

See Customizing QTreeView, Customizing QListView for more information.

We merged the new delegate into our main branch last week, so if use the latest snapshots, you already have it. If you have any specific requirements to styling of tree widgets, list views and tables in mind and are wondering if it is possible now using the new delegate, please leave behind a note!

Jens
Qt
Styles
DotNet
Posted by Jens
 in Qt, Styles, DotNet
 on Friday, July 06, 2007 @ 17:18

The style now comes in two flavors: Standard, and Office. The standard style is the one seen previously. The new Office style is presented here:

office style

I also have some good news for commercial users waiting for this. The style will be renamed QtDotNetStyle and should be released as a dual licensed Qt Solution, hopefully next week.

Jens
Uncategorized
Qt
Styles
Posted by Jens
 in Uncategorized, Qt, Styles
 on Friday, June 08, 2007 @ 15:51

Seeing all the interest in the DotNet style makes it fairly obvious that you would like to have sexy tool bars with Qt. Today I implemented another popular style for tool bars on Windows: the Explorer style. The difference might not be all that obvious at first sight, but you will see a nice gradient shading across the tool bar and menu areas if you look closer. It is also entirely theme dependent.

Here is how it looks on XP:
explorer style

And here is how it looks on Vista:
explorer style

Get the files here : explorerstyle.zip

To try it out simply compile the style and run your application with “-style explorer” as command line arguments.

A few notes :
- left and right toolbar areas do not have gradients as the shading looked a bit weird in those areas
- It requires Qt 4.3.0 and will only work on Windows
- You can use it on both open source and commercial apps at your own risk

Enjoy ;)

Jens
Uncategorized
Qt
Styles
DotNet
Posted by Jens
 in Uncategorized, Qt, Styles, DotNet
 on Monday, June 04, 2007 @ 15:05

dot net style

Some of you might remember my blog post about this back in October. Now that 4.3.0 is out, I finally had time to clean up the sources and release something usable on labs.

http://labs.trolltech.com/page/Projects/Styles/DotNet

The style is a close approximation to the appearance of Visual Studio 2005, Office 2003 as well as the .NET based application framework. It will give your application a modern gradient appearance for tool bars and menus while retaining the native look and feel for other widgets.

A solution for commercial customers will probably be made available in the near future based on feedback I get on this.

Jens
Uncategorized
Qt
Styles
DotNet
Posted by Jens
 in Uncategorized, Qt, Styles, DotNet
 on Friday, October 06, 2006 @ 14:47

Not too long ago, someone asked why we did not support dot net style in Qt. Although the name is a bit misleading, it means the look and feel that apps such as Office and Outlook currently use. These applications are like Qt based on the windows style engine, but for some of the components that the theme does not define they use a more fashionable gradient appearance.

To prove that Qt can actually support these styles, I wrote a plugin style for Qt 4.2. If there is sufficient interest we will of course consider making it available as a solution or even as a part of a future version of Qt.

Here is some eye candy:

Alternate style

And this is how it looks with the blue palette:

Alternate style 2