GTK+ Forums

Discussion forum for GTK+ and Programming. Ask questions, troubleshoot problems, view and post example code, or express your opinions.
It is currently Sat Nov 29, 2014 2:22 am

All times are UTC




Post new topic Reply to topic  [ 38 posts ]  Go to page 1, 2, 3  Next
Author Message
 Post subject: Gtk+ Tutorials & Resources
PostPosted: Tue Jan 15, 2008 7:14 am 
Offline
GTK+ Guru

Joined: Thu Jun 21, 2007 1:52 pm
Posts: 198
Location: Wilkes Barre Pa
Welcome to GTK+ Tutorials & Resources.
This page is a collection of information (Documentation, Tutorials, Examples) for Gtk+ programmers. Not everything is Gtk specific but everything here can be utilized to develop different types of Gtk programs.

What's GTK+ ?
If you've found it to this page you probably know but it's a collection of software that allows you to create your own programs that contain a Graphical User Interface or GUI (pronounced "gooey" or "gwee") for short.

GTK+ comes in a variety of "Language Bindings", programming languages that you can use.
GTK+ is the C programming language version, there are many popular versions including gtkmm(which uses the C++ programming language) and PyGTK(Python programming language)
See "Language Bindings"
http://www.gtk.org/language-bindings.php

Official GTK+ preferred Coding style: http://git.gnome.org/browse/gtk+/tree/docs/CODING-STYLE

Reference Manuals
The following is a list of the documentation for the most current stable version of GTK+ and its supporting libraries.
These are the standard libraries that you will be using to develop your own GTK+ applications.
Remember that, while GTK+ depends on GLib, that is only a one way dependency!

It's still best to use the manual for your specific version of GTK which is in the second list.
I also highly recommend installing Devhelp when you install GTK. It's the off-line searchable documentation for GTK and it's libraries.
There are plug-ins for several popular text editors, such as Gedit(Linux), that work with Devhelp . (Do a search in your package manager)
You can simply highlight something your interested in, press F2 and Devhelp will open up to the entry for what you highlighted.

Reference Manuals (most current stable)
GTK+2: http://library.gnome.org/devel/gtk2/stable/
GTK+3, GLib, GObject, GIO, GDK, Pango, ATK, GdkPixbuf
http://www.gtk.org/documentation.php
View the source code for the latest unstable version of GTK+ including the demo and examples it comes with:
https://git.gnome.org/browse/gtk+/tree/
Cairo: http://www.cairographics.org/manual/
Clutter-Gtk: https://developer.gnome.org/clutter-gtk/
Clutter: http://blogs.gnome.org/clutter/documentation/
Libglade: http://library.gnome.org/devel/libglade/unstable/
Gstreamer: http://gstreamer.freedesktop.org/documentation/
GtkGLExt: http://projects.gnome.org/gtkglext/doc.html

Reference Manuals (specific versions)
In Linux you can find your GTK+ version using your package manager or using the command line.
Package manager: Search for: libgtk-3-dev
Command Line:
1) Open a terminal: CTRL+ALT+T
2) Copy the following and paste it into the terminal using: Edit->Paste OR SHIFT+CTRL+v Then press enter:
pkg-config --modversion gtk+-2.0
Do the same for: pkg-config --modversion gtk+-3.0

Say you want to run a specific version of GTK on Linux Ubuntu, and you want to know what version of Ubuntu it comes in so you don't have to build GTK manually (NOT RECOMMENDED); you can do a search here: http://packages.ubuntu.com/
Select an Ubuntu version and enter libgtk as the search keyword.

GTK+3.x
[url]gtk+-3.0 http://developer.gnome.org/gtk3/3.0/[/url]
[url]gtk+-3.1 http://developer.gnome.org/gtk3/3.1/[/url] (introduces several new css properities, "text-shadow", "box-shadow" individual border colors, ect.)
[url]gtk+-3.2 http://developer.gnome.org/gtk3/3.2/[/url]
...I think you can see the pattern. Just change 3.2 to your version.

Downloadable Versions, See: Downloads right side of the page.
http://developer.gnome.org/gtk3/

"unofficial" and yet experimental doxygen-generated source code documentation (On-line as well as downloadable)
http://fossies.org/dox/gtk+-3.12.2/
http://fossies.org/dox/all.html#G (Search the page for "gtk" to find several versions )
--------------------------------------------------------------------------------------------------------------------------------------

gtkforums.com Index:

Not CSS specific:
SIGNALS I Detecting which button was pushed using labels.
SIGNALS II Detecting which button was pushed without labels.
Changing menubar content, by selecting a notebook tab
--------------------------------------------------------------------------------------------------------------------------------------

GTK+ Programming Tutorials "GUI Toolkit"

Official GTK+3.x "Getting Started with GTK+"
http://developer.gnome.org/gtk3/stable/gtk-getting-started.html

Official GTK+3.x "Tutorials, code samples, and platform demos in C"
https://developer.gnome.org/gnome-devel-demos/

Official GTK+ 2.0 Tutorial
[HTML] http://library.gnome.org/devel/gtk-tutorial/stable/

GTK+ 2.x Tutorial for Beginners
This tutorial is for beginners describing some of the most common widgets.
[HTML] http://zetcode.com/tutorials/gtktutorial/

GTK+2.x How to set the color of a widget
[HTML] http://ometer.com/gtk-colors.html

Gnome2 Developers Guide "Gtk+ 2.0"
[PDF] http://home.cs.tum.edu/~siegel/files/tog2dg.pdf

GTK+ 2.0 Tree View tutorial
[HTML] http://scentric.net/tutorial/treeview-tutorial.html
[PDF] http://scentric.net/tutorial/treeview-tutorial.pdf
Sources link for the treeview tutorial: http://scentric.net/tutorial/treeview-tutorial.tar.gz

GTK+ 2.0 Text View tutorial
[HTML] http://www.bravegnu.org/gtktext/
[PDF] http://www.bravegnu.org/gtktext/gtktext-0.4.pdf

GTK+ 2.0 GtkComboBox Widget Tutorial
[HTML]Part1 http://tadeboro.blogspot.com/2009/04/gt ... art-1.html
[HTML]Part 2 http://tadeboro.blogspot.com/2009/04/as ... rt-of.html
[HTML]Part 3 http://tadeboro.blogspot.com/2009/04/gt ... art-3.html

GtkDialog tutorial
[HTML] Part 1: http://tadeboro.blogspot.com/2009/04/gt ... art-1.html
[HTML] Part 2: http://tadeboro.blogspot.com/2009/04/gt ... art-2.html

Wrapping and resizing GtkLabel dynamically
[HTML] http://tadeboro.blogspot.com/2009/05/wr ... label.html

Using pop-up windows
[HTML] http://tadeboro.blogspot.com/2009/05/us ... ndows.html

GTK memory management in a nutshell
[HTML] viewtopic.php?t=2412

Glade & Gtk+ Tutorials "Gtk+ Gui Designer"
GTK+ and Glade3 GUI Programming Tutorial
[HTML] http://www.micahcarrick.com/12-24-2007/ ... art-1.html

Creating GtkTreeView with Glade-3
[HTML] Part 1: http://tadeboro.blogspot.com/2009/04/cr ... ade-3.html
[HTML] Part 2: http://tadeboro.blogspot.com/2009/04/cr ... -part.html
-------------------------------------------------------------------------------------------------------------------------------------

Books and Videos
Note: All of these books/tutorials focus on the C programming language.

84 beginning C programming tutorial videos. All in 1080p resolution.
http://www.youtube.com/user/iTzAdam5X

C Programming 2nd Edition
This is the classic C book. Read this if you want to learn C.
ISBN-10: 0131103628
ISBN-13: 978-0131103627

Sams Teach Yourself C for Linux in 21 Days
ISBN-10: 0672315971
ISBN-13: 978-0672315978
http://www.informit.com/store/product.aspx?isbn=0672324482

Open Source Books
---------------------------------------------------------------------------
The C Book, second edition
http://publications.gbdirect.co.uk/c_book/

Learn C The Hard Way
A Clear & Direct Introduction To Modern C Programming
Zed A. Shaw, July 2011
http://c.learncodethehardway.org/book/

Beej's Guide to C Programming
http://beej.us/guide/bgc/

The new C standard - an annotated reference
http://www.knosof.co.uk/cbook/cbook.html
---------------------------------------------------------------------------

OpenCourseWare
http://www.ocwconsortium.org/courses/category/Computer%20Science/

What is OpenCourseWare?

OpenCourseWare is the name given to open educational resources that are presented in course format, often including course planning materials, such as syllabi and course calendars, along with thematic content, such as textbooks, lectures, presentations, notes and simulations. Open Educational Resources are materials developed by experienced educators that are available for use, repurposing, and modification (including translation), in whole or in part, by everyone, everywhere in the world.

MIT OpenCourseWare
MIT OpenCourseWare makes the materials used in the teaching of almost all of MIT's subjects available on the Web, free of charge.

Practical Programming in C
http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-087-practical-programming-in-c-january-iap-2010/lecture-notes/

CS50x (computer science 50)
CS50 is offered as “CS50x” through edX, “a not-for-profit enterprise of its founding partners Harvard University and the Massachusetts Institute of Technology that features learning designed specifically for interactive study via the web”. In other words, even if you’re not a student at Harvard, you may “take” CS50 by registering for CS50x.
https://www.cs50.net/faqs/

Course description:
Introduction to the intellectual enterprises of computer science and the art of programming. This course teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, encapsulation, data structures, databases, memory management, security, software development, virtualization, and websites. Languages include C, PHP, and JavaScript plus SQL, CSS, and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. Designed for concentrators and non-concentrators alike, with or without prior programming experience.

The video lectures are all by the instructor David J. Malan.
The "sections" are more in-depth video taped lectures with small groups of students led by various TA's (teaching assistants) who goes over the assignments.
There are two categories of "sections", "less comfortable" and "more comfortable"
Content is mostly C language up to week 7, with some of week 7 going on to other topics.
http://cs50.tv/2011/fall/#l=lectures&r=about&v=lectures

Alternate interface:
https://www.cs50.net/lectures/
-----------------------------------------------------------------------------------------------------

C language Reference
http://en.cppreference.com/w/c

