{"id":189,"date":"2011-06-06T20:13:22","date_gmt":"2011-06-06T10:13:22","guid":{"rendered":"http:\/\/helms-deep.net\/~rwh\/blog\/?p=189"},"modified":"2011-06-07T02:44:53","modified_gmt":"2011-06-06T16:44:53","slug":"ubuntus-ambiance-selected-items-in-unfocused-windows-are-invisible","status":"publish","type":"post","link":"https:\/\/helms-deep.net\/~rwh\/blog\/?p=189","title":{"rendered":"Ubuntu&#8217;s Ambiance: selected items in unfocused windows are invisible"},"content":{"rendered":"<p>I have a confession to make: I really like Ubuntu&#8217;s design, its look and feel, and its colour scheme.\u00c2\u00a0 And it seems to get better with each release.\u00c2\u00a0 The new Natty theme is really beautiful, and the dark window decorations of the Ambiance theme are great (especially now that they&#8217;ve chased down the odd dark text on dark background problems).<\/p>\n<p>Having said that, there&#8217;s one thing that I really don&#8217;t like: the way that it&#8217;s virtually impossible to tell what you have selected in windows other than the one that happens to be focused.\u00c2\u00a0 This is because the focused elements get completely desaturated, like this:<\/p>\n<div id=\"attachment_190\" style=\"width: 630px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Unfocused-old.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-190\" class=\"size-full wp-image-190\" title=\"Ambiance unfocused: all desaturated\" src=\"http:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Unfocused-old.png\" alt=\"\" width=\"620\" height=\"396\" srcset=\"https:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Unfocused-old.png 620w, https:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Unfocused-old-300x191.png 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><p id=\"caption-attachment-190\" class=\"wp-caption-text\">Which items are selected? It&#39;s anyone&#39;s guess!<\/p><\/div>\n<p><!--more-->For comparison, here&#8217;s the same window when it has focus:<\/p>\n<div id=\"attachment_195\" style=\"width: 630px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Focused-old.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-195\" class=\"size-full wp-image-195\" title=\"Focused version: you can tell what's selected\" src=\"http:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Focused-old.png\" alt=\"\" width=\"620\" height=\"396\" srcset=\"https:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Focused-old.png 620w, https:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Focused-old-300x191.png 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><p id=\"caption-attachment-195\" class=\"wp-caption-text\">We can see what&#39;s selected... so long as the window has focus.<\/p><\/div>\n<p>This is a particular problem when you have two windows containing elements that you&#8217;d like to compare.\u00c2\u00a0 If you select these elements, and try to compare them by eye, you&#8217;ll often not be able to tell which one you selected in the unfocused window. \ud83d\ude41<\/p>\n<p>So I set out to change this by fiddling with the arcane theme files.\u00c2\u00a0 The one you need to change is:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\/usr\/share\/themes\/Ambiance\/gtk-2.0\/gtkrc<\/pre>\n<p>So, the way I did it was to add a new colour for my elements.\u00c2\u00a0 Line 1:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">gtk-color-scheme = &quot;base_color:#ffffff\\nfg_color:#4c4c4c\\ntooltip_fg_color:#ffffff\\nselected_bg_color:#f07746\\nselected_fg_color:#FFFFFF\\ntext_color:#3C3C3C\\nbg_color:#F2F1F0\\ntooltip_bg_color:#000000\\nlink_color:#DD4814&quot;<\/pre>\n<p>becomes:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">gtk-color-scheme = &quot;base_color:#ffffff\\nfg_color:#4c4c4c\\ntooltip_fg_color:#ffffff\\nselected_bg_color:#f07746\\nselected_fg_color:#FFFFFF\\ntext_color:#3C3C3C\\nbg_color:#F2F1F0\\ntooltip_bg_color:#000000\\nlink_color:#DD4814\\ntest-color:#f5d8b1&quot;<\/pre>\n<p>Note the addition of the &#8220;\\ntest-color:#f5d8b1&#8221; at the end of the line.  Next, we change the elements we want to that colour.\u00c2\u00a0 A bit of trial and error here and I found which one.\u00c2\u00a0 Line 93 was:<\/p>\n<p>\u00ef\u00bb\u00bf<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">base&#x5B;ACTIVE]\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0 = shade (0.94, @bg_color)<\/pre>\n<p>and becomes:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">base&#x5B;ACTIVE]\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0 = @test-color<\/pre>\n<p>Voila!\u00c2\u00a0 Our unfocused window now looks much better:<\/p>\n<div id=\"attachment_191\" style=\"width: 630px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Unfocused-new.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-191\" class=\"size-full wp-image-191\" title=\"Ambiance unfocused but usable!\" src=\"http:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Unfocused-new.png\" alt=\"\" width=\"620\" height=\"396\" srcset=\"https:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Unfocused-new.png 620w, https:\/\/helms-deep.net\/~rwh\/blog\/wp-content\/uploads\/2011\/06\/Unfocused-new-300x191.png 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><p id=\"caption-attachment-191\" class=\"wp-caption-text\">Now we can tell exactly what&#39;s selected, and it even fits in nicely with the theme.<\/p><\/div>\n<p>Now just open up the Appearance application, switch to a different theme, then back to Ambiance to load the changes, and enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have a confession to make: I really like Ubuntu&#8217;s design, its look and feel, and its colour scheme.\u00c2\u00a0 And it seems to get better with each release.\u00c2\u00a0 The new Natty theme is really beautiful, and the dark window decorations &hellip; <a href=\"https:\/\/helms-deep.net\/~rwh\/blog\/?p=189\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[53,78,88,87,85,86,84,83,79,90,89,82,80,44,81],"class_list":["post-189","post","type-post","status-publish","format-standard","hentry","category-howtos","tag-11-04","tag-ambiance","tag-color","tag-colour","tag-desaturated","tag-fix","tag-gray","tag-grey","tag-gtkrc","tag-narwhal","tag-natty","tag-selected","tag-theme","tag-ubuntu","tag-unfocused"],"_links":{"self":[{"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=\/wp\/v2\/posts\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=189"}],"version-history":[{"count":12,"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=\/wp\/v2\/posts\/189\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=\/wp\/v2\/posts\/189\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helms-deep.net\/~rwh\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}