It is currently Fri Mar 29, 2024 2:00 am


All times are UTC - 5 hours [ DST ]



Post new topic Reply to topic  [ 64 posts ]  Go to page 1, 2, 3, 4  Next
Author Message
 Post subject: GIMP Themes - Getting Started
PostPosted: Thu Jun 12, 2014 12:39 pm  (#1) 
Offline
Script Coder
User avatar

Joined: Jun 22, 2010
Posts: 1171
Location: Here and there
This is the start of a quick guide to making a theme for GIMP.

It should be stated that I'm making this up as I go along, so if anybody who knows how to do this properly is reading:
a) Why haven't you done this before me?
b) What have I got wrong?

I have attached a zipped theme folder that contains an incomplete theme, but at this point I'd welcome volunteers to try installing it as I don't know how well it works on other (i.e. non Windows) operating systems.

Be warned, the colours are a bit extreme, but it is useful to detect which parts of the user interface have been successfully themed:
Attachment:
Untitled.png
Untitled.png [ 484.89 KiB | Viewed 24378 times ]


You will need to extract the Test-Theme folder from the zip file and put it into your personal GIMP themes folder. Then start GIMP and go to the Edit>>Preferences>>Theme and select Theme-Test. You should now re-start GIMP.

I would appreciate a screenshot from anyone whose GIMP doesn't look like the pink monstrosity above, along with info about your GIMP version and operating system and we will try to diagnose what to do to get your GIMP looking the same.

Next time I'll start explaining the gtkrc file in the theme folder, so if you want to get ahead of the game, have a look for yourself and maybe change the colour scheme.

Kevin