C Reference Card (ANSI) "Note: Needs to be replaced with one that is easyer to read"
[Pdf] http://users.ece.utexas.edu/~adnan/c-refcard.pdf

Another Good C Programming Site/Tutorial
[Html] http://www.exforsys.com/tutorials/c-lan ... rview.html

All the C you need to know for GTK+
[Html] http://www.freesoftwaremagazine.com/art ... evelopment
[Pdf] http://www.freesoftwaremagazine.com/node/2543/pdf

Small C Tutorial from randu.org
[HTML] http://randu.org/tutorials/c/index.php

A Tutorial on Pointers and Arrays in C.
[Html] http://pweb.netcom.com/~tjensen/ptr/pointers.htm
[Pdf] http://pweb.netcom.com/~tjensen/ptr/pointers.pdf

A Tutorial on Pointers and Memory
[Pdf] http://cslibrary.stanford.edu/102/PointersAndMemory.pdf

If you need small straight to the point examples on how to use different C lang features & functions.
[Html] http://www.java2s.com/Tutorial/C/CatalogC.htm
[Html] http://www.java2s.com/Code/C/CatalogC.htm

ISO/IEC 9989 Committee Draft "See Annex A (Language syntax summary) this is useful if you want to build a C syntax parser that can do (Symbol name auto-completion & Symbol lists ) for a Gtk+ code editor."
[HTML] http://www.open-std.org/JTC1/SC22/WG14/ ... /n1124.pdf

Example Code

GtkGLExt:
http://oracle.bridgewayconsulting.com.a ... -example.c

Creating and writing to an OpenGL window "GtkGLExt":
viewtopic.php?t=3568

Glib Utility Functions:
viewtopic.php?t=2809

Glib GChecksumType Examples
viewtopic.php?p=9125#9125

WebkitGtk & GtkBuilder:
viewtopic.php?t=3057

GtkIconView:
viewtopic.php?t=3103

GtkSourceView Syntax Highlighting Text Widget:
viewtopic.php?t=3105

Clutter and Clutter-box2d:
viewtopic.php?t=3128

GTK+, Cairo & Poppler PDF Viewer example:
viewtopic.php?p=9086#9086

Terminal emulator widget VTE example
viewtopic.php?p=9087#9087

GTK windows with alpha channels and Cairo
http://mikehearn.wordpress.com/2006/03/ ... -channels/
[EXAMPLE] http://plan99.net/~mike/files/alphademo.c

A shaped input example with Gtk+, Cairo and XShape 1.1
http://macslow.thepimp.net/?p=26

GTK System Tray Example
[HTML] http://yettocome.blogspot.com/2007/08/g ... ample.html

Gtk System Tray with Animated Icon Example
[HTML] viewtopic.php?t=3423

Glibc Tutorials
Multi-Threaded Programming With POSIX Threads
[Html] http://users.actcom.co.il/~choo/lupg/tu ... hread.html

Embedded Scripting
How to create C/Lua module with swig.
[pdf] http://madison-project.wikidot.com/loca ... a_Swig.pdf

Lua Swig Tutorial
[Html] http://www.swig.org/Doc1.3/Lua.html

How to use Lua with C.
[Html] viewtopic.php?t=1995

How to use Python with C
http://docs.python.org/extending/

How to use Spidermonkey embedded javascript engine with C
[HTML] https://developer.mozilla.org/en/JavaSc ... %27s_Guide

Glib Tutorials "Gtk+ Utility Library"
Using GLib's GKeyFile Parser
[HTML] http://www.gtkbook.com/tutorial.php?page=keyfile

Manage C data using the GLib collections
http://www.ibm.com/developerworks/linux/tutorials/l-glib/resources.html

Writing Unit Tests with GLib
[Html] http://blogs.gnome.org/timj/2008/06/24/ ... with-glib/

The Missing GObject Tutorial Sample
[HTML] http://arbingersys.blogspot.com/2009/07 ... ample.html

GObject tutorial
[HTML] http://madison-project.wikidot.com/loca ... tml.tar.gz

Hildon "Hildon is a user interface toolkit based in GTK that targets mobile devices."
Hildon Tutorial
[HTML] http://maemo.org/api_refs/5.0/beta/tutorial/html/

Pango Tutorials "Gtk+ Text Formating & Rendering Library"
The Pango connection:
[HTML] Part1: http://www.ibm.com/developerworks/library/l-u-pango1/
[HTML] Part 2: http://www.ibm.com/developerworks/library/l-u-pango2/

Cairo "2D Vector Graphics Library"
Cairo graphics tutorial.
It is done in the C programming language.
This tutorial is for beginners and intermediate developers 100+ pages.
[HTML] http://zetcode.com/tutorials/cairographicstutorial/

Cairo Concepts
A one-of-a-kind introduction to Cairo concepts and models.
[HTML] http://cairographics.org/tutorial/

Writing a Widget Using Cairo and GTK+ 2.0
[HTML] Part1: http://www.gnomejournal.org/article/34/ ... -and-gtk28
[HTML] Part2: http://www.gnomejournal.org/article/36/ ... k28-part-2

Clutter "2D/3D Multimedia Toolkit" - "Gtk+, Cairo, Gstreamer, Libvlc, Webkit, MD2, Mozembed plugins available."
Programming with Clutter 0.8
[Html] http://www.openismus.com/documents/clut ... rial/html/
[Pdf] http://www.openismus.com/documents/clut ... lutter.pdf
Programming with Clutter 0.9
[HTML] http://www.openismus.com/documents/clut ... index.html
Programming with Clutter 1.0
[HTML] http://www.openismus.com/documents/clut ... index.html

Clutter
http://ftp.acc.umu.se/pub/GNOME/sources/clutter/

Webkit Plugin
git clone git://git.o-hand.com/webkit

VLC Plugin
http://github.com/rno/clutter-vlc/tree/master

MD2 Plugin
http://github.com/bpeel/clutter-md2/tree/master

Mozembed Plugin
http://git.clutter-project.org/cgit.cgi ... tree/tests

Gstreamer Tutorials "Audio, Video Multimedia Toolkit"
GStreamer is a multimedia framework written in the C programming
language with the type system based on GObject."
Application Development Manual:
[HTML] http://gstreamer.freedesktop.org/data/d ... index.html
[PDF] http://gstreamer.freedesktop.org/data/d ... manual.pdf
Plugin Writer's Guide :
[HTML] http://gstreamer.freedesktop.org/data/d ... index.html
[PDF] http://gstreamer.freedesktop.org/data/d ... wg/pwg.pdf

GStreamer Quick Hello World type Tutorial
[HTML] Part1: http://bluwiki.com/go/GStreamer
[HTML] Part2: http://bluwiki.com/go/GStreamer/C_Hello_World

GStreamer Plugin Development Video
* An introduction to GStreamer terms, usage and the GStreamer pipeline model.
* Construction of simple pipelines using available GStreamer elements, building a video decoding pipeline
* Look at the requirements for various types of processing elements: Data sources, sinks, filters, converters.
* Development of a simple custom plugin for processing raw video frames
* Extending the custom element in various ways, to render video effects, provide custom communication with the application.
Participants should be familiar with GObject/GLib, as GStreamer code relies heavily on both.
[HTML] http://lca2007.linux.org.au/talk/272.html
[VIDEO] http://mirror.linux.org.au/pub/linux.co ... ks/272.ogg

Opengl Tutorials "3D Graphics Library"
OpenGL Programming Guide "RedBook"
[PDF] http://madison-project.wikidot.com/loca ... _Guide.pdf

OpenGL Reference Manual "BlueBook"
[Pdf] http://madison-project.wikidot.com/loca ... Manual.pdf

GtkGLExt is an OpenGL extension to GTK+ 2.0 or later
[HTML] http://projects.gnome.org/gtkglext/<-- Download source for lots of C/Gtk+ example code.

osgGtk is a library of C based Gtk+ and C++ based Gtk-- widgets to support OpenSceneGraph (OSG) applications.
The library also includes several example applications such as osgviewerGtk and osgviewerGtkmm.
[HTML] http://osggtk.wiki.sourceforge.net/main <--Download source for C/Gtk+ example code.

Lexical Analyzer & Parser Generator
Lex & Yacc / Flex & Bison Primer
[Html] http://ds9a.nl/lex-yacc/cvs/output/lexyacc.html#toc1

A little manual for Lex and Yacc
[Html] http://pltplp.net/lex-yacc/

Flex Manual "Lex"
[Html] http://flex.sourceforge.net/manual/

Bison Manual "Yacc"
[Html] http://www.gnu.org/software/bison/manua ... bison.html
[Pdf] http://www.gnu.org/software/bison/manual/pdf/bison.pdf

Markup language Note: You will find API References and example usage on the provided links.
LibYAML is a YAML 1.1 parser and emitter written in C.
[Html] http://pyyaml.org/wiki/LibYAML

MJSON M's JSON parser is a small library completely written in plain ISO C which handles documents described by the JavaScript Object Notation (JSON) data interchange format.
[Html] http://mjson.sourceforge.net/index.html

LibAxl (or just Axl) is an implementation of the XML 1.0 standard specification written in C
[Html] http://www.aspl.es/axl/

Libxml2 is the XML C parser and toolkit developed for the Gnome project
[Html] http://www.xmlsoft.org/

Libcroco is a general CSS parsing and manipulation library written in C for the GNOME project. It provides a CSS2 parser (SAC and CSSOM API), and a CSS2 selection engine. It uses Libxml2 as underlying XML platform and the GLib as a portability layer.
[Html] https://launchpad.net/libcroco

Portable Document Format (PDF)
Poppler "Poppler is a PDF rendering library and is used with cairo to render PDF's"
[HTML] http://poppler.freedesktop.org/
[Example Viewer] viewtopic.php?p=9086#9086

libharu "libHaru is a free, cross platform, open source library for generating PDF files."
[HTML] http://libharu.org/wiki/Main_Page
[HTML] http://libharu.org/wiki/Documentation
[NOTE] Cairo can also produce PDF's but libharu does a way better job and has tons more features.

Programming & Hardware
The Linux Kernel Module Programming Guide
[Html] http://tldp.org/LDP/lkmpg/2.6/html/index.html

