- Is it possible to make a GTK3 theme that uses multiple theme engines like GTK2 and how (ex: Adwaita engine for some widgets and Solidity engine for the others)?- Is there any application like firebug Mozilla extention but for GTK3 theming? It will be cool to be able to hover the mouse over a widget and so get its label or its identifiant to use it in CSS code (ex : on mouse over the reduced window in the gnome-panel -> the app show : tasklist-button).

It will be cool to be able to hover the mouse over a widget and so get its label or its identifiant to use it in CSS code

No there's nothing that automated that I'm aware of, either for your own apps or a whole theme. Perhaps that could be a feature in future versions of Glade or a whole integrated CSS styler: http://glade.gnome.org/But it's fairly simply to figure out most CSS selectors. I do wish the developers would publish a complete list. There are some major differences in the CSS selectors and properties for styling your own apps and the one's used for styling a whole theme.

Here's and example of styling a GtkTextView using using CSS in GTK3. This changes the font, font size, font color, cursor color and background color. I've shown three images above. The one to the left is with added spacing using the following functions.gtk_text_view_set_border_window_size (GTK_TEXT_VIEW(tview), GTK_TEXT_WINDOW_TOP, 15);gtk_text_view_set_border_window_size (GTK_TEXT_VIEW(tview), GTK_TEXT_WINDOW_BOTTOM, 15);gtk_text_view_set_border_window_size (GTK_TEXT_VIEW(tview), GTK_TEXT_WINDOW_LEFT, 15);gtk_text_view_set_border_window_size (GTK_TEXT_VIEW(tview), GTK_TEXT_WINDOW_RIGHT, 15);

The middle image is with the above functions and some of the text selected just to show how I've changed the selection colors as well. The image to the left is without all the gtk_text_view_set_border_window_size() to show the difference it makes.

Drawing with Cairo using GTK3 is significantly different than with GTK2.x. The GDK drawing API has been removed. So most of the tutorials on the net will not work with GTK3.

There is an example for using GTK3x with Cairo in the official information, however the example allows you to draw on the screen with the mouse and has quite a bit more code than is necessary to demonstrate the basics. The following is a tutorial showing basic drawing without the extra code and a bit more explanation.

ColorsCairo colors are in RGB or RGBA percentages. For obtaining color values in percentages there are free web sites such as this one: http://www.december.com/html/spec/colorcodes.htmlBut I recommend using the drawing program Inkscape. It works on Linux, Mac, Windows and it's free. I'll give some very quick directions for using Inkscape to create a color swatch.1. Download and install: http://inkscape.org/download/ (available from synaptic package manager in Ubuntu Linux)2. View->Zoom In OR "plus and minus key" OR Ctrl + mouse wheel 3. The left side of the screen contains the toolbox, click the rectangle tool OR press F4 (If the tool box isn't visible go to View->Show/Hide and check "Toolbox")4. Click and hold the mouse button then drag out a rectangle. Release the mouse when done. 5. Object->Fill and Stroke OR Shift+Ctrl+F6. Click the "Wheel" tab and select a color.7. Click the "RGB" tab to see the RGB and RGBA values. (The RGBA values in hexadecimal are also shown in the lower right)