Attachments:
Theme-Test.zip [42.97 KiB]
Downloaded 880 times
Share on Facebook Share on Twitter Share on Orkut Share on Digg Share on MySpace Share on Delicious Share on Technorati
Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Thu Jun 12, 2014 1:59 pm  (#2) 
Offline
GimpChat Member

Joined: May 23, 2012
Posts: 150
Image
nice theme paynekj


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Thu Jun 12, 2014 2:28 pm  (#3) 
Offline
Global Moderator
User avatar

Joined: Apr 07, 2010
Posts: 14182
Cool Kevin, it works, first try. Everything is pink, even the drop downs
Image

_________________
Image


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Thu Jun 12, 2014 4:41 pm  (#4) 
Offline
GimpChat Member

Joined: Oct 02, 2010
Posts: 106
Hallo, it works even by me as far I test and I even manage to change colour in gtkrc file. What I not found is font size. :)


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 2:32 am  (#5) 
Offline
Administrator
User avatar

Joined: Aug 10, 2012
Posts: 12978
Location: Native to NYC living in Arizona, Gimp 2.8 & 2.10, Win 11 PC.
Looks cool, thanks for posting it and all your work.

_________________
Image
"A wise man learns more from a foolish question than a fool can learn from a wise answer"
Image


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 4:18 am  (#6) 
Offline
Script Coder
User avatar

Joined: Jun 22, 2010
Posts: 1171
Location: Here and there
As abraess has asked about fonts, I'll include that in this part.

The gtkrc file controls the styling applied to GIMP. You first define a style, then apply it to the appropriate widgets (buttons, menus, rulers etc)

The gtkrc file I have made for Theme-Test looks like this so-far:
# pixmap_path "<dir 1>:<dir 2>:<dir 3>:..."
#
# include "rc-file"
#
# style <name> [= <name>]
# {
#   <option>
# }
#
# widget <widget_set> style <style_name>
# widget_class <widget_class_set> style <style_name>
# Here's a good reference to the pixmap engine: https://wiki.gnome.org/Attic/GnomeArt/Tutorials/GtkEngines/PixmapEngine
# GIMP Widgets: http://developer.gimp.org/api/2.0/libgimpwidgets/index.html
# Another guide to gtkrc: http://orford.org/gtk/

# Named colors from https://www.ncl.ucar.edu/Document/Graphics/named_colors.shtml
# colour control: https://wiki.gnome.org/Attic/GnomeArt/Tutorials/GtkThemes/SymbolicColors
gtk_color_scheme = "fg_color:midnightblue"
gtk_color_scheme = "bg_color:hotpink"
gtk_color_scheme = "base_color:cadetblue"
gtk_color_scheme = "text_color:palegreen"
gtk_color_scheme = "selected_bg_color:slateblue"
gtk_color_scheme = "selected_fg_color:sienna1"
gtk_color_scheme = "tooltip_bg_color:green"
gtk_color_scheme = "tooltip_fg_color:black"

# darker is equivalent to shade(0.7, colour)
# lighter is equivalent to shade(1.3, @bg_color)
style "gimp-default-style"
{
  # bg is the background
  bg[NORMAL]      = @bg_color
  bg[ACTIVE]      = shade (1.8, @bg_color)
  bg[PRELIGHT]      = lighter (@bg_color)       
  bg[INSENSITIVE]   = lighter (@bg_color)
  bg[SELECTED]      = shade (1.8, @bg_color)

  # fg is foreground - i.e. font colour
  fg[NORMAL]      = @fg_color
  fg[ACTIVE]      = shade (1.8, @fg_color)
  fg[PRELIGHT]      = lighter (@fg_color)
  fg[INSENSITIVE]   = lighter (@fg_color)
  fg[SELECTED]      = shade (1.8, @fg_color)

  # base is the background for editable text
  base[NORMAL]      = @base_color
  base[ACTIVE]      = shade (1.8, @base_color)
  base[PRELIGHT]   = lighter (@base_color)
  base[INSENSITIVE]   = lighter (@base_color)
  base[SELECTED]   = darker (@base_color) 

  # text is the font colour of editable text
  text[NORMAL]      = @text_color
  text[ACTIVE]      = shade (1.8, @text_color)
  text[PRELIGHT]   = lighter (@text_color)
  text[INSENSITIVE]   = lighter (@text_color)
  text[SELECTED]   = shade (1.8, @text_color)
 
#  bg_pixmap[NORMAL] = "bg.png"
  font_name = "Vladimir Script 14"
}
class "GtkWidget" style "gimp-default-style"  # style everything that derives from a GtkWidget with the default style

include "rc_buttons.rc"
class "GtkButton"               style "buttons"

include "rc_menu.rc"
widget_class "*GtkMenu*"      style:highest "menu"

include "rc_tabs.rc"
class "GtkNotebook"             style "tabs"
widget_class "*<GtkNotebook>"       style "tabs" # this gets the toolbox tabs styled

include "rc_scrollbars.rc"
widget_class "*Scrollbar*"      style "scrollbars"   # this hits the window scrollbar and not the range scrolls
Note that comments start with a #

It starts by defining the gtk_color_scheme with named colour variables (fg_color, bg_color etc) and in this instance named colour values (midnightblue, hotpink etc)

By using colour variables we can re-use the name and only have to define the colour value once.
Colour values can be specified using named colours or by using Hexadecimal numbers: #F00 #FF0000.
So for instance you could define bg_colour as gtk_color_scheme = "bg_color:#FF0000" to make it red. (Hex values are Red Green Blue).

Now we move onto the first style, which here is named "gimp-default-style", but could be named anything you want.

Here we are defining the colours for the style
    bg - which is the background colour for most things
    fg - which is the foreground colour for text labels etc.
    base - which is the background colour for editable text
    text - which is the foreground colour (font colour) for editable text
These are not the only uses for these colours - the best way to find out where they are used is to experiment by altering the colours and seeing what changes.

Each colour has five states defined
    NORMAL - The usual state
    PRELIGHT - The state when the mouse pointer is hovered over the widget
    ACTIVE - When the widget is active i.e. being clicked on
    INSENSITIVE - When the widget is disabled
    SELECTED - When a widget is selected
Not all of these are used for every widget.

For each of the colours, I have defined the NORMAL colour to be the colours in the gtk_color_scheme. i.e. fg[NORMAL] = fg_color just to be consistant. There is nothing to stop you defining fg[NORMAL] = base_color.

For the other states I have defined the colours relative to the NORMAL color by using the shade, lighter and darker functions. A value of greater than 1 passed to the shade function will lighten the colour and a value less than 1 will darken the colour. The lighter and darker functions are just shorter ways of passing 1.3 and 0.7 to the shade function. Again, experiment to see what happens.

Now we have a style defined, we need to apply it to our widgets:
class "GtkWidget" style "gimp-default-style"

This will apply our style to every widget that is based on a GtkWidget, which should be most things. By being more specific about which widgets to apply the style to we can control the look of GIMP to quite a fine degree.

Now for abress, fonts.

If we add the following line to the gimp-default-style, then we will set the font for all of GIMP:
font_name = "mono 14"


Alternatively with
font_name = "Vladimir Script 14"
I get this:
Attachment:
gimp_fonts.png
gimp_fonts.png [ 217.62 KiB | Viewed 24287 times ]


Are there any questions?

Kevin


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 4:33 am  (#7) 
Offline
Global Moderator
User avatar

Joined: Apr 07, 2010
Posts: 14182
Wow Kevin, that is a lot of work. It is way above me to try something like that.

_________________
Image


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 4:39 am  (#8) 
Offline
Script Coder
User avatar

Joined: Jun 22, 2010
Posts: 1171
Location: Here and there
molly wrote:
Wow Kevin, that is a lot of work. It is way above me to try something like that.


I disagree. You've already edited Warriors' theme to get it working. My intention was to give everyone a starting theme that they could play with in small steps.

Kevin


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 4:49 am  (#9) 
Offline
Global Moderator
User avatar

Joined: Apr 07, 2010
Posts: 14182
Hey Kevin, I did it, I changed the font to Latha Bold-16. I put it at the bottom but it didn't work so I looked at yours again and I put mine in the same place.
Image

_________________
Image


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 6:15 am  (#10) 
Offline
Script Coder
User avatar

Joined: Jun 22, 2010
Posts: 1171
Location: Here and there
molly wrote:
I did edit it but I just copied and pasted what you laid out. That was the easy part.
I would like to make the font bigger and bolder though.


Like I said, I'm making this up as I go along ;) So now I've learned how the font descriptions work: http://www.pygtk.org/pygtk2reference/cl ... ption.html

Basically you specify "[FAMILY-LIST] [STYLE-OPTIONS] [SIZE]"

For example "sans bold 12"

By experiment I found that if you want to specify a font family with spaces in the name, then add a comma after the name: "times new roman, bold italic 12"

Kevin


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 8:08 am  (#11) 
Offline
Global Moderator
User avatar

Joined: Apr 07, 2010
Posts: 14182
I have been trying to change the drop down windows, instead of all pink, I want another color. I don't seem to be able to figure what line it is.
Edit: I got the text changed, it is under fg color.
How do I change the colors of the drop down windows?

_________________
Image


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 8:27 am  (#12) 
Offline
Script Coder
User avatar

Joined: Jun 22, 2010
Posts: 1171
Location: Here and there
molly wrote:
I have been trying to change the drop down windows, instead of all pink, I want another color. I don't seem to be able to figure what line it is.
Edit: I got the text changed, it is under fg color.
How do I change the colors of the drop down windows?


You're jumping ahead of the lessons here :)

For some reason, the
class "GtkWidget" style "gimp-default-style"
doesn't style the menubar and menus, so there's another style definition for those:
include "rc_menu.rc"
widget_class "*GtkMenu*"      style:highest "menu"


Which is telling GTK to load the file "rc_menu.rc" and to apply the "menu" style (defined in the file) to the menu widget classes.

So to alter the styling for the menus, you have to edit the rc_menu.rc file:
style "menu" = "gimp-default-style"
{
  xthickness = 1
  ythickness = 4
}

You would need to add the bg[NORMAL] etc. code to this "menu" style, for example
style "menu" = "gimp-default-style"
{
  xthickness = 1
  ythickness = 4
  bg[NORMAL] = "yellow"
}

Try it to see what happens, but I think it's probably not what you want as it will style the menu bar as well - which is a hint as to what I'll show you next, but I'm not really going to have time to do that until Monday. So this might be a good moment for someone else to jump in and explain the next step.

Kevin


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 8:35 am  (#13) 
Offline
Global Moderator
User avatar

Joined: Apr 07, 2010
Posts: 14182
Thanks Kevin, I will wait till Monday, anyway, I didn't know I was jumping ahead. I just couldn't understand why I couldn't change those pink drop downs so they wouldn't be the same color as the pink that is there now.

_________________
Image


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 8:48 am  (#14) 
Offline
GimpChat Member
User avatar

Joined: Jun 02, 2013
Posts: 2075
Nice work. When I did the Teal Appeal theme, my first, I would make an icon a bright red, and install it, because it would stick out, and I would be able to easily tell what it was for. Same with the gtkrc. Changed the color code to bright red, which would obviously stick out compared to the teal and bright green.

_________________
Image


Last edited by The Warrior on Fri Jun 13, 2014 9:31 am, edited 1 time in total.

Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 8:57 am  (#15) 
Offline
Global Moderator
User avatar

Joined: Apr 07, 2010
Posts: 14182
Where did you change the color code in gtkrc? do you have a screen shot, this is all very foreign to me so I am practising on Kevin's pink test script

_________________
Image


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 11:03 am  (#16) 
Offline
Script Coder
User avatar

Joined: Jun 22, 2010
Posts: 1171
Location: Here and there
One final thing before the weekend:

In the gtkrc file we have started with, I applied a single theme to all widgets with "Menu" in their name, but now Molly has a requirement to separate out the styles for the menubar and the menus.

So we will need to create suitable styles in the rc_menu.rc file:
style "menu" = "gimp-default-style"
{
  fg[NORMAL] = "blue"
  fg[PRELIGHT] = "#FF0000"
  bg[NORMAL] = "yellow"
  bg[PRELIGHT] = "green"
}

style "menubar" = "gimp-default-style"
{
}

So here the menubar just defaults to "gimp-default-style", but the menu has some new fg and bg colours defined.

Back in the gtkrc we need to apply these styles, replacing the original code with this:
include "rc_menu.rc"
widget_class "*<GtkMenu>*"      style:highest "menu"
widget_class "*<GtkMenuBar>*"      style:highest "menubar"
and now we are applying different styles to the different types of widget.

Attachment:
Untitled.png
Untitled.png [ 11.33 KiB | Viewed 4957 times ]


Kevin


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Fri Jun 13, 2014 12:06 pm  (#17) 
Offline
Global Moderator
User avatar

Joined: Apr 07, 2010
Posts: 14182
I am having fun playing with this. new text and new colors.
Image

_________________
Image


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Mon Jun 16, 2014 6:06 am  (#18) 
Offline
GimpChat Member

Joined: Oct 02, 2010
Posts: 106
Hallo, with the rc_menu.rc I have problem that not all Name of colour seem to work or have this to do with version of Gimp. I try this tutorial on Computer where Gimp 2.6.11 on it?
style "menu" = "gimp-default-style"
{
  fg[NORMAL] = "magenta"
  fg[PRELIGHT] = "darkblue"
  bg[NORMAL] = "pink"
  bg[PRELIGHT] = "black"
  xthickness = 1
  ythickness = 4
}

thank you


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Mon Jun 16, 2014 6:33 am  (#19) 
Offline
Script Coder
User avatar

Joined: Jun 22, 2010
Posts: 1171
Location: Here and there
I don't think there's anything wrong with your colour names - the ones you have specified work on my GIMP 2.6.7 on Windows 7

Make sure you made the changes to the gtkrc file as well:
include "rc_menu.rc"
widget_class "*<GtkMenu>*"      style:highest "menu"
widget_class "*<GtkMenuBar>*"      style:highest "menubar"


Kevin


Top
 Post subject: Re: GIMP Themes - Getting Started
PostPosted: Mon Jun 16, 2014 7:17 am  (#20) 
Offline
GimpChat Member

Joined: Oct 02, 2010
Posts: 106
Hallo Kevin,
I think the gtkrc is not problem. What problem is that see word like Save by start that is one I not chose.
I try take colour like hotpink4 form
https://www.ncl.ucar.edu/Document/Graph ... lors.shtml and not work.
I add screenshot German version of Gimp.
Thank your
Andrew


Attachments:
File comment: one test
Gimptheme.jpg
Gimptheme.jpg [ 165.93 KiB | Viewed 4955 times ]
Top
Post new topic Reply to topic  [ 64 posts ]  Go to page 1, 2, 3, 4  Next

All times are UTC - 5 hours [ DST ]


   Similar Topics   Replies 
No new posts I could use some help getting started with a plugin on Windows

2

No new posts Attachment(s) Clearlooks Gimp 2.10 Color Hinted Themes

31



* Login  



Powered by phpBB3 © phpBB Group