Bluetooth for Programmers "Describes Basic Bluetooth Concepts"
[PDF] http://people.csail.mit.edu/rudolph/Tea ... BTBook.pdf
An Introduction to Bluetooth Programming
[Html] http://people.csail.mit.edu/albert/bluez-intro/

LibParted Handbook "Note: LibParted is a library used to create, destroy, resize and copy PC disk partitions"
[PDF] http://zester.googlecode.com/files/libp ... ndbook.pdf

HAL Tutorial "Hardware abstract layer"
[HTML] http://www.share-linux.com/hal1.php
[HTML] http://www.share-linux.com/hal2.php
[PDF] http://madison-project.wikidot.com/loca ... torial.pdf

LIRC Programming Guide "LIRC is a package that allows you to decode and send infra-red signals of many (but not all) commonly used remote controls."
[HTML] http://www.lirc.org/html/technical.html#applications

Libusb Programming Tutorial "libusb is a suite of user-mode routines for controlling data transfer to and from USB devices on Unix-like systems without the need for kernel-mode drivers."
[HTML] http://www.linuxforums.org/forum/linux- ... ibusb.html

Libburnia Api Referance and Code Examples "libburnia is a project for reading, mastering and writing optical discs. Currently it is comprised of libraries named libisofs, libburn, libisoburn, a cdrecord emulator named cdrskin, and an integrated multi-session tool named xorriso. The software runs on Linux and FreeBSD."
[HTML] http://api.libburnia-project.org/libburn/
[HTML] http://api.libburnia-project.org/libisofs/index.html
[HTML] http://api.libburnia-project.org/libisoburn/

Libmtp "libmtp is a LGPL library implementation of the Media Transfer Protocol (MTP), a superset of the Picture Transfer Protocol (PTP). "
[HTML] http://libmtp.sourceforge.net/index.php <--Download for API Reference and Examples

Libgpod "libgpod is a shared library to access the contents of an iPod. It supports playlists, smart playlists, playcounts, skipcounts, ratings, podcasts, and cover art. Audio and video are supported, as well as the photo database."
[HTML] http://www.gtkpod.org/libgpod/docs/ <--Download for Examples

Libgphoto2 "libgphoto2 is the core library designed to allow access to digital camera by external programs."
[HTML] http://www.gphoto.org/proj/libgphoto2/ <-- Download for API Reference and Examples

V4L2 "Video4Linux2 or V4L2 is a video capture application programming interface for Linux. Several USB webcams, TV tuners, and other devices are supported. Video4Linux2 is closely integrated with the Linux kernel. Video4Linux2 was named after Video for Windows (which is sometimes abbreviated "V4W"), but is not technically related to it."
[HTML] http://v4l2spec.bytesex.org/spec-single ... tml#AEN163

DBus Tutorial "Message bus system"
[PDF] http://madison-project.wikidot.com/loca ... torial.pdf

Database Programming
MySQL Database C API proramming tutorial
[Html] http://zetcode.com/tutorials/mysqlcapitutorial/

PostgreSQL
-------------
PostgreSQL Database libpq C API tutorial
[HTML] http://www.postgresql.org/docs/8.4/static/libpq.html

Accessing PostgreSQL From Code (Beginners C)
[HTML] http://tutorials.freeskills.com/profess ... m-code.htm

Berkley DB C API
-----------------
Getting Started with Data Storage:
[Pdf] http://www.oracle.com/technology/docume ... -C-GSG.pdf
[Html] http://www.oracle.com/technology/docume ... index.html
Getting Started with Transaction Processing:
[Pdf] http://www.oracle.com/technology/docume ... -C-Txn.pdf
[Html] Getting Started with Transaction Processing
Getting Started with Replication:
[Pdf] http://www.oracle.com/technology/docume ... -C-GSG.pdf
[Html] http://www.oracle.com/technology/docume ... index.html
Referance Guide:
[Html] http://www.oracle.com/technology/docume ... f/toc.html
Programmatic API:
[Html] http://www.oracle.com/technology/docume ... frame.html

Hamster DB
--------------
[Site] http://hamsterdb.com/index
[PDF] http://hamsterdb.com/public/dl/tutorial.pdf
[Examples] http://hamsterdb.com/documentation/samples

Sqlite embedded database.
[HTML] http://souptonuts.sourceforge.net/readm ... orial.html

Archiving Libraries
SCZ
[HTML] http://scz-compress.sourceforge.net/
[API] http://scz-compress.sourceforge.net/api.html

QuickLZ
[HTML] http://www.quicklz.com/manual.html
[Examples] http://www.quicklz.com/download.html

Zlib
[HTML] http://www.zlib.net/zlib_docs.html
[Examples] http://www.zlib.net/zlib_how.html

Libarchive "C library and command-line tools for reading and writing tar, cpio, zip, bzip , gzip, ISO, and other archive formats"
[HTML] http://code.google.com/p/libarchive/

Network Libraries
Licurl "libcurl is a free and easy-to-use client-side URL transfer library, supporting FTP, FTPS, HTTP, HTTPS, SCP, SFTP, TFTP, TELNET, DICT, LDAP, LDAPS and FILE. libcurl supports SSL certificates, HTTP POST, HTTP PUT, FTP uploading, HTTP form based upload, proxies, cookies, user+password authentication (Basic, Digest, NTLM, Negotiate, Kerberos4), file transfer resume, http proxy tunneling and more! "
[HTML] http://curl.haxx.se/libcurl/c/libcurl-tutorial.html
[API] http://curl.haxx.se/libcurl/c/
[Examples] http://curl.haxx.se/libcurl/c/example.html


Link will be removed because wrapper is old and not developed anymore.
glibcurl "glibcurl consists of a small amount of C code which you can include in your program. It integrates the event loops of libcurl and glib. This means that a GTK+ program is able to wait for clicks, button presses etc. at the same time as waiting for data to arrive on the network sockets maintained by libcurl."
http://atterer.org/glibcurl

Libpcap "libpcap is a system-independent interface for user-level packet capture. libpcap provides a portable framework for low-level network monitoring. Applications include network statistics collection, security monitoring, network debugging, etc."
[HTML] http://yuba.stanford.edu/~casado/pcap/section1.html

Libdnet "libdnet provides a simplified, portable interface to several low-level networking routines, including

* network address manipulation
* kernel arp(4) cache and route(4) table lookup and manipulation
* network firewalling (IP filter, ipfw, ipchains, pf, PktFilter, ...)
* network interface lookup and manipulation
* IP tunnelling (BSD/Linux tun, Universal TUN/TAP device)
* raw IP packet and Ethernet frame transmission "

Libnids "Libnids is an implementation of an E-component of Network Intrusion Detection System. It emulates the IP stack of Linux 2.0.x. Libnids offers IP defragmentation, TCP stream assembly and TCP port scan detection."
[HTML] http://libnids.sourceforge.net/
[EXAMPLE] http://libnids.sourceforge.net/printall.c

Libsoup "libsoup is an HTTP client/server library for GNOME. It uses GObjects and the glib main loop, to integrate well with GNOME applications."
[HTML] http://library.gnome.org/devel/libsoup/stable/

libEtPan "libEtPan is a mail purpose library. It will be used for low-level mail handling : network protocols (IMAP/NNTP/POP3/SMTP over TCP/IP and SSL/TCP/IP, already implemented), local storage (mbox/MH/maildir), message / MIME parser."
[HTML] http://www.etpan.org/libetpan/

GeoClue "GeoClue is a software framework which can be used to enable geospatial awareness in applications. GeoClue utilizes the D-Bus inter-process communication mechanism to provide location information. Through this it aims to simplify development of location aware applications and promote code reuse within the free software and open source communities by defining a logical boundary between the applications and underlying location providers. GeoClue is licensed under the GNU Lesser General Public License and is currently available for Linux."

GeoClue provides access to multiple position providers:

* GPS: Position information from a Global Positioning System receiver
* Plazes: Position information from the Plazes Wi-Fi location service
* Hostip: Position information based on IP address
* Manual: User-provided position information

[HTML] http://en.wikipedia.org/wiki/GeoClue
[HTML] http://www.freedesktop.org/wiki/Software/GeoClue
[HTML] http://folks.o-hand.com/jku/geoclue-docs/

Source Code Build Tools
Automating Program Compilation - Writing Makefiles
[Html] http://users.actcom.co.il/~choo/lupg/tu ... files.html

GNU Autoconf, Automake, And Libtool "Goat Book"
[Html] http://sources.redhat.com/autobook/auto ... C_Contents

Legal Resources
Open Source Licensing
Software Freedom and Intellectual Property Law
[Html] http://www.rosenlaw.com/oslbook.htm

Software Freedom Law Center:
We provide legal representation and other law-related services to protect and advance Free and Open Source Software (FOSS). Founded in 2005, the Center now represents many of the most important and well-established free software and open source projects.
[Html] http://www.softwarefreedom.org/

"Note: Remember never openly research software patents. Or inquire about patents with the US patent office if you intend to use the patent in question. Because if you ever find your self being sued the fact that you inquired about they patent in question is enough to prove that you deliberately committed patent infringement. "

Patent Commons Project:
The Patent Commons Project is dedicated to documenting the boundaries of The Commons -- a preserve where developers and users of software can innovate, collaborate, and access patent resources in an environment of enhanced safety, protected by pledges of support made by holders of software patents.
[Html] http://www.patent-commons.org/

DBus Tutorials "Message bus system"
[PDF] http://madison-project.wikidot.com/loca ... torial.pdf

Old Freedesktop DBus Tutorial
[HTML] http://dbus.freedesktop.org/doc/dbus-tutorial.html

HAL Tutorial "Hardware abstract layer"
[PDF] http://madison-project.wikidot.com/loca ... torial.pdf

SpiderMonkey
JS Embedder's Guide "A guide to embedding the JavaScript C engine in applications. "
[HTML] https://developer.mozilla.org/en/JavaSc ... %27s_Guide

Markup language Note: You will find API References and example usage on the provided links.

LibYAML is a YAML 1.1 parser and emitter written in C.
[HTML] http://pyyaml.org/wiki/LibYAML

MJSON M's JSON parser is a small library completely written in plain ISO C which handles documents described by the JavaScript Object Notation (JSON) data interchange format.
[HTML] http://mjson.sourceforge.net/index.html

LibAxl (or just Axl) is an implementation of the XML 1.0 standard specification written in C
[HTML] http://www.aspl.es/axl/