Stroke and PathsA path is an infinitely narrow region. It's just for the program to keep track of the area that's going to have color added to it. That area is called the stroke. This is the same in graphics drawing programs such as Adobe Illustrator, Inkscape ect.The stroke is the area along the path where you will actually see color (unless you've using a completely translucent "see-through color"). The stroke is centered on the path. So a 6 pixel wide stroke will have 3 pixels on one side of the path and 3 pixels on the other side of the path.

Code NotesSay you want a rectangle that's 100 pixels tall by 100 pixels wide to be placed in the upper left of a window without any gap between the edges of the rectangle and the window. To do this need to account for the width of the stroke used for the rectangle. That's why in the line: cairo_set_line_width(cr,6); The 6 is the stroke width and in the line: cairo_rectangle (cr, 3, 3, 100, 100); The 3,3 is the stroke width divided by 2. This is to get the rectangle to begin at the coordinates 0,0 and not have any part of the rectangle be off the screen. A couple of shapes are also shown in the example: A rectangle, circle and a line. All in different colors.

Here's an example of styling a calendar using gtk3 with CSS. A GtkCalendar is made up of several regions. In order to style them you need to know their names and locations. Below I've shown two pictures. The left image is the application while running. To the right are the various regions followed by the CSS property used on those regions and finally the corresponding color.

This is an extension of the first Cairo drawing example. Here I've made the drawing area scrollable; added two buttons and made the scrollbar wider. Wider scroll bars can be useful for users with vision disabilities or when creating a user interface for a computer with a small touchscreen such as a PhoenixA20, OLinuXino or IGEP. (See references at bottom) I've used internal CSS for this example to keep it easier to follow and colored the different areas brightly so you can tell what CSS goes with what area. I've also listed all the pointers to the widgets individually in a hierarchy to help you better understand the packing arrangement.

The upper row in the grid contains the GtkDrawingArea which is packed into a GtkViewPort. The GtkViewPort is packed into a GtkScrolledWindow. Then the GtkScrolledWindow is packed into the upper row (row 0) of the GtkGrid.The bottom row of the grid contains the two buttons. The buttons are first packed into a GtkButtonBox using gtk_button_box_new with it's orientation set to GTK_ORIENTATION_HORIZONTAL.gtk_hbutton_box_new along with gtk_vbutton_box_new have been phased out since gtk version 3.2 and should not be used in newly-written code.http://developer.gnome.org/gtk3/stable/GtkHButtonBox.htmlThe GtkButtonBox is packed into the bottom row (row 1) of the GtkGrid. Added space above and below the GtkButtonBox is provided by the following functions:gtk_widget_set_margin_bottom() gtk_widget_set_margin_top()

Quote:

GtkGrid doesn't have any custom child properties to specify per-child padding; instead you can use the "margin" property. You can also set different padding on each side with the "margin-left", "margin-right", "margin-top" and "margin-bottom" properties.http://developer.gnome.org/gtk3/stable/ch28s03.html

Finally the GtkGrid with all of the other widgets inside it, is packed into the GtkWindow.

GtkStatusIcon is a type of icon that's displayed in the area of the desktop called the "system tray" in Windows or "Panel" in Linux.

Before starting this tutorial it's very helpful if you already know how to create a menu. I would start with the tutorial at Zetcode listed in the references section at the bottom of this tutorial. There are also examples in the gtk source code, menus.c in the "gtk-demo" folder and testmenubars.c in the "tests" folder.

The "system tray" is normally used for transient icons (A software object with a short and limited lifetime which is not saved for later reuse.) It indicates some special state. For example, a system tray icon might appear to tell the user that they have new mail, or have an incoming instant message. Desktop video recording applications such as Gtk-RecordMyDesktop and RecordItNow for Ubuntu use a status icon. The basic idea is that creating an icon in the notification area is less annoying than popping up a dialog.

The icon can have a tooltip. A tooltip is when a user hovers the mouse pointer over an item, without clicking it, and small box with information about that item being hovered over appears. The user can interact with it by activating it or popping up a context menu. Sometimes clicking on a status icon will show a pop-up menu and other times you might get a larger window attached to it like the calendar in Ubuntu. Other times it might launch a seperate detached window with more options.

A GtkStatusIcon is not a GtkWidget, it sits above GtkWidget in the object hierarchy. It's just a GObject. It's object hierarchy is:

GObject +----GtkStatusIcon

Because of it's hierarchy, creating a GtkStatusIcon is a bit different than working with other widgets. It doesn't get packed into a container widget or even a main window. Unlike a menu, there's no menu bar.

Here we'll create a GtkStatusIcon that creates a pop-up menu then later use the CSS feature in gtk3 to style it.Example 1 is a minimum working example. It shows the icon in the "system tray". When you left click on it, it closes. No menu is displayed in this example.

In example 2 we'll add a callback function. This callback function will create a popup menu with two menu items when the user right clicks on the status icon. Add the following code between #include <gtk/gtk.h> and int main(int argc, char *argv[]) and save the file as: icon2.c

Add the two menu items to the menu:gtk_menu_shell_append(GTK_MENU_SHELL(menu), item1); gtk_menu_shell_append(GTK_MENU_SHELL(menu), item2);

Show the menu:gtk_widget_show_all(menu);

Normally a pop-up menu would be displayed where ever your mouse pointer is. gtk_menu_popup() will will make the pop-up menu be displayed right below the status icon. The second and third parameters are if you have a parent menu and parent menu item. Here we don't have either so we set them both to "NULL". The third parameter is used to tell the menu how to position itself compaired to the icon. The fifth parameter, button tells which mouse button was pressed. The last parameter, time is a timestamp. It tells what time the mouse button press event happened. All events have a timestamp that are used to keep track of the time that the event happened.

Connect the "activate" signal of the menu item "Quit" to the gtk_main_quit() function so the application will close when the user selects the "Quit" menu item.g_signal_connect(G_OBJECT(item2), "activate", G_CALLBACK(gtk_main_quit), NULL);

Now we need to style the hover states for the labels in the menu items: To only match a widget when it occurs inside some other widget, write the two selectors after each other, separated by whitespace. Example:GtkToolBar GtkButtonThis matches all GtkButton widgets that occur inside any GtkToolBar.

If we just did the following: GtkMenu GtkLabel:hover{color: yellow;}

This would match any GtkLabel that was inside any GtkMenu. But if we later added another GtkMenu somewhere in our application that would be affected as well. So what we need here is to add the name of this particular menu. Fortunately we named it mymenu in the C code, so we use:#mymenu GtkLabel:hover{color: yellow;}

Now we need to style the background color of the menu item itself using:#mymenu GtkMenuItem:hover{background-color: red;;}

An equivalent way of doing this would be:#mymenu > GtkMenuItem:hover { background-color: red;}

Who is online

Users browsing this forum: No registered users and 5 guests

You cannot post new topics in this forumYou cannot reply to topics in this forumYou cannot edit your posts in this forumYou cannot delete your posts in this forumYou cannot post attachments in this forum