GIMP Themes - Getting Started

paynekj · **Posted:** Fri Jun 20, 2014 3:32 am **(#31)**

Mikechat wrote:

well that last post was all about Kevin
maybe i should one about me if
it don't offend you.

No problem and I hope it was a good beer you were enjoying

Kevin

Coming soon... Scrollbars

paynekj · **Posted:** Fri Jun 20, 2014 7:09 am **(#32)**

Scrollbars

These are made from several elements, each of which can be styled and have can have different images for each of the standard states.

Here is a image to point out the various elements:

Attachment:

gimp_scrollbars.png [ 574.26 KiB | Viewed 8368 times ]

And the associated code in rc_scrollbars.rc is this:

Code: Select all

style "scrollbars" = "gimp-default-style" # For scrollbars - for example the Image window scrollbars
{
  engine "pixmap"
  {
    image
    {
      function      = BOX
      recolorable   = TRUE
      detail      = "trough"
      file         = "/scrollbars/trough-scrollbar-horiz.png"
      border      = { 1, 1, 1, 1}
      stretch      = TRUE
      orientation   = HORIZONTAL
    }

    image
    {
      function      = BOX
      recolorable   = TRUE
      detail      = "trough"
      file         = "/scrollbars/trough-scrollbar-vert.png"
      border      = { 1, 1, 1, 1}
      stretch      = TRUE
      orientation   = VERTICAL
    }

    image
    {
      function      = SLIDER
      recolorable   = TRUE
      state         = NORMAL
      file         = "/scrollbars/slider-normal.png"
      border      = { 2, 2, 2, 2}
      stretch      = TRUE
      orientation   = HORIZONTAL
    }

    image
    {
      function      = SLIDER
      recolorable   = TRUE
      state         = PRELIGHT
      file         = "/scrollbars/slider-prelight.png"
      border      = { 2, 2, 2, 2}
      stretch      = TRUE
      overlay_file      = "/scrollbars/slider-horiz-over.png"
      overlay_border   = { 2, 2, 2, 2}
      overlay_stretch   = FALSE
      orientation      = HORIZONTAL
    }

    image
    {
      function      = SLIDER
      recolorable   = TRUE
      state         = ACTIVE
      file         = "/scrollbars/slider-prelight.png"
      border      = { 2, 2, 2, 2}
      stretch      = TRUE
      orientation   = HORIZONTAL
    }

    image
    {
      function      = SLIDER
      recolorable   = TRUE
      state         = INSENSITIVE
      file         = "/scrollbars/slider-insensitive.png"
      border      = { 2, 2, 2, 2}
      stretch      = TRUE
      orientation   = HORIZONTAL
    }

    image
    {
      function      = SLIDER
      recolorable   = TRUE
      state         = NORMAL
      file         = "/scrollbars/slider-normal.png"
      border      = { 2, 2, 2, 2}
      stretch      = TRUE
      orientation   = VERTICAL
    }

    image
    {
      function      = SLIDER
      recolorable   = TRUE
      state         = PRELIGHT
      file         = "/scrollbars/slider-prelight.png"
      border      = { 2, 2, 2, 2}
      stretch      = TRUE
      overlay_file      = "/scrollbars/slider-vert-over.png"
      overlay_border   = { 2, 2, 2, 2}
      overlay_stretch   = FALSE
      orientation      = VERTICAL
    }

    image
    {
      function      = SLIDER
      recolorable   = TRUE
      state         = ACTIVE
      file         = "/scrollbars/slider-prelight.png"
      border      = { 2, 2, 2, 2}
      stretch      = TRUE
      orientation   = VERTICAL
    }

    image
    {
      function      = SLIDER
      recolorable   = TRUE
      state         = INSENSITIVE
      file         = "/scrollbars/slider-insensitive.png"
      border      = { 2, 2, 2, 2}
      stretch      = TRUE
      orientation   = VERTICAL
    }


    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = NORMAL
      file            = "/scrollbars/stepper-up.png"
      stretch         = TRUE
      arrow_direction   = UP
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = PRELIGHT
      file            = "/scrollbars/stepper-up-prelight.png"
      stretch         = TRUE
      arrow_direction   = UP
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = ACTIVE
      file            = "/scrollbars/stepper-up-prelight.png"
      stretch         = TRUE
      arrow_direction   = UP
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = INSENSITIVE
      file            = "/scrollbars/stepper-up-insensitive.png"
      stretch         = TRUE
      arrow_direction   = UP
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = NORMAL
      file            = "/scrollbars/stepper-down.png"
      stretch         = TRUE
      arrow_direction   = DOWN
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = PRELIGHT
      file            = "/scrollbars/stepper-down-prelight.png"
      stretch         = TRUE
      arrow_direction   = DOWN
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = ACTIVE
      file            = "/scrollbars/stepper-down-prelight.png"
      stretch         = TRUE
      arrow_direction   = DOWN
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = INSENSITIVE
      file            = "/scrollbars/stepper-down-insensitive.png"
      stretch         = TRUE
      arrow_direction   = DOWN
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = NORMAL
      file            = "/scrollbars/stepper-left.png"
      stretch         = TRUE
      arrow_direction   = LEFT
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = PRELIGHT
      file            = "/scrollbars/stepper-left-prelight.png"
      stretch         = TRUE
      arrow_direction   = LEFT
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = ACTIVE
      file            = "/scrollbars/stepper-left-prelight.png"
      stretch         = TRUE
      arrow_direction   = LEFT
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = INSENSITIVE
      file            = "/scrollbars/stepper-left.png"
      stretch         = TRUE
      arrow_direction   = LEFT
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = NORMAL
      file            = "/scrollbars/stepper-right.png"
      stretch         = TRUE
      arrow_direction   = RIGHT
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = PRELIGHT
      file            = "/scrollbars/stepper-right-prelight.png"
      stretch         = TRUE
      arrow_direction   = RIGHT
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = ACTIVE
      file            = "/scrollbars/stepper-right-prelight.png"
      stretch         = TRUE
      arrow_direction   = RIGHT
    }

    image
    {
      function         = STEPPER
      recolorable      = TRUE
      state            = INSENSITIVE
      file            = "/scrollbars/stepper-right-insensitive.png"
      stretch         = TRUE
      arrow_direction   = RIGHT
    }
  }
}

In addtion to the images, some other properties can be specified. For example:

Code: Select all

GtkScrollbar::min-slider-length = 30

At this point it's worth pointing out the GTK documentation, in this case for GtkScrollbar: https://developer.gnome.org/gtk2/2.24/GtkScrollbar.html which lists the style properties specific to this widget.

It should also be noted that it inherits style properties from it's parent widget GtkRange: https://developer.gnome.org/gtk2/2.24/GtkRange.html so you can also specify those properties for the scrollbars:

Code: Select all

GtkScrollbar::slider-width = 50

Kevin

paynekj · **Posted:** Mon Jun 23, 2014 11:12 am **(#33)**

Today it's tabs:

In the GTK world - tabbed widgets are known as Notebooks

They are used in GIMP for the docked windows in the toolbox:

Attachment:

gimp-tabs-toolbox.png [ 11.78 KiB | Viewed 8346 times ]

But here I'm using the Filters>>Map>>Map Object dialog as it's slightly clearer:

Attachment:

gimp-tabs-map.png [ 85.91 KiB | Viewed 8346 times ]

The associated code in rc_tabs.rc:

Code: Select all

# https://developer.gnome.org/gtk2/2.24/GtkNotebook.html
style "tabs" = "gimp-default-style"
{
  xthickness = 4
  ythickness = 4

  GtkNotebook::tab-curvature = 2  # sets horizonal padding internal to the tab
  GtkNotebook::tab-overlap = 0    # sets how much the tabs overlap

  engine "pixmap"
  {
    image
    {
      function   = EXTENSION
      state      = NORMAL
      gap_side   = BOTTOM
      file      = "/tabs/tab-top-active.png"  # used for active top tab widgets for examaple in "Map to Object"
      stretch   = TRUE
      border   = { 2, 2, 2, 2}
    }

    image
    {
      function   = EXTENSION
      state      = ACTIVE
      gap_side   = BOTTOM
      file      = "/tabs/tab-top-inactive.png" # background for inactive top tabs
      stretch   = TRUE
      border   = { 2, 2, 2, 2}
    }

    image
    {
      function         = BOX_GAP
      recolorable      = TRUE
      file            = "/tabs/notebook-top.png" # background for area containing tab page
      border         = { 1, 1, 1, 1}
      stretch         = TRUE
      gap_file         = "/tabs/gap-top-active.png" # line under active top tab
      gap_border        = { 1, 1, 0, 0}
      gap_start_file   = "/tabs/gap-start.png" # This is the top line of the paged area to the left of the active top tab
      gap_start_border   = { 0, 0, 0, 0}
      gap_end_file      = "/tabs/gap-end.png" # This is the top line of the paged area to the right of the active top tab
      gap_end_border   = { 0, 0, 0, 0}
      gap_side         = TOP
    }


  # the bottom, left and right tab orientations aren't used in GIMP
    image
    {
      function   = EXTENSION
      state      = NORMAL
      gap_side   = TOP
      file      = "/tabs/tab-bottom-active.png" # used for active bottom tab widgets
      stretch   = TRUE
      border   = { 2, 2, 2, 2}
    }

    image
    {
      function   = EXTENSION
      state      = ACTIVE
      gap_side   = TOP
      file      = "/tabs/tab-bottom-inactive.png" # background for inactive bottom tabs
      stretch   = TRUE
      border   = { 2, 2, 2, 2}
    }

    image
    {
      function         = BOX_GAP
      recolorable      = TRUE
      file            = "/tabs/notebook-bottom.png"
      border         = { 1, 1, 1, 1}
      stretch         = TRUE
      gap_file         = "/tabs/gap-bottom-active.png" # line on top of active bottom tab
      gap_border        = { 1, 1, 0, 0}
      gap_start_file   = "/tabs/gap-start.png"
      gap_start_border   = { 0, 0, 0, 0}
      gap_end_file      = "/tabs/gap-end.png"
      gap_end_border   = { 0, 0, 0, 0}
      gap_side         = BOTTOM
    }

    image
    {
      function   = EXTENSION
      state      = NORMAL
      gap_side   = LEFT
      file      = "/tabs/tab-right-active.png"
      stretch   = TRUE
      border   = { 2, 2, 2, 2}
    }

    image
    {
      function   = EXTENSION
      state      = ACTIVE
      gap_side   = LEFT
      file      = "/tabs/tab-right-inactive.png"
      stretch   = TRUE
      border   = { 2, 2, 2, 2}
    }

    image
    {
      function         = BOX_GAP
      recolorable      = TRUE
      file            = "/tabs/notebook-right.png"
      border         = { 1, 1, 1, 1}
      stretch         = TRUE
      gap_file         = "/tabs/gap-right-active.png"
      gap_border        = { 1, 1, 0, 0}
      gap_start_file   = "/tabs/gap-start.png"
      gap_start_border   = { 0, 0, 0, 0}
      gap_end_file      = "/tabs/gap-end.png"
      gap_end_border   = { 0, 0, 0, 0}
      gap_side         = RIGHT
    }

    image
    {
      function   = EXTENSION
      state      = NORMAL
      gap_side   = RIGHT
      file      = "/tabs/tab-left-active.png"
      stretch   = TRUE
      border   = { 2, 2, 2, 2}
    }

    image
    {
      function   = EXTENSION
      state      = ACTIVE
      gap_side   = RIGHT
      file      = "/tabs/tab-left-inactive.png"
      stretch   = TRUE
      border   = { 2, 2, 2, 2}
    }

    image
    {
      function         = BOX_GAP
      recolorable      = TRUE
      file            = "/tabs/notebook-left.png"
      border         = { 1, 1, 1, 1}
      stretch         = TRUE
      gap_file         = "/tabs/gap-left-active.png"
      gap_border        = { 1, 1, 0, 0}
      gap_start_file   = "/tabs/gap-start.png"
      gap_start_border   = { 0, 0, 0, 0}
      gap_end_file      = "/tabs/gap-end.png"
      gap_end_border   = { 0, 0, 0, 0}
      gap_side         = LEFT
    }
  }
}

As far as I can see, only the top tab orientation is used in GIMP.

The GtkNotebook::tab-overlap = 0 controls how much the tabs overlap, and negative values will space them further apart.

Kevin

p.s. Because I learned some things preparing this I made some changes to the files, so I have attached the latest version.

molly · **Joined:** Apr 07, 2010 **Posts:** 14182

Thank you Kevin, you put a lot of work in that one.

molly · **Joined:** Apr 07, 2010 **Posts:** 14182

Nice job mikechat

rheus · **Joined:** Jul 29, 2014 **Posts:** 6

Thanks for this great tutorial! It got me started when I was about to give up.

I've been trying for the last two days to make my own theme, as I want to move from Photoshop to Gimp. I've come really far (I think) and have now reversed engineered a lot of code, although I have no clue how to read it. And made a lot of icons.

Now I'm stuck and can't change the look of the tool percentage sliders, as I can't find any examples on how to add images/colors/size/border etc to them.

If you could give me a hint I would be really grateful.

paynekj · **Posted:** Thu Jul 31, 2014 3:45 am **(#37)**

rheus wrote:

Thanks for this great tutorial! It got me started when I was about to give up.

I've been trying for the last two days to make my own theme, as I want to move from Photoshop to Gimp. I've come really far (I think) and have now reversed engineered a lot of code, although I have no clue how to read it. And made a lot of icons.

Now I'm stuck and can't change the look of the tool percentage sliders, as I can't find any examples on how to add images/colors/size/border etc to them.

If you could give me a hint I would be really grateful.

The problem with the GIMP 2.8 sliders is that they are a custom widget rather than a standard GTK widget. This will mean you will have to look in the source code to find out how they are made and there's no certainty that they are styleable at all (although the colours can be set)

I also notice while watching GIT commits go past that there will be a new rotation adjustment widget in 2.10, which will probably not be styleable either (other than colours ?)

Kevin

Edit: It appears that the sliders (AKA scale widgets) are slightly styleable, but I've not worked out the details yet:

paynekj · **Posted:** Thu Jul 31, 2014 9:54 am **(#38)**

I've done some experimenting and found that the sliders are GimpSpinScale widgets and I can do this to them:

Attachment:

gimpspinscale.png [ 8.66 KiB | Viewed 8186 times ]

using this code:

Code: Select all

style "scale" = "gimp-default-style"
{
  fg[SELECTED]      = "white" # colour of label text when on top of the bar
  text[NORMAL]      = "red"   # colour of text when not on top of the bar - and the border???
  base[NORMAL]      = "cyan"  # background colour
  bg[SELECTED]       = "yellow"   # colour of bar when it's less than the minimum

  engine "pixmap"
  {
    image
    {
      function   = BOX
      file      = "/scale/scale_bg.png"
      border      = { 0, 1, 0, 0}
      stretch      = TRUE
      orientation   = HORIZONTAL
    }
  }
}

and the scale_bg.png image is this:

Attachment:

scale_bg.png [ 159 Bytes | Viewed 8186 times ]

I apply that style using this:

Code: Select all

class "GimpSpinScale" style "scale"

What I don't understand is why it stops drawing the bar using the image file when the bar is less than about 45 pixels wide. I'm going to try asking the developers: https://mail.gnome.org/archives/gimp-de ... 00074.html

Kevin

rheus · **Joined:** Jul 29, 2014 **Posts:** 6

Quote:

The problem with the GIMP 2.8 sliders is that they are a custom widget rather than a standard GTK widget. This will mean you will have to look in the source code to find out how they are made and there's no certainty that they are styleable at all (although the colours can be set)

I also notice while watching GIT commits go past that there will be a new rotation adjustment widget in 2.10, which will probably not be styleable either (other than colours ?)

Kevin

Edit: It appears that the sliders (AKA scale widgets) are slightly styleable, but I've not worked out the details yet:

Thanks! The words "scale widgets" was the hint I needed.

Code: Select all

class "GimpSpinScale" style "whatever"

EDIT: You should instead use:

Code: Select all

widget "*GimpSpinScale" style:highest "style-gimpspinscale"

This is starting to become a really fun project. The logic behind theme-ing GIMP, after a pretty steep learning curve, and very little documentation, is actually relatively simple.

Do you mind if I post more of my future discoveries here, if I find any?

Cheers, Roy.

EDIT:

Apparently "GtkSpinButton" works as well, though some other parts gets affected.

paynekj · **Posted:** Thu Jul 31, 2014 10:28 am **(#40)**

rheus wrote:

Do you mind if I post more of my future discoveries here, if I find any?

Cheers, Roy.

Please do

rheus · **Joined:** Jul 29, 2014 **Posts:** 6

Here is a pretty small one, but fun anyways to be able to control more of the look:

Code: Select all

GimpRuler::font-scale = 0.75

#Sets the scale of the ruler. 1 is default, 2 is twice as large.

You can also style it in the colors and fonts that you want.

Code: Select all

style "style-gimpruler"
 {
     bg[NORMAL] = @bg_color 
     font_name = "Segoe UI, semibold 10"
 }

and so on...

Code: Select all

class "GimpRuler" style "style-gimpruler"

rheus · **Joined:** Jul 29, 2014 **Posts:** 6

Question.

Look at this image from one of the users who installed the photoshop-like theme. His forground/backround color button is SQUARE! How is this possible?

Damn, it seems I'm too new a user here to add links...
Search google for gimp photoshop theme, go into the one from the ubuntu forums, and check out the last post.

rheus · **Joined:** Jul 29, 2014 **Posts:** 6

I've gotten a bit further. The hardest part is finding the GTK/GIMP code name for each component.

Can anyone help me find out the name(s) of the red-circled ones here. I'm trying to change their inner shadow.

And if it is possible to remove the border around the layers box etc, that would be awesome too.

molly · **Joined:** Apr 07, 2010 **Posts:** 14182

your screen shot shows that you are using Sans Pro Bold Italic font, size 18
The three boxes where you have the red oval outline.
top one is Identation of 1st line
middle one, adjust line spacing (increasing the numbers will make more space between the lines, decreasing will made the space less.)
bottom one adjust letter spacing. ( increase number for more spaces between your text)
The white box around your layer shows that you have that layer selected. If you click the eye to the left of it, the selection will be turned off.

rheus · **Joined:** Jul 29, 2014 **Posts:** 6

molly wrote:

your screen shot shows that you are using Sans Pro Bold Italic font, size 18
The three boxes where you have the red oval outline.
top one is Identation of 1st line
middle one, adjust line spacing (increasing the numbers will make more space between the lines, decreasing will made the space less.)
bottom one adjust letter spacing. ( increase number for more spaces between your text)
The white box around your layer shows that you have that layer selected. If you click the eye to the left of it, the selection will be turned off.

Sorry, I wasn't clear enough, but I'm making this theme, and I was wondering what the name for these boxes are for making it. (like GtkEntry, GtkComboBox etc).
I'm trying to remove the shadow programmatically inside the text boxes, but I can't find the names that changes it.

Thanks for trying

paynekj · **Posted:** Mon Sep 29, 2014 7:21 am **(#46)**

Here's a brief bit about highlighting menu items:

Attachment:

Untitled.png [ 21.15 KiB | Viewed 11824 times ]

This is done by being specific about what item you want to style:

Code: Select all

style "my_important"
{
  font_name = "sans bold 9"
  fg[NORMAL]        = "red" 
}

style "my_ignore"
{
  fg[NORMAL]        = "yellow" 
}

widget "GtkWindow.*.script-fu-drop-shadow.GtkAccelLabel" style:highest "my_important"
widget "GtkWindow.*.plug-in-nova.GtkAccelLabel" style:highest "my_important"

widget "GtkWindow.*.plug-in-gflare.GtkAccelLabel" style:highest "my_ignore"

Here we are applying the styles to very specific menu entries - which in this case are the GtkAccelLabel widgets which are used in menus to display the menu text with the associated keyboard shortcut.

You can see in my example that the name of the menu entry contains the function name that can be found using the Procedure and/or Plug-in Browsers

Attachment:

Untitled2.png [ 59.28 KiB | Viewed 11823 times ]

Because you can use a * as a wildcard specifier it is possible to have more generic styling:

Code: Select all

widget "GtkWindow.*.plug-in*.GtkAccelLabel" style:highest "my_important"

would highlight all the plug-ins.

Also, because I always write my own personal scripts to start "kp24", I can highlight them:

Code: Select all

widget "GtkWindow.*kp24*.GtkAccelLabel" style:highest "mine"

Attachment:

Untitled1.png [ 19.84 KiB | Viewed 11824 times ]

Where my scripts are highlighted in green and plug-ins coloured #ff8080.

Kevin

paynekj · **Posted:** Thu Oct 16, 2014 7:07 am **(#47)**

Here's a bit about icons:

Attachment:

gimp-tool-icons_options.png [ 21.5 KiB | Viewed 11739 times ]

In this example I've replaced the default icons for the airbrush and bucket-fill tools using the symbolic icons. I have also created and referenced a green icon for when the mouse is hovered over the airbrush button (the PRELIGHT state)

It's also obvious from my example that the symbolic icons are the wrong colour for this background as they are too light against the horrible pink.

Code: Select all

style "gimp-icons"
{
  stock["gimp-tool-airbrush"] =
  {
    { "stock_icons/tools/stock-tool-airbrush-22.png", *, *, "gtk-button" },
    { "stock_icons/tools/stock-tool-airbrush-22-prelight.png", *, PRELIGHT, "gtk-button" },
    { "stock_icons/tools/stock-tool-airbrush-22.png", *, *, *            }
  }

  stock["gimp-tool-bucket-fill"] =  { { "stock_icons/tools/stock-tool-bucket-fill-22.png" } }
#  stock["gimp-tool-clone"] = { { "stock_icons/gtk-stock/dialog-warning-48.png", *, *, "gtk-button" } }

  stock["gimp-warning"] =
  {
    { "stock_icons/gtk-stock/dialog-warning-22.png", *, *, "gtk-button" },
    { "stock_icons/gtk-stock/dialog-warning-22.png", *, ACTIVE, "gtk-button" },
    { "stock_icons/gtk-stock/dialog-warning-22.png", *, PRELIGHT, "gtk-button" },
    { "stock_icons/gtk-stock/dialog-warning-22.png", *, *, *            },
    { "stock_icons/gtk-stock/dialog-warning-48.png", *, *, "gtk-dialog" }
  }

# GTK_STOCK: http://www.gtk.org/api/2.6/gtk/gtk-Stock-Items.html
#
  stock["gtk-new"] =
  {
    { "stock_icons/gtk-stock/folder-documents-22.png", *, *, "gtk-button" },
    { "stock_icons/gtk-stock/folder-documents-22.png", *, ACTIVE, "gtk-button" },
    { "stock_icons/gtk-stock/folder-documents-22.png", *, PRELIGHT, "gtk-button" },
    { "stock_icons/gtk-stock/folder-documents-22.png", *, *, *            }
  }
  stock["gtk-open"] =
  {
    { "stock_icons/gtk-stock/document-open-22.png", *, *, "gtk-button" },
    { "stock_icons/gtk-stock/document-open-22.png", *, ACTIVE, "gtk-button" },
    { "stock_icons/gtk-stock/document-open-22.png", *, PRELIGHT, "gtk-button" },
    { "stock_icons/gtk-stock/document-open-22.png", *, *, *            }
  }
}

class "GtkWidget" style "gimp-icons"

This code also defines a different sized warning icon for when the icon is used in a gtk-dialog, so that GTK doesn't have to scale the small icon up:

Attachment:

gimp-warning-icon.png [ 30.75 KiB | Viewed 11739 times ]

Finally, here's the toolbox in my current theme using the symbolic icons:

Attachment:

toolbox-symbolic.png [ 21.99 KiB | Viewed 11739 times ]

Kevin

paynekj · **Posted:** Thu Oct 16, 2014 7:50 am **(#48)**

I have started on the icons because I was asked how easy it would be to put together a theme more suited to use on a high resolution display:

Attachment:

big1.png [ 43.64 KiB | Viewed 11734 times ]

If anyone is interested in trying this, I've attached the theme as it is (which is most of the big icons missing, but does include all the small (22x22), light coloured symbolic icons I've used so far)

I've been getting the SVG versions of the symbolic icons from
https://github.com/gnome-design-team/gn ... e-symbolic
https://github.com/GNOME/gnome-icon-the ... e/scalable

Kevin

Mr Ed · **Joined:** Jul 03, 2018 **Posts:** 38

I found oxygen theme (it is only the icons) and fused it with a colour theme, everything is fine except that when you put the mouse over a tool (brush, select, ...) at the left, the description shows with a white square making it unreadable.
Can that square be turned to the theme colour, that is "dark"?

paynekj · **Posted:** Thu Jul 05, 2018 3:48 am **(#50)**

In principle it is possible to theme the tooltips:

Attachment:

Untitled.png [ 17.77 KiB | Viewed 10451 times ]

You would need to create a new style definition in the gtkrc file:

Code: Select all

style "tooltips"
{
  fg[NORMAL] = "red"
  bg[NORMAL]        = "#00ff00"
}

Then use it for tooltip widgets, also in the gtkrc:

Code: Select all

widget "*tooltip*"             style:highest "tooltips"

	Similar Topics	Replies
	I could use some help getting started with a plugin on Windows	2
	Clearlooks Gimp 2.10 Color Hinted Themes	31