Libcroco is a general CSS parsing and manipulation library written in C for the GNOME project. It provides a CSS2 parser (SAC and CSSOM API), and a CSS2 selection engine. It uses Libxml2 as underlying XML platform and the GLib as a portability layer.
[HTML] https://launchpad.net/libcroco

osgGtk is a library of C based Gtk+ and C++ based Gtk-- widgets to support OpenSceneGraph (OSG) applications. The library also includes several example applications such as osgviewerGtk and osgviewerGtkmm.
[HTML] http://osggtk.wiki.sourceforge.net/main <--Download source for C/Gtk+ example code.
We also lost most of our glib tutorials :( so i have started to make backups in odf and pdf.

Please report any broken links to an active moderator so they can be fixed.


Last edited by caracal on Sat Jul 24, 2010 5:34 pm, edited 187 times in total.

Top
 Profile  
 
 Post subject:
PostPosted: Fri Sep 12, 2008 4:11 pm 
Offline
Never Seen the Sunlight

Joined: Wed Sep 21, 2005 12:07 am
Posts: 563
Location: Portland, OR USA
Thanks for putting this list together! Gotta plug my own tutorial in there...

Focuses on using Glade 3 to create a GTK Text Editor in C or Python.

GTK+ and Glade3 GUI Programming Tutorial

_________________
Micah Carrick - Forum Administrator
http://www.micahcarrick.com


Top
 Profile  
 
 Post subject:
PostPosted: Mon Apr 13, 2009 7:15 pm 
Offline
Never Seen the Sunlight

Joined: Wed Jul 23, 2008 10:31 am
Posts: 2406
Location: Slovenia
Hello.

I started writing a blog with short Gtk tutorials. I'll be dealing mostly with undocumented widgets and widgets users from this forum find most difficult to use (that is, if I know how to use it;).

You can find my blog at http://tadeboro.blogspot.com/. Any comments and constructive critics are welcome.


Top
 Profile  
 
 Post subject: Too few gstreamer tutorials and examples!
PostPosted: Thu Sep 03, 2009 12:52 pm 
Offline
Familiar Face

Joined: Wed Sep 02, 2009 4:22 pm
Posts: 20
I'd say gstreamer is close to undocumented when you get right down to it. None of the freedesktop.org documentation offers any context beyond a simple "helloworld" type audio file player. These docs are very incomplete and mostly are just autogenerated reference material that are really only useful once you've learned nearly everything and just need the details of the minutia.

What is really missing is some context, things like why would you use ximagesink vs xvimagesink for example.


The examples I've found so far in the source gstreamer trees I've downloaded seem less then impressive (based on my random selection of examples that seem to address things I'd like to accomplish).

I found a seek example that opens a gtk window and plays an audio file with a seek bar. Trouble is, if this is the best gstreamer can do I need to switch to plan B now -- most orders of button and control activation lock it up, at best its an example of how not to do a seekbar.

Applications like Totum and Amarok 1.4 make me think gstreamer is what I should use as it seems it will end up being to Linux what Directshow is to Windows, meaning using anything else will be swimming upstream in the long run. But non-gstreamer media players (Mplayer) seem to have lower CPU usage on formats supported by both.

Micah, Thanks so much for your tutorial, I'd found it via Google before I'd found these forums. Up to then I'd been hopelessly confused not realizing that what I was finding about Glade was mostly wrong because I never realized the difference Glade2 vs. Glade3 and their very different strategies.


Top
 Profile  
 
 Post subject:
PostPosted: Thu Sep 03, 2009 1:24 pm 
Offline
Familiar Face

Joined: Wed Sep 02, 2009 4:22 pm
Posts: 20
tadeboro wrote:
Hello.

I started writing a blog with short Gtk tutorials. I'll be dealing mostly with undocumented widgets and widgets users from this forum find most difficult to use (that is, if I know how to use it;).

You can find my blog at http://tadeboro.blogspot.com/. Any comments and constructive critics are welcome.


I just found this:
http://tadeboro.blogspot.com/2009/06/mu ... l#comments

Looks a lot like Win32 EnterCriticalSection() LeaveCriticalSection() coding style.

Since gstreamer is multi-threaded and and I'm running a dual CPU might explain why the gstreamer seekbar example I mentioned in my post above is useless, it has none of the thread awareness stuff! Its the kind of thing you can often get away with on a single CPU but real parallelism breaks it.

My most pressing issues are how do I embed a gstreamer video output (xvimagesink or ximagesink) window inside a gtk application (I'd prefer glade3 and the convert script for UI design at this point), and what gtk+ widgits are available to plot analog data in a stripchart type scrolling display, if any.

I found this:
http://code.google.com/p/gst-player/

and it sorta works, but its got some conditional code where it it maps the ximagesink to gtk window that I don't yet understand enough to modify or correct the compiler warnings about the pointer casts being used.

--wally.


Top
 Profile  
 
 Post subject:
PostPosted: Thu Sep 03, 2009 6:06 pm 
Offline
Never Seen the Sunlight

Joined: Wed Jul 23, 2008 10:31 am
Posts: 2406
Location: Slovenia
Hello.
wally_bkg wrote:
My most pressing issues are how do I embed a gstreamer video output (xvimagesink or ximagesink) window inside a gtk application (I'd prefer glade3 and the convert script for UI design at this point), and what gtk+ widgits are available to plot analog data in a stripchart type scrolling display, if any.
First of all, the difference between ximagesink and xvimagesink is only in hardware acceleration - xvimagesink uses capabilities of your GPU to render contents while ximagesing is a software renderer. In real world application, you'll almost certainly want to use xvimagesink.

Embedding is relatively simple. Create your GUI as usually and use GtkDrawingArea as a widget that will display video (we use GtkDrawingArea mainly because it has it's own GdkWindow, so GtkEventBox would be OK too). Now you need to create your multimedia pipeline, connect it's message bus and wait for "prepare-xwindow-id" message to arrive. When you get it, obtain the X resource ID from GdkWindow and set it as xoverlay ID. That's it. When your start your pipeline, video will be displayed on your widget.

A sample code that shows intercepting GStreamer's message and X ID setting would look like this:
Code:
static GstBusSyncReply
create_window( GstBus      *bus,
               GstMessage  *message,
               GtkWidget   *draw )
{
    /* ignore anything but 'prepare-xwindow-id' element messages */
    if( GST_MESSAGE_TYPE( message ) != GST_MESSAGE_ELEMENT )
        return( GST_BUS_PASS );
   
    if( ! gst_structure_has_name( message->structure, "prepare-xwindow-id" ) )
        return( GST_BUS_PASS );
   
    gst_x_overlay_set_xwindow_id(
            GST_X_OVERLAY( GST_MESSAGE_SRC( message ) ),
            GDK_WINDOW_XWINDOW( gtk_widget_get_window( draw ) ) );
   
    gst_message_unref (message);
   
    return( GST_BUS_DROP );
}

int
main( int    argc,
      char **argv)
{
    /* Declarations here */
    GtkWidget  *draw_area;
    GstBus     *bus;
    GstElement *pipeline;
    /* ... */

    gtk_init( &argc, &argv );

    /* Create widget here */

    /* Create pipeline here */

    /* Embedding */
    bus = gst_pipeline_get_bus( GST_PIPELINE( pipeline ) );
    gst_bus_set_sync_handler( bus,
                              (GstBusSyncHandler)create_window,
                              draw_area );

    /* More code here */

    return( 0 );
}
(This code is modification of code, obtained from here: http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-base-libs/html/gst-plugins-base-libs-gstxoverlay.html#gst-plugins-base-libs-gstxoverlay.description.)

And about analog display. There is no stock widget to display any of this stuff since this is quite specialized stuff and against GTK+'s philosophy to keep default widget set non-polluted with gazillions of poorly maintained widgets. You'll probably be able to find one already coded on the web, since there are quite a few audio mangling applications that use GTK+ as their graphical toolkit. But if your demands are relatively simple, you may also get away by simply plotting your data onto GtkDrawingArea.

I hope this post helped a bit.

Tadej


Top
 Profile  
 
 Post subject:
PostPosted: Thu Oct 08, 2009 1:10 pm 
Offline
Familiar Face

Joined: Wed Sep 02, 2009 4:22 pm
Posts: 20
I didn't see this in your tutorial but if you have a complete gtk+ installation the program /usr/bin/gtk-demo is a nice way to browse the behavior of the widgets and look at sample code to exercise them.

Wish I'd known about this earlier.

On Ubuntu you usually have to install the gtk2.0-examples package to get it.

--wally.


Top
 Profile  
 
 Post subject:
PostPosted: Fri Oct 09, 2009 6:25 pm 
Offline
GTK+ Guru

Joined: Thu Jun 21, 2007 1:52 pm
Posts: 198
Location: Wilkes Barre Pa
I just just figured everyone knew about the example and demo folders in the gtk+ source.
That's kind how you get the reference manuals, by downloading the source.


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Thu Dec 22, 2011 9:19 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
You can view a nicer version of this tutorial here: http://speritzl9001.github.io/MoonLightCoffee/

GTK3 with CSS

Starting with version 3, GTK uses CSS3 for styling and although it's a subset of the CSS3 standard so not everything is supported, you can use it to greatly improve the styling of your applications.

CSS: (Cascading Style Sheets), are used to style documents written in languages for web content creation such as HTML, XHTML, SVG, XUL, ect.
Quote:
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
The current version is CSS3 and is maintained by the W3C, (World Wide Web Consortium)

Internal versus external CSS:
There are two types of CSS, internal and external. The external type is also called a style sheet. With internal, the CSS is defined in inside your GTK code file, with external(style sheet) the CSS is in a separate file. The style sheet version goes along with the idea of separating the content of the document from it's styling. You can use either but this first example will be the internal type.

The standard for CSS is to include one property per line for clarity and editing capability. So including CSS in your code can cause it to grow quickly especially if you have several things you want to style differently. One of the benefits of using a style sheet is that it keeps your code file as small as possible. Another benefit is that once you've created your content in the code file and compiled it, you don't need to recompile it after making changes in the style sheet. Just save the new version of the style sheet and run the program again. The code file will read any changes in the style sheet. This also lets other people make changes in the style sheet to create a custom look. They don't need to know C language or Python or whatever programming language you made your code file with only a little CSS. Of course if you don't want anyone to change the look of your program you should use internal CSS. However they can still change the theme on their computer (see below) which can affect how parts of your program will look.

Styling versus. Theming

Theming:
The Linux operating system has many versions, called distributions or "distros" for short. Ubuntu; Debian, Mint. ect. These distros each have many revisions and codenames.
https://wiki.ubuntu.com/DevelopmentCodeNames/
http://wiki.debian.org/DebianReleases#Release_statistics
Each can look quite different than the others. The Window Manager is the part of the operating system that has the finally say in what anything on the screen will look like. The Window Manager works by reading a piece of code and a CSS file. The CSS file contains information about the visually aspects such as colors, some shapes ect. The versions and revisions that I previously mentioned each come with predefined "Themes". These can be changed by selecting a different one through a simple user setting.

When "Theming" you create your own CSS file and some code. The code instructs the Window Manger to read the CSS file and all the programs running on the computer will obey the rules in the CSS file. That is, they will use the colors and other visual properties that were written in the CSS file. Here your not creating any new programs. You're simply telling the existing programs how they should look.

The developers of Linux's idea is that you will not write a program which changes the theme of the operating system just so that your program looks the way you want. Instead the idea is to have a universal look to any program that runs on the system. This creates a familiar and user friendly interface. An exception would be a program that runs on a very specialised computer called and embedded system. These are usually lower speed computers used for specific purposes sometimes in industrial settings. They usually do not run a operating system capable of displaying graphics at all or very low quality ones. Recent advances in computer chips called SOC's (system on a chip) are changing things dramatically. Their being used for such applications as tablet computers, set-top boxes (Netflix on your TV) and energy monitoring (Plug-in electric cars). The prices of these chips is falling rapidly and their speed and ability to run full operating systems with graphics capability is increasing. One such system is the very low cost, very popular, Raspberry Pi computer. It's a small computer designed for Computer Science students and hobbyist programmers. http://www.raspberrypi.org/

Theming will not be covered in this tutorial, maybe in the future. If you want to get more information about theming see:
http://worldofgnome.org/making-gtk3-themes-part-1-basics/
http://www.devart.com
However if you are programming on a embedded system, GTK has a method for you to create your own theme, GtkThemingEngine:
http://developer.gnome.org/gtk3/stable/GtkThemingEngine.html

Styling:
Styling is when you use the new CSS capabilities in GTK3 to control some of the visual aspects of programs that YOU write. Any programs on the computer that you did not write won't be affected. Those other programs will obey the theme the Window Manger gives them. I said some of the visual aspects... because not all of the properties can be changed. Even some of the properties that you do change can be overridden by the Window Manger. (not many)

COLORS:
Gtk with CSS supports several ways to use colors, called color units. The units are: Basic color keywords, X11 extended, RGB, RGBA and hexadecimal.
The simplest are the basic color keywords such as: red, blue, green ect. (*See note)
See: 4.1. Basic color keywords
http://www.w3.org/TR/css3-color/#html4
*Note: For the following colors you must use either RGB, RGBA or hexadecimal: lime, olive, teal.

Gtk also supports all of the X11 extended color units (**See Note)
No named color can contain spaces. Some X11 colors listed on Wikipedia and other sites contain spaces. They will not work. You need to remove any spaces or use one of the other color units listed below.
Color names which have more then one word in them can have any combination of upper and lower case letters but can not contain spaces. For instance:Cadet Blue can be written as any of the following:
CadetBlue
cadetblue
cadetBlue
Cadetblue
CADETBLUE
CadETBLuE
See: 4.3. Extended color keywords
http://www.w3.org/TR/css3-color/#svg-color
**Note: For the following colors you must use either RGB, RGBA or hexadecimal: lime, olive, teal.

RGB
One of the most used color units is RGB, which stand for: red, green, and blue. The values can be either integers between 0 and 255 or percentages.
Examples:
rgb (0, 0, 255);
rgb (20%, 30%, 0%);

RGBA
You can also use RGBA. The "A" in RGBA means "Alpha" which is another way of saying transparency.

HEXIDECIMAL
See: Hex triplet http://en.wikipedia.org/wiki/Web_colors

Obtaining the color values:
You can use online "color pickers" as well as almost any image manipulation program to obtain these colors. I recommend Inkscape since it supports RGBA, it's free and works on Linux, Mac and Windows. For the full list of color units and more examples, See: "The various ways to express colors in GTK+ CSS are:"
http://developer.gnome.org/gtk3/stable/GtkCssProvider.html (same for all version of Gtk3)

COLOR GRADIENTS:
In addition, Gtk allows you to create a color gradient. A color gradient is color that progress from one color to another. There are two types of color gradients: linear and radial. The syntax for linear gradient is:
Code:
-gtk-gradient (linear,
              start_x start_y, end_x end_y,
              color-stop (position, color),
              ...)

start_x, start_y, Are either a floating point number between 0 and 1 or one of the special values 'left', 'right' or 'center'

end_x, end_y, Are either a floating point number between 0 and 1 or one of the special values 'top', 'bottom' or 'center'

position: A floating point number between 0 and 1 and color is a color expression.

color-stop, Can be repeated multiple times to add more than one color stop. 'from (color)' and 'to (color)' can be used as abbreviations for color stops with position 0 and 1, respectively.

The syntax for CSS3 linear gradients differs slightly between web browsers and color-stop for GTK follows the CSS model for the Safari web browser except, position is given as a decimal instead of percent: color-stop(0.50, blue)
Means the gradient should gradually fade from the previous color to blue. It finally becomes the color blue at the point 50% of the width's container. If you defined this external css gradient
(for Unico on Ubuntu, See the section: "Compatibility Notes")
Code:
GtkWindow {
background-image: -gtk-gradient (linear,
                                 center top, center bottom,
                                 color-stop(0.5,green),
                                 color-stop(0.5,blue),   
}
You would get:
Attachment:
50_50.png
50_50.png [ 2.98 KiB | Viewed 70250 times ]


Before you look at the Gtk manual example's for gradients, the syntax: @name should be explained. This is used to create a unique name for a color. This is useful because you only need to define the color once then use it as many times as you want. That way you only need to change the definition of the color and everywhere you've used the unique name will reflect the change.
For colors you use: @define-color, followed by your own unique name, then a value given in one of the supported color units. For instance, if you were changing the background color you might use the following as your unique name: bg_color1.
Once you define it, then you use your unique name with the character @ in front of it. A linear gradient for external CSS, would be created with the following: (See compatibility note for Unico in Ubuntu)
Code:
@define-color bg_color1 rgb (255, 0, 0);
@define-color bg_color2 rgb (71, 71, 229);

GtkWindow {
  background-image: -gtk-gradient (linear,
                                   left top,
                                   right bottom,
                                   from(@bg_color1),
                                   to(@bg_color2));
}

The quickest, simplest way to get linear gradient color values is to use online tools that are available. I've listed some in the references section at the end of this post, or just Google "CSS gradient creator" Copy and paste the Safari web browser version of the code it generates for you. Then just change "background" to "background-image" "-webkit-gradient" to "-gtk-gradient" and the percent values to decimal. (See compatibility note for Unico in Ubuntu) For instance you should get something like this:
Code:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(39%,#2989d8), color-stop(56%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ *

I won't go into radial gradients. To read about them and more linear gradient examples, See: Gradients
http://developer.gnome.org/gtk3/stable/GtkCssProvider.html (same for all version of Gtk3)

There are four other more complicated color units: mix, shade, lighter, darker
Code:
mix(color1, color2, f) /* A linear combination of color1 and color2, f is a floating point number between 0 and 1. */
shade(color, f)        /* A lighter or darker variant of color, f is a floating point number  */
lighter(color)         /* A lighter variant of color */
darker(color)          /* A darker variant of color*/

mix: "f" is the brightness that I described previously, only in CSS for Gtk, it's a floating point number between 0.0 and 1.0. A value of 0.5 would be 50%, 0.6 would be 60%.

shade: "f" is the brightness that I described previously, but here it's between 0.0 and 2.0. If you set a color using one of the basic color keywords, say blue, then on the next line use: shade(blue, 1.0) it will not change. But if you set: shade(blue, 0.0) then you'll get black. If you use: shade(blue, 2.0) you'll get white.

lighter: If you set the background color using: blue, then use: lighter(blue) it will result in a 30% reduction in the saturation property of the HSV color space. This is equivalent to selecting the Ubuntu appearance settings as rgb: 0,0,255 then changing the "S" property in the HSV settings from 100 to 70. This isn't additive, meaning you can't apply an additional lighter and get even lighter version of the color you started with.

darker: This works opposite of lighter and again, it can't be repeated for even darker versions of your starting color.
I won't go into mix, but I will say, lighter, darker and shade can be useful when styling the different states of a button. For instance when you're cursor is over it.

IMAGES:
You can also use images with Css. Gtk accepts the image types: .gif .jpeg .png .svg, in the code below just replace the line:
" background-color: shade(blue, 1.0);\n"
With:
" background-image: url('PATH');\n"
For example once you've created or downloaded your image, lets say I downloaded the GTK cube image at the top of this web page and saved it as GtkCube.gif to a folder called: "Pictures" , I would use:
" background-image: url('/home/zerohour/Pictures/GtkCube.gif');\n"
The GTK cube picture at the top of this web page is a type .gif image which doesn't scale in size very well. So you can resize the window to fit the image or go find one in .jpeg format which scales much better. The image is 256 by 75 pixels. So you would change the line:
gtk_window_set_default_size(GTK_WINDOW(window), 500, 300);
To:
gtk_window_set_default_size(GTK_WINDOW(window), 256, 75);


COMPATIBILITY NOTES:
For Unico, the default GTK3 Theme Engine in Ubuntu 12.04 (Precise Pangolin) or Ubuntu 12.10 (Quantal Quetzal):
If your setting the background color or background image of a window, you can use either background or background-image. But when setting the background color of a button, which is in a upcomming tutorial, you must use background. For this reason it's best to be consistent and just use background when setting background colors and backgound images for all widgets.

As of GTK 3.4 you must use units in the CSS (unless the value is zero) or you will recieve the warning:
Quote:
Not using units is deprecated. Assuming 'px'.

Also there must not be any space between the value and the units or you'll recieve the same warning. You can use any of the standard CSS units of measurement: http://www.w3schools.com/cssref/css_units.asp
As an example, the code in the following line:
" padding: 2;\n"
Would become:
" padding: 2px;\n"

STYLE PROPERITIES: IMPORTANT
There are two types of style properties. Standard CSS properities and widget specific properties.

Standard CSS properties
Standard CSS properties are those that follow (generally) the CSS3 standard and are listed in official GTK documentation. Make sure your viewing the manual for the version of gtk YOUR using because there are differences between versions. For instance, gtk version 3.1 introduces several new CSS properities including: "text-shadow"; "box-shadow" and individual border colors. Just change "3.4" in the link below to your version. (See Supported properties):
http://developer.gnome.org/gtk3/3.4/GtkCssProvider.html

Widget specific properties
The widget specific properties are those that can be unique to each widget. (GtkButton, GtkComboBox, ect.) Some widgets share these properties.
Unless it's a standard CSS property, In order to use the style properties listed in the GTK documentation for a particular widget they must be preceded by: -NameOfWidget-
For example to use the GtkCheckButton style property, "indicator-size" you would use: -GtkCheckButton-indicator-size: value
Where value is an integer greater then or equal to zero as mentioned in the documentation.
1. Go to the main page of the documentation for the widget your trying to style.
2. At the top of the page, click on the link: "style properities"
3. Click on the style property you want.
4. In your code use the style property proceeded by -NameOfWidget- as described above.
(See the references section at the bottom of this tutorial for links to the official documentation.)

There is a object hierarchy to everything in GTK. When your at the top of the documentation page for the widget your trying to style, click on "Object Hierarchy"
Anything that falls below GtkWidget in the object hierarchy can be styled with GtkWidget style properties assuming it has that feature.
http://developer.gnome.org/gtk3/stable/GtkWidget.html#GtkWidget.style-properties

Say you want to change the cursor color in a GtkTextView, but if you look at the style properties for GtkTextView there's no such property listed. However if you look at the style properties for GtkWidget there is a "cursor-color" property listed and since GtkWidget is above GtkTextVew in the hierarchy, you can use that to change the cursor color in GtkTextView with: -GtkWidget-cursor-color.
If a widget doesn't have a cursor, like a GtkButton, you're obviously not going to be able to style it. But the property "focus-line-width" is common to several widgets. It's a indicator line on widgets like buttons which shows there's an area that can be clicked. So if your styling a GtkButton you can change this property by using: -GtkWidget-focus-line-width. You don't use: -GtkButton-focus-line-width because "focus-line-width" is listed in the style properties of GtkWidget not GtkButton. There's an example of the "focus-line-width" in the sample code below and a example of "cursor-color" in the GtkTextView tutorial I've posted.

CODE NOTES
Here's an example of changing the background color of a window using internal CSS in Gtk3. I'm using Gtk+-3.2.3 on Ubuntu 11.04 (Natty Narwhal). I've defined the background color using 5 different color units just for illustration. Each statement overrides the previous one, so the end result is the same, a blue background is produced. You could delete any 4 of the 5 and still get a blue background. After the code are a few good references.

Code:
/* Compile with: 
*       gcc -Wall -o csswindow `pkg-config --cflags --libs gtk+-3.0` csswindow.c                           
*/
#include <gtk/gtk.h>

int main (int argc, char *argv[])
{
  GtkWidget *window;
/*--- CSS -----------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*-------------------------*/
  gtk_init (&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

  gtk_window_set_default_size (GTK_WINDOW(window),
                               500, 300);

  g_signal_connect (GTK_WIDGET(window),
                    "destroy",
                    G_CALLBACK (gtk_main_quit),
                    NULL);

/*------  CSS  ----------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);

  gtk_style_context_add_provider_for_screen (screen,
                                 GTK_STYLE_PROVIDER (provider),
                                 GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gtk_css_provider_load_from_data (GTK_CSS_PROVIDER(provider),
                                   " GtkWindow {\n"
                                   "   -GtkWidget-focus-line-width: 0;\n"
/* The next 2 lines are not guaranteed to work, they can be can be overridden by the window manager*/
                                   "   -GtkWindow-resize-grip-height: 0;\n"   
                                   "   -GtkWindow-resize-grip-width: 0;\n"   
/* The next 4 lines are just 4 different ways to make the background blue. Each one overrides the last one.
    Their just different color units: named color units, rgb,  rgba, hexidecimal, and shade*/                     
                                   "   background-color: blue;\n"             
                                   "   background-color: rgb (0, 0, 255);\n" 
                                   "   background-color: rgba (0,0,255,1);\n"
                                   "   background-color: #0000FF;\n"           
                                   "   background-color: shade(blue, 1.0);\n" 
                                   "}\n", -1, NULL);
  g_object_unref (provider);
/*----------------------------------------------------------------------------------------------------------*/

  gtk_widget_show_all (window);
  gtk_main ();
return (0);
}

REFERENCES:
---------------------------------------------------------------------------
Official (gtk3) "Getting Started with GTK+"
http://developer.gnome.org/gtk3/stable/gtk-getting-started.html (Examples work for all versions of gtk3)
Official GTK3 reference manuals online:
gtk+-3.0 http://developer.gnome.org/gtk3/3.0/
gtk+-3.1 http://developer.gnome.org/gtk3/3.1/ (introduces several new css properities, "text-shadow", "box-shadow" individual border colors, ect.)
gtk+-3.2 http://developer.gnome.org/gtk3/3.2/
...I think you can see the pattern. Just change 3.4 to your version
http://developer.gnome.org/gtk3/ (gtk3.x series manual downloads for those that prefer off-line use.)
---------------------------------------------------------------------------
"inofficial" and yet experimental doxygen-generated source code documentation (On-line and downloadable)
http://fossies.org/dox/all.html#G (Search the page for "gtk" to find several versions, This is a very nice resource. )

------ CSS specific ----------------------------------------------------
http://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/
http://blogs.gnome.org/carlosg/2010/08/23/css-like-styling-for-gtk/
http://kalmbach.wordpress.com/2011/03/12/gtk-3-0-client-side-theme/
https://developer.gnome.org/gtk3/3.0/ch25s02.html#gtk-migrating-GtkStyleContext
How Styling Works: https://wiki.gnome.org/Projects/GTK%2B/GTKCSSStyling
---------------------------------------------------------------------------

------ Color Tools and References ------------------------------------------------------
http://www.w3.org/TR/css3-color/
http://maettig.com/?page=PHP/CSS_Color_Converter (Very nice online color conversion tool)
http://www.december.com/html/spec/colorcodes.html (Huge list of color swatches including their rgb,rgb percentage,cmyk,hsl and hex values)
For quick design of color gradients:
http://www.colorzilla.com/gradient-editor/
http://gradients.glrzad.com/
http://www.inkscape.org/en/


Last edited by zerohour on Mon Jul 09, 2012 1:42 am, edited 46 times in total.

Top
 Profile  
 
 Post subject: GTK3 external CSS
PostPosted: Thu Dec 22, 2011 9:20 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
GTK3 with External CSS

The CSS portion of your code can grow quickly and take up a lot of space. Imagine if we had a lot of other widgets, all the space that would take up. To address this we can use an external CSS file, also called a style sheet. Using a style style sheet also allows other people to create a custom look for the program by changing that style sheet. I mentioned this the first tutorial of this series. Previously we used internal CSS, that is, we put all the CSS within the code file but now we'll put it in the style sheet. This is also the idea behind CSS used with HTML for web pages, separate the content from the styling of the content.

This example is the external version of the previous example. Looking at the style sheet, I've shown how to use the same shade of blue as the background color using 5 different color units.
If you added a button to the code you could make it's background red by adding the following to the style sheet:
Code:
GtkButton {
background-color: red;
}

Code:
/* COMPILE WITH:  gcc -Wall -o cssexternal `pkg-config --cflags --libs gtk+-3.0` cssexternal.c */

#include <gtk/gtk.h>
#include <string.h>

int main (int argc, char *argv[])
{
  GtkWidget *window;
/*-- CSS ------------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*---------------------------*/
  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_widget_set_size_request(window, 270, 250);
  gtk_window_set_title(GTK_WINDOW(window), "CSS Window");
  g_signal_connect(G_OBJECT (window), "destroy",
      G_CALLBACK(gtk_main_quit), NULL);

/*---------------- CSS ----------------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);
  gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gsize bytes_written, bytes_read;

  const gchar* home = "YourPathHere";  // your path, for instance: /home/zerohour/Documents/programming/cssexternal.css

  GError *error = 0;
 
   gtk_css_provider_load_from_path (provider,
                                      g_filename_to_utf8(home, strlen(home), &bytes_read, &bytes_written, &error),
                                      NULL);
  g_object_unref (provider);
/*-------------------------------------------------------------------------------------------------------------------------*/

  gtk_widget_show_all(window);
  gtk_main ();
  return 0;
}

The external style sheet: cssexternal.css saved in the same directory as "YourPathNameHere"
Code:
/* The following are all equivalent ways to use the color blue as the background color, each overrides the last so the end result is the same, a blue background. */

GtkWindow {
background-color: blue;  /* named color for background-color, X11/W3C color names, http://en.wikipedia.org/wiki/X11_color_names */
}

GtkWindow {
background-color: rgb (0, 0, 255);  /* rgb for background-color, overrides the previous "background-color" assignment.*/
}

GtkWindow {
background-color: rgba (0,0,255,1); /* rgba for background-color, overrides the previous "background-color" assignment.*/
}

GtkWindow {
background-color: #0000FF;  /* Hexadecimal for background-color, overrides the previous "background-color" assignment.*/
}

@define-color my_shade_of_blue rgba(0,0,255,1);  /* symbolic name for background-color, overrides the previous "background-color" assignment.*/
GtkWindow {
background-color: @my_shade_of_blue; 
}


Last edited by zerohour on Mon Jul 02, 2012 11:37 pm, edited 1 time in total.

Top
 Profile  
 
 Post subject: GTK3 CSS buttons
PostPosted: Thu Dec 22, 2011 9:21 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
GTK3 CSS Buttons

Here's an example of styling a button. Buttons have a lot more styling capabilities than windows, they have some unique attributes. Here I've created a nice rounded edge instead of the standard rectangular button shape.
-GtkWidget-focus-line-width = 0; is a setting that will remove the focus lines. Focus lines are those ugly old-school dotted lines around the button text. Try changing it to other values and experimenting.

This also demonstrates selections by name. Since I named the button mybutton using the function gtk_widget_set_name(), I can refer to it in our CSS using that name preceded by the # symbol, which is called the ID selector in CSS:
http://www.w3.org/TR/css3-selectors/#id-selectors

So as your program grows and you create more buttons or other widgets you can style them all individually by referring to them by name. Since there's only one button in this example, the following two lines are just two different ways of selecting the same button, the last one overrides the first.
" GtkButton {\n"
" #mybutton {\n"


For a list of possible styling attributes refer to the GTK+3 reference manual and:
http://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/

Compatibility Note:
As of GTK 3.4 you must use units in the CSS (unless the value is zero) or you will receive the warning:
Quote:
Not using units is deprecated. Assuming 'px'.

Also you can't have any space between the value and the units or you'll receive the same warning.
As an example, the code in the following line:
" padding: 2;\n"
Would become:
" padding: 2px;\n"

You can use any of the standard CSS units of measurement:
http://www.w3schools.com/cssref/css_units.asp

Code:
/*  Compile with:   gcc -Wall -o cssbutton `pkg-config --cflags --libs gtk+-3.0` cssbutton.c */

#include <gtk/gtk.h>

int main
(int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *button;
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;

  gtk_init (&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

  gtk_window_set_default_size (GTK_WINDOW(window),
                               500, 300);

  g_signal_connect (GTK_WIDGET(window),
                    "destroy",
                    G_CALLBACK (gtk_main_quit),
                    NULL);

  button = gtk_button_new_with_label ("CssButton");

  gtk_widget_set_name (GTK_WIDGET(button),
                       "mybutton");        /* name button so we can apply css to it later */

  gtk_widget_set_halign (GTK_WIDGET(button),
                         GTK_ALIGN_CENTER);

  gtk_widget_set_valign (GTK_WIDGET(button),
                         GTK_ALIGN_CENTER);

  gtk_widget_set_size_request (GTK_WIDGET(button),
                               100, 75);

  gtk_container_add (GTK_CONTAINER(window),
                     button);

  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);

  gtk_style_context_add_provider_for_screen (screen,
                                             GTK_STYLE_PROVIDER (provider),
                                             GTK_STYLE_PROVIDER_PRIORITY_USER);

  gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider),
                                               " GtkWindow {\n"                         
                                               "   background-color: tan;\n"
                                               "}\n"
                                               " GtkButton {\n"                         
                                               "   -GtkWidget-focus-line-width: 0;\n"
                                               "   border-radius: 15;\n"
                                               "   font: Sans 16;\n"
                                               "   background-color: blue;\n"
                                               "   color: white;\n"         /* font color */   
                                               "   border-style: outset;\n"
                                               "   border-width: 2;\n"
                                               "   padding: 2;\n"
                                               "}\n"
                                               " #mybutton {\n"                         
                                               "   -GtkWidget-focus-line-width: 0;\n"
                                               "   border-radius: 15;\n"
                                               "   font: Sans 16;\n"
                                               "   background-color: blue;\n"
                                               "   color: white;\n"         /* font color */   
                                               "   border-style: outset;\n"
                                               "   border-width: 2;\n"
                                               "   padding: 2;\n"   
                                               "}\n", -1, NULL);
  g_object_unref (provider);
  gtk_widget_show_all (window);
  gtk_main ();
  return (0);
}


Last edited by zerohour on Tue Jul 10, 2012 1:18 am, edited 4 times in total.

Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Thu Dec 22, 2011 9:24 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Gtk3 CSS Buttons II

Let's extend the last button example a little further and create a nicer looking button by using a linear gradient color and theming the different button states: hover (prelight) and active. Those references I gave earlier will come in handy now:
For quick design of color gradients:
http://www.colorzilla.com/gradient-editor/
http://gradients.glrzad.com/
Refer to the Gtk3 GtkCssProvider documentation for more details on gradients.
Attachment:
cssbutton.png
cssbutton.png [ 108.39 KiB | Viewed 69075 times ]

Code:
/* COMPILE WITH:  gcc -Wall -o cssbutton `pkg-config --cflags --libs gtk+-3.0` cssbutton.c */

#include <gtk/gtk.h>
#include <string.h>

int main (int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *button;
/*-- CSS ------------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*---------------------------*/
  gtk_init(&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

  gtk_window_set_position (GTK_WINDOW(window),
                           GTK_WIN_POS_CENTER);

  gtk_widget_set_size_request (window,
                               180,160);

  gtk_window_set_title (GTK_WINDOW(window),
                        "CSS Button");

  g_signal_connect (G_OBJECT(window),
                    "destroy",
                    G_CALLBACK(gtk_main_quit),
                    NULL);

  button = gtk_button_new_with_label ("CssButton");

  gtk_widget_set_name (GTK_WIDGET(button),
                       "mybutton");        // name button so we can apply css to it later

  gtk_widget_set_halign (GTK_WIDGET(button),
                         GTK_ALIGN_CENTER);

  gtk_widget_set_valign (GTK_WIDGET(button),
                         GTK_ALIGN_CENTER);

  gtk_widget_set_size_request (GTK_WIDGET(button),
                               150,100);

  gtk_container_add (GTK_CONTAINER(window),
                     GTK_WIDGET(button));

/*---------------- CSS ----------------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);
  gtk_style_context_add_provider_for_screen (screen,
                       GTK_STYLE_PROVIDER(provider),
                       GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gsize bytes_written, bytes_read;

  const gchar* home = "YourPathHere";   // for example:  /home/zerohour/gtk/cssbutton.css 

  GError *error = 0;

   gtk_css_provider_load_from_path (provider,
                                    g_filename_to_utf8(home, strlen(home), &bytes_read, &bytes_written, &error),
                                    NULL);
  g_object_unref (provider);
/*-------------------------------------------------------------------------------------------------------------------------*/

  gtk_widget_show_all(window);
  gtk_main ();
  return 0;
}

The External CSS: cssbutton.css
Code:
GtkWindow {
background-color: rgb(220,218,213); /* replicate default background window color  */
}

@define-color btn_basecolor rgba(0,0,255,1);

/* Theme button in it's normal state */
GtkButton {
-GtkWidget-focus-line-width: 0;
border-radius: 20;
border-width: 1 1 1 1;
font: Sans 16;
color: black;
background-image: -gtk-gradient (linear,
             left top,
             left bottom,
             color-stop(0.0,rgba(34,97,170,1)),
             color-stop(0.50,rgba(56,145,218,1)),
             color-stop(0.51,rgba(34,131,216,1)),
             color-stop(1.00,rgba(134,191,234,1)));
}

/* Theme button when the mouse pointer's on it, both are equivalent */
GtkButton:hover,
GtkButton:prelight {
background-image: -gtk-gradient (linear,
             left top,
             left bottom,
             color-stop(0.0,rgba(30,87,153,1)),
             color-stop(0.50,rgba(41,137,216,1)),
             color-stop(0.51,rgba(32,124,202,1)),
             color-stop(1.00,rgba(125,185,232,1)));

}
/* Theme button when it's active (pressed) AND has pointer over it.  */
GtkButton:hover:active {
color: white;
border-width: 3 3 3 3;
background-image: -gtk-gradient (linear,
             left top,
             left bottom,
             color-stop(0.0,rgba(28,82,144,1)),
             color-stop(0.50,rgba(37,129,205,1)),
             color-stop(0.51,rgba(30,115,190,1)),
             color-stop(1.00,rgba(107,176,229,1)));
}


Last edited by zerohour on Mon Jan 09, 2012 12:44 am, edited 3 times in total.

Top
 Profile  
 
 Post subject: gtk3 css GtkNotebook
PostPosted: Thu Dec 22, 2011 9:24 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Styling a Notebook with gtk3 and css

Here's an example of styling a GtkNotebook with CSS. This example uses a external style sheet. The notebook has three tabs with a nice radius applied. Each tab has a different background color, font, font color and font size. The main window uses a different background color as well.

CSS in Gtk3 is a subset of the CSS3 standard and doesn't support all properties. Specifically for GtkNotebook, Gtk supports the selectors: first, last, odd, even and nth-child(N), where N is odd, even, first or last. In CSS3 you can use an integer index for N, but NOT in GTK. So you are limited to setting different background colors for a max of three tabs. See the documentation:
"Widgets can also add regions with flags to their context. The regions used by GTK+ widgets are:" Listed Under: "Style classes and regions"
http://developer.gnome.org/gtk3/stable/GtkStyleContext.html
Attachment:
cssnotebook.png
cssnotebook.png [ 13.38 KiB | Viewed 69272 times ]

Code:
/*  Compile with: *  gcc -Wall -o cssnotebook `pkg-config --cflags --libs gtk+-3.0` cssnotebook.c */

#include <gtk/gtk.h>
#include <string.h>

int main(int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *mynotebook;
  GtkWidget *grid; 

  gtk_init (&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_default_size (GTK_WINDOW(window),
                               350, 300);
  g_signal_connect (GTK_WIDGET(window),
                    "destroy",
                    G_CALLBACK (gtk_main_quit),
                    NULL);

  mynotebook = gtk_notebook_new ();
  gtk_widget_set_name (GTK_WIDGET(mynotebook),
                       "notebook");
  gtk_notebook_set_tab_pos (GTK_NOTEBOOK(mynotebook),
                            GTK_POS_TOP);
  gtk_notebook_set_show_border (GTK_NOTEBOOK(mynotebook), FALSE);

/*----------- PAGE 1 -------------------------------------------------*/
  grid = gtk_grid_new();
  GtkWidget *first_label = gtk_label_new ("FirstTab");
  gtk_widget_set_name (GTK_WIDGET(first_label),
                       "first_tab_label");
/*----------------------------------------------------------------------*/

  gtk_container_add (GTK_CONTAINER(window),
                     GTK_WIDGET(mynotebook));
  gtk_container_add (GTK_CONTAINER(mynotebook),
                     GTK_WIDGET(grid));
  gtk_notebook_set_tab_label (GTK_NOTEBOOK(mynotebook),
                     GTK_WIDGET(grid),
                     GTK_WIDGET(first_label));

/*----------- PAGE 2 -----------------------------------------------------------------------------*/
  GtkWidget *grid2 = gtk_grid_new ();
  GtkWidget *second_label = gtk_label_new ("SecondTab");
  gtk_widget_set_name (GTK_WIDGET(second_label),
                       "second_tab_label");
  gtk_notebook_insert_page (GTK_NOTEBOOK(mynotebook),
                            GTK_WIDGET(grid2),
                            GTK_WIDGET(second_label),
                            -1);
/*-------------------------------------------------------------------------------------------------------*/

/*----------- PAGE 3 ---------------------------------------------------------------------------------*/
  GtkWidget *grid3 = gtk_grid_new ();
  GtkWidget *third_label = gtk_label_new ("ThirdTab");
  gtk_widget_set_name (GTK_WIDGET(third_label),
                       "third_tab_label");
  gtk_notebook_insert_page (GTK_NOTEBOOK(mynotebook),
                           GTK_WIDGET(grid3),
                           GTK_WIDGET(third_label),
                           -1);
/*----------------------------------------------------------------------------------------------------------*/

/*------------ CSS ---------------------------------------------------------------------------------------------------*/
  GtkCssProvider *provider = gtk_css_provider_new ();
  GdkDisplay *display = gdk_display_get_default ();
  GdkScreen *screen = gdk_display_get_default_screen (display);

  gtk_style_context_add_provider_for_screen (screen,
                                             GTK_STYLE_PROVIDER(provider),
                                             GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gsize bytes_written, bytes_read;
   
  const gchar* home = "YourPathHere";  // your path, for instance: /home/zerohour/Documents/programming/cssnotebook.css

  GError *error = 0;
 
   gtk_css_provider_load_from_path (provider,
                                    g_filename_to_utf8(home, strlen(home), &bytes_read, &bytes_written, &error),
                                    NULL);
  g_object_unref (provider);
/*------------------------------------------------------------------------------------------------------------------*/

  gtk_widget_show_all(window);
  gtk_main();
return(0);
}

Here is the external style sheet: cssnotebook.css
Code:
GtkWindow {
background-color: Gainsboro;  /* named color for background-color, X11/W3C color names, http://en.wikipedia.org/wiki/X11_color_names */
}

GtkNotebook {                      /*------  OR use " GtkNotebook#notebook OR GtkNotebook.mynotebook  */ 
-GtkWidget-focus-line-width: 0;    /* Remove focus line (dotted line) around text on all tabs */
-GtkNotebook-tab-overlap: 0; 
padding: 10 20 10 20;
border-radius: 15; 
border-width: 0;               
}   
                                                   
GtkNotebook tab:nth-child(first) {  /* first tab "FirstTab */
background-color: blue;             /* tab background color */
color: red;                         /* tab font color */
font: Sans 12;                      /* tab font & font size */
}

GtkNotebook tab:nth-child(even) {  /* Second tab "SecondTab" */
background-color: orange;         
color: white;                     
font: Serif 18;               
}

GtkNotebook tab:nth-child(last) {  /* Third tab "Thirdtab" */
background-color: red;
font: Serif italic 10;
}

GtkLabel.first_label {        /* another way to select tab label */
color: green;                 /* overides last font color selection  */
font: Serif italic 10;        /* overides last font & font size selection */
}

GtkLabel#second_tab_label {    /* select tab label by name */
color: blue;                      /* overides last font color selection */
font: Bitstream Charter 14;     /* overides last font & font size selection */
}

GtkLabel#third_tab_label {      /* select tab label by name again */
color: green;                     /* overides last font color selection */
font: Sans 12;                     /* overides last font & font size selection */
}


Last edited by zerohour on Mon Jul 02, 2012 11:46 pm, edited 3 times in total.

Top
 Profile  
 
 Post subject: GtkTreeView with Gtk3 Css
PostPosted: Sat Jan 21, 2012 1:24 am 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Styling a list in a GtkTreeView with Gtk3 and Css
Attachment:
GtkTreeView.png
GtkTreeView.png [ 198.39 KiB | Viewed 67533 times ]

Here's an example of styling a list in a GtkTreeView with GTK3 and CSS. I've used alternating row colors. This is done with the following line in the code:
Code:
gtk_tree_view_set_rules_hint(GTK_TREE_VIEW(list), TRUE);

And in the css file with the selectors:
row:nth-child(even)
row:nth-child(odd)
GtkTreeView:selected


The column header, (The area with the text "Settings") is actually a button so it's styled using: column-header .button
Since it's a button, you can apply all the properties that can used on any other button. Here I've changed the border radius; the font, font size and font color. I've also centered the column header text using: gtk_tree_view_column_set_alignment
Or if you don't want to use a header at all, remove the following in the css file:
Code:
column-header .button {
color: #1C6F3B;
background-image: -gtk-gradient(linear,
            left top,
            left bottom,
            color-stop(0.0,rgba(243,226,199,1)),
            color-stop(0.83,rgba(193,158,103,1)),
            color-stop(1.00,rgba(233,212,179,1)));
}

Then change "TRUE" to "FALSE" in the following line:
gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(list), TRUE);

Another added touch is something that's not mentioned in the documentation. It's the support for the CSS border radius property applied to individual corners. Here I've add a radius to just the top-left and top-right of the header.
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:

Code:
/* COMPILE WITH: gcc -Wall -o tree1 `pkg-config --cflags --libs gtk+-3.0` tree1.c  */

#include <gtk/gtk.h>
#include <string.h>  /* for CSS */
enum
{
  LIST_ITEM = 0,
  N_COLUMNS
};

static void
init_list(GtkWidget *list)
{
  GtkCellRenderer *renderer;
  GtkTreeViewColumn *column;
  GtkListStore *store;
/*-- CSS ------------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*---------------------------*/

/*---------------- CSS ----------------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);
  gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gsize bytes_written, bytes_read;

  const gchar* home = "YourPathHere";    // For instance:  /home/zerohour/gtk/tree1.css

  GError *error = 0;

  gtk_css_provider_load_from_path (provider,
                                   g_filename_to_utf8(home, strlen(home),
                                   &bytes_read, &bytes_written, &error),
                                   NULL);
  g_object_unref (provider);
/*-------------------------------------------------------------------------------------------------------------------------*/
  renderer = gtk_cell_renderer_text_new();
  column = gtk_tree_view_column_new_with_attributes("Settings",
          renderer, "text", LIST_ITEM, NULL);
  gtk_tree_view_append_column(GTK_TREE_VIEW(list), column);

  store = gtk_list_store_new(N_COLUMNS, G_TYPE_STRING);

  gtk_tree_view_set_model(GTK_TREE_VIEW(list), GTK_TREE_MODEL(store));

  gtk_tree_view_column_set_alignment(GTK_TREE_VIEW_COLUMN(column), 0.5);

  g_object_unref(store);
}

static void
add_to_list(GtkWidget *list, const gchar *str)
{
  GtkListStore *store;
  GtkTreeIter iter;

  store = GTK_LIST_STORE(gtk_tree_view_get_model
      (GTK_TREE_VIEW(list)));

  gtk_list_store_append(store, &iter);
  gtk_list_store_set(store, &iter, LIST_ITEM, str, -1);
}

int main (int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *list;
  GtkWidget *vbox;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_container_set_border_width(GTK_CONTAINER(window), 10);
  gtk_widget_set_size_request(window, 270, 200);
  gtk_window_set_title(GTK_WINDOW(window), "CSS List View");

  list = gtk_tree_view_new();
  gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(list), TRUE);

  gtk_tree_view_set_rules_hint(GTK_TREE_VIEW(list), TRUE);   /* To allow css to set alternating row colors  */

  vbox = gtk_vbox_new(FALSE, 0);
  gtk_box_pack_start(GTK_BOX(vbox), list, TRUE, TRUE, 5);
  gtk_container_add(GTK_CONTAINER(window), vbox);

  init_list(list);
  add_to_list(list, "First");
  add_to_list(list, "Second");
  add_to_list(list, "Third");
  add_to_list(list, "Fourth");
  add_to_list(list, "Fifth");

  g_signal_connect(G_OBJECT (window), "destroy",
      G_CALLBACK(gtk_main_quit), NULL);

  gtk_widget_show_all(window);
  gtk_main ();
  return 0;
}



Here's the external style sheet: tree1.css
Code:
GtkWindow {
background-color: #646870;    /*  CadetBlue  */
}

GtkTreeView {
-GtkWidget-focus-line-width: 0;
-GtkTreeView-vertical-separator: 10;  /* height of cells */
background-color: #646870;   /*  CadetBlue  */
}

GtkTreeView row:nth-child(odd) {
background-image: -gtk-gradient(linear,
            left top,
            left bottom,
            color-stop(0,#e3e4eb),
            color-stop(.42,#e3e4eb),
            color-stop(1.0,#91949d));
}

GtkTreeView row:nth-child(even) {
background-image: -gtk-gradient(linear,
            left top,
            left bottom,
            color-stop(0,#d5d7e1),
            color-stop(.32,#d5d7e1),
            color-stop(1.0,#60636c));
}

GtkTreeView:selected {
background-image: -gtk-gradient (linear,
             left top,
             left bottom,
             color-stop(0.0,rgba(34,97,170,1)),
             color-stop(0.50,rgba(56,145,218,1)),
             color-stop(0.51,rgba(34,131,216,1)),
             color-stop(1.00,rgba(134,191,234,1)));
}

column-header .button {
color: #1C6F3B;
border-top-left-radius: 10;
border-top-right-radius: 10;
font: Sans 16;
background-image: -gtk-gradient(linear,
            left top,
            left bottom,
            color-stop(0.0,rgba(243,226,199,1)),
            color-stop(0.83,rgba(193,158,103,1)),
            color-stop(1.00,rgba(233,212,179,1)));
}


References:
http://developer.gnome.org/gtk3/3.4/GtkTreeView.html
http://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/


Last edited by zerohour on Sun Jul 08, 2012 11:11 pm, edited 10 times in total.

Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 38 posts ]  Go to page 1, 2, 3  Next

All times are UTC


Who is online

Users browsing this forum: No registered users and 2 guests


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

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group