Adrien,

It turns out that installing GTK+3 helps… ;) Once that’s installed, I get the 
inspector in all its painful glory. I have added information to the GTK3 page 
of the wiki for MacOS installation.

I won’t even try to guess why seemingly equal elements (e.g. individual Account 
tabs) are parsed in completely different sections of the GTTK tree…

David

> On Oct 21, 2018, at 10:23 PM, Adrien Monteleone 
> <[email protected]> wrote:
> 
> David,
> 
> I’ll address the inspector first and then send another reply to the specific 
> CSS questions.
> 
> The inspector most likely is opening (I use the same command) but it’s 
> opening behind the GnuCash window. Do an Application Window spread and you’ll 
> see it. (I have my top left hot corner set, but you can define a hotkey for 
> it. you can also bring up Mission Control to see all windows on the workspace)
> 
> Now, using the inspector is going to be ‘fun’ as there is little to no 
> documentation for it...
> 
> The top left icon you can use to ’target’ elements in the GC window by 
> hovering and clicking. They will highlight as you hover. Clicking will ’set’ 
> the element as targeted and the Inspector will then give you various info 
> about it.
> 
> Once you’ve targeted the element you want take a good look at the element 
> tree. Many things will not be intuitive and you’ll be surprised how the 
> window is laid out in some cases. Note any classes for the nodes as they can 
> be targeted with CSS declarations. Then use the top left drop down to view 
> ‘class hierarchy’ and ‘css nodes’ The latter will give you CSS element names 
> useful for when you don’t have classes assigned (like the case of ‘treeview 
> button’) and you can see the entirety of possible CSS properties and what 
> they are currently set to. The hierarchy can sometimes be helpful with tricky 
> nesting of nodes especially with nodes trees that are repeated on the page.
> 
> Then use the CSS tab at the top to write your own rules to test changes in 
> real time. (there’s also a pause button there to turn your rules off and on 
> in real time) When you find something that works, add it to your own 
> gtk-3.0css file and reload GnuCash. Rinse, repeat...
> 
> There are a few other interesting tidbits about the inspector I’ve 
> discovered, such as the ‘properties’ from the drop down allows you to alter 
> some non-css stuff but this could only be useful in patching code. (that’s 
> how I discovered the gird lines possibility for the CoA tab) Double-clicking 
> values in the properties view brings up the ability to change/toggle them.
> 
> If you run into any problems, ping me back here and I’ll see what I can do to 
> help. (or even learn more myself)
> 
> Regards,
> Adrien
> 
>> On Oct 21, 2018, at 10:02 AM, David T. <[email protected]> wrote:
>> 
>> Adrien,
>> 
>> Further comments.
>> 
>> First, I’m learning that, for colors at least, the names used have no spaces 
>> in them.  So, “lightsteelgrey”, not “light steel grey”. I found a different 
>> site that noted the unspaced name forms after my initial attempts. My 
>> mistake. [This does not, however, rectify the multiword font name issue.]
>> 
>> Next, the #accounttree, .GncAccountPage command results in the background 
>> changing color, but it also affects every other part of the account window. 
>> This means that the highlighted account background stays the same lightgrey, 
>> but the highlighted font color switches to white, making this account 
>> practically invisible (kind of ironic, I’d say!). I’d alter the css, but… 
>> see below.
>> 
>> To alter the css, you need to know the elements involved, which is what GTK 
>> Inspector is supposed to do. However, the instructions say “GTK has a built 
>> in Inspector that you can enable by launching GnuCash from the command line 
>> with GTK_DEBUG=interactive path/to/gnucash”
>> 
>> That instruction is frustratingly incomplete, at least for me. Opening a 
>> Terminal window and entering:
>> 
>> GTK_DEBUG=interactive /Applications/Gnucash\ 3.3.app/Contents/MacOS/Gnucash
>> 
>> certainly gets GnuCash running, but there doesn’t seem to be any way to get 
>> element information from this point. Tried Ctrl-Shift-D (mentioned on GTK 
>> site), and various other meta key combinations. I have no way of knowing the 
>> element names, unless someone can tell me how this is supposed to work under 
>> MacOS. I will note that I see the following output after the above command:
>> 
>> Gtk-Message: 20:22:13.449: Failed to open display (null)
>> Gtk-Message: 20:22:13.449: Failed to separate connection to default display
>> 
>> Guidance is welcome.
>> 
>> Cheers,
>> David
>> 
>>> On Oct 21, 2018, at 1:26 PM, David T. via gnucash-user 
>>> <[email protected]> wrote:
>>> 
>>> Adrien,
>>> 
>>> I’ve been following this thread, and decided to try some of it out. I’d 
>>> like to report that my results have been less than stellar, and just a 
>>> little bit confusing.
>>> 
>>> I will begin by saying that I am a long time MacOS user, and I am running 
>>> both 2.6.19 and 3.3 on MacOS Mojave (which just installed). I have been 
>>> switching back and forth because I had some troubles with the typeahead in 
>>> 3.x, but wanted to be able to import commodity prices using csv files.
>>> 
>>> I will skip the version 2 styling in the interest of staying on topic here 
>>> with 3.0 styling.
>>> 
>>> My gtk-3.0.css (in ~/Library/Application Support/Gnucash) reads:
>>> * {
>>> font-size: 12px;
>>> font-family: Times, serif; 
>>> }
>>> #account_tree, .GncAccountPage {
>>> background-color: lightgrey;
>>> }
>>> 
>>> treeview button {
>>> background-color: lightgrey;
>>> color: black;
>>> }
>>> notebook tab {
>>> min-height: 0px;
>>> margin-top: 0px;
>>> margin-bottom: 0px;
>>> padding-left: 0px;
>>> padding-right: 0px;
>>> }
>>> notebook tab box {
>>> padding-top: 2px;
>>> padding-bottom: 2px;
>>> }
>>> 
>>> These entries are copied from your example and another example for the tab 
>>> padding. I have some notes:
>>> 
>>> * First off, it appears that if there is ANY error in your css, then none 
>>> of your modifications will appear. So, if you have an error with your color 
>>> name, the font specification will not apply either.
>>> 
>>> * I changed the font to “Big Caslon” as a test, since I can’t tell the 
>>> difference between the various sans-serif fonts that are available at my 
>>> advanced age. What I found was that the ONLY place I saw a change to a 
>>> serif font was in my reports. All other fonts remained sans serif. Using 
>>> single quotes or double quotes or even no quotes made no difference in the 
>>> results. However, if I used a single word font name (“Braggadocio”, 
>>> “Century”, “Helvetica”), the results appeared everywhere. I’m not sure what 
>>> the authorized GTK3 method is for handling multiword font names; I couldn’t 
>>> find any information out there for this.
>>> 
>>> * For yucks, I changed the px setting to 32, and Wow! that worked on 
>>> everything.
>>> 
>>> * Initially, I omitted the ‘#’ before ‘account_tree’, assuming it was a 
>>> typo. Not so! Again, single word values (“lightgrey”, “purple”) worked, 
>>> while multiword (“Light Steel Grey”, from wikipedia liisting) values didn’t.
>>> 
>>> * While trudging through the Internet, I found a page that suggested that 
>>> css allowed variable definitions. My attempt to copy that example, however, 
>>> went down in flames. It might be nice to be able to set variables up and 
>>> then change a single entry at the top to reset the look throughout, if 
>>> anyone has advice for this.
>>> 
>>> Cheers,
>>> David T.
>>> 
>>> 
>>>> On Oct 20, 2018, at 12:18 AM, Adrien Monteleone 
>>>> <[email protected]> wrote:
>>>> 
>>>> Jill,
>>>> 
>>>> Try this:
>>>> 
>>>> Close GnuCash.
>>>> 
>>>> Using a text editor (such as ’TextEdit.app’) create a file named 
>>>> gtk-3.0.css and place it in /yourusername/Library/Application 
>>>> Support/Gnucash
>>>> 
>>>> have it contain the following three CSS declarations:
>>>> 
>>>> * {
>>>> font-size: 12px;
>>>> font-family: Helvetica, sans-serif;
>>>> }
>>>> 
>>>> #account_tree, .GncAccountPage {
>>>> background-color: lightgrey;
>>>> }
>>>> 
>>>> treeview button {
>>>> background-color: lightgrey;
>>>> color: black;
>>>> }
>>>> 
>>>> Save the file as ‘Plain Text’. (Format > Make Plain Text)
>>>> 
>>>> Start GnuCash to see your changes.
>>>> 
>>>> ----------
>>>> Here’s what this code does:
>>>> 
>>>>    * {
>>>>      font-size: 12px;
>>>>      font-family: Helvetica, sans-serif;
>>>>    }
>>>> 
>>>> 
>>>> “font-size: 12px;” sets the font size for all (*) elements in the windows 
>>>> for the entire application. Set to the size you find appropriate. 12px 
>>>> (pixels) is a readably small size on most displays.
>>>> 
>>>> “font-family: Helvetica, sans-serif;” sets the font family to be 
>>>> ‘Helvetica’ or the closest generic system sans-serif font available if 
>>>> Helvetica is not on your system. You can use any font here you like. I 
>>>> just included Helvetica as an example. The default (‘San Francisco’ on a 
>>>> Mac) is pretty good, so you don’t need to even include this line if you 
>>>> like it as is, just use the font-size rule.
>>>> 
>>>> ----------
>>>> 
>>>>    #account_tree, .GncAccountPage {
>>>>      background-color: lightgrey;
>>>>    }
>>>> 
>>>> 
>>>> “#account_tree” targets the main part of the Account page window, 
>>>> “.GncAccountPage” targets the small background behind the Totals bar which 
>>>> appears to be part of the page. You can put them together as I have done 
>>>> here in a list to apply the same rule to both, or write separate 
>>>> declarations for each with their own rules if you want the colors to be 
>>>> different. 
>>>> 
>>>> You can also set specified font-sizes and font-families here as well if 
>>>> you want them different than the rest of the window. Just add those rules 
>>>> into those declarations. I’ve included a background color rule here 
>>>> because that is what you asked for, with the ‘lightgrey’ example. 
>>>> Depending on what you are looking for, or what color you choose, you may 
>>>> need to also set a foreground (text) color to balance properly. See the 
>>>> next declaration for an example.
>>>> 
>>>> ----------
>>>> 
>>>>    treeview button {
>>>>      background-color: lightgrey;
>>>>      color: black;
>>>>    }
>>>> 
>>>> 
>>>> “treeview button” targets the header bar at the top of the Account table. 
>>>> Again, you might need to include a foreground color rule here as this 
>>>> particular background color makes the header labels harder to read. 
>>>> (simply “color”)
>>>> 
>>>> For colors you can specify a ‘named websafe color’ (do a search on that 
>>>> term for possible color names) or you can use RGB integer or hex values if 
>>>> you want to specify a non-named color. (you don’t have to use names 
>>>> either, you can use the actual color value for ‘lightgrey’ if you want)
>>>> 
>>>> For example, if you wanted to match the background color of the tabs area, 
>>>> you’d use:
>>>> 
>>>>    background-color: rgb(207,207,205);
>>>> 
>>>> or
>>>> 
>>>>    background-color: #cfcfcd;
>>>> 
>>>> If you wanted to match the background area of the icon toolbar, you’d use 
>>>> rgb(232,232,231) or #e8e8e7.
>>>> 
>>>> If you want to know the color of a particular screen element, use the 
>>>> “Digital Color Meter.app". It will give you the color value of the item 
>>>> you point to as three separate integers for Red, Green & Blue (RGB) in the 
>>>> interval 0-255. If you want the hex value instead, you can then use a site 
>>>> like rgbtohex.net to convert it. It is important to always enter the RGB 
>>>> values in that R,G,B order to get the correct color.
>>>> 
>>>> ----------
>>>> You can make changes to the CSS file while GnuCash is open, but you’ll 
>>>> have to restart (after saving the CSS file) to see them take effect.
>>>> 
>>>> Let me know if you have any questions.
>>>> 
>>>> Regards,
>>>> Adrien
>>>> 
>>>> 
>>>>> On Oct 17, 2018, at 8:53 AM, Jill Terry <[email protected]> wrote:
>>>>> 
>>>>> Thanks folks.
>>>>> 
>>>>> The location of the css file given in the wiki is given for a mac, I 
>>>>> cannot locate a folder for Gnucash under Application Support.  Besides 
>>>>> which I have no idea how to find the correct .class to adjust.
>>>>> 
>>>>> I love GnuCash and so appreciate the program. But (yep always a but LOL!) 
>>>>>  I hate with a vengeance the way there are no simple links to things.  I 
>>>>> have no idea how to get to the online version of these emails to search 
>>>>> older posts!
>>>>> 
>>>>> I am old and tired (and grumpy LOL!) and really struggle to learn new 
>>>>> things. Why oh why did they remove the alternate line shading and change 
>>>>> the font????
>>>>> 
>>>>> Cheers
>>>>> (a very tired) Jill
>>>>> 
>>>>> 
>>>>> 
>>>>> On 17/10/2018 12:45, Adrien Monteleone wrote:
>>>>>> Jill,
>>>>>> 
>>>>>> Look at the wiki FAQ, you’ll see links to pages about GTK3 styling. 
>>>>>> There are some basics there, otherwise, a few months back, myself and a 
>>>>>> few others spent some time experimenting with various settings here on 
>>>>>> the list, so check the archives. I believe the thread title had 
>>>>>> something to do with font size. If you do a restricted search of the 
>>>>>> list use ‘css’ as a search term.
>>>>>> 
>>>>>> If you need to fine tune things like spacings, padding and such, you 
>>>>>> will greatly benefit by using the gtk-inspector. I don’t think it works 
>>>>>> on Windows though, Mac and Linux only. (you won’t need to install it 
>>>>>> separately)
>>>>>> 
>>>>>> I’m heading out of town for a few days, but if you are still stuck after 
>>>>>> trying the above, report back and I’ll help where I can. Others on the 
>>>>>> list can certainly assist as well.
>>>>>> 
>>>>>> Regards,
>>>>>> Adrien
>>>>>> 
>>>>>>> On Oct 17, 2018, at 5:19 AM, Jill Terry <[email protected]> wrote:
>>>>>>> 
>>>>>>> Hi All.
>>>>>>> 
>>>>>>> I'm on the mac version and I have just updated to v.3.3.
>>>>>>> 
>>>>>>> I absolutely hate the fact that the opening window, showing all 
>>>>>>> accounts, is now a bland, bright, white.  I also dislike the change in 
>>>>>>> the font and size.   With these updates it hurts my eyes.
>>>>>>> 
>>>>>>> The accounts are fine, still the same yellow/green (although I dislike 
>>>>>>> the font now used).
>>>>>>> 
>>>>>>> But I cannot see anywhere where you can change the view of the Accounts 
>>>>>>> tab, nor font style/size.
>>>>>>> 
>>>>>>> I don't know what other changes were made in the upgrade, but if I 
>>>>>>> can't change how the accounts tab looks then I shall have to revert 
>>>>>>> back to older version.
>>>>>>> 
>>>>>>> Jill
>>>>>>> 
>>>>>>> _______________________________________________
>>>>>>> gnucash-user mailing list
>>>>>>> [email protected]
>>>>>>> To update your subscription preferences or to unsubscribe:
>>>>>>> https://lists.gnucash.org/mailman/listinfo/gnucash-user
>>>>>>> If you are using Nabble or Gmane, please see 
>>>>>>> https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
>>>>>>> -----
>>>>>>> Please remember to CC this list on all your replies.
>>>>>>> You can do this by using Reply-To-List or Reply-All.
>>>>>> 
>>>>>> _______________________________________________
>>>>>> gnucash-user mailing list
>>>>>> [email protected]
>>>>>> To update your subscription preferences or to unsubscribe:
>>>>>> https://lists.gnucash.org/mailman/listinfo/gnucash-user
>>>>>> If you are using Nabble or Gmane, please see 
>>>>>> https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
>>>>>> -----
>>>>>> Please remember to CC this list on all your replies.
>>>>>> You can do this by using Reply-To-List or Reply-All.
>>>>> 
>>>> 
>>>> 
>>>> _______________________________________________
>>>> gnucash-user mailing list
>>>> [email protected]
>>>> To update your subscription preferences or to unsubscribe:
>>>> https://lists.gnucash.org/mailman/listinfo/gnucash-user
>>>> If you are using Nabble or Gmane, please see 
>>>> https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
>>>> -----
>>>> Please remember to CC this list on all your replies.
>>>> You can do this by using Reply-To-List or Reply-All.
>>> 
>>> _______________________________________________
>>> gnucash-user mailing list
>>> [email protected]
>>> To update your subscription preferences or to unsubscribe:
>>> https://lists.gnucash.org/mailman/listinfo/gnucash-user
>>> If you are using Nabble or Gmane, please see 
>>> https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
>>> -----
>>> Please remember to CC this list on all your replies.
>>> You can do this by using Reply-To-List or Reply-All.
>> 
> 
> 
> _______________________________________________
> gnucash-user mailing list
> [email protected]
> To update your subscription preferences or to unsubscribe:
> https://lists.gnucash.org/mailman/listinfo/gnucash-user
> If you are using Nabble or Gmane, please see 
> https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
> -----
> Please remember to CC this list on all your replies.
> You can do this by using Reply-To-List or Reply-All.

_______________________________________________
gnucash-user mailing list
[email protected]
To update your subscription preferences or to unsubscribe:
https://lists.gnucash.org/mailman/listinfo/gnucash-user
If you are using Nabble or Gmane, please see 
https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
-----
Please remember to CC this list on all your replies.
You can do this by using Reply-To-List or Reply-All.

Reply via email to