[GNC] Change text color

Mon Aug 6 14:03:00 EDT 2018

Peter & GTI,

How familiar are you with CSS for the web?

If not very much, it would help tremendously to do some tutorials online on how that works.

Gtk CSS follows some of the same rules, but not in exactly the same way. The basic principles are the same however.

The screenshots are showing you the Gtk version of a ‘DOM tree’ which is a tree of the HTML elements on a web page that you can style.

The app’s window is the main node in the tree. Each major element in that window will be a child element and so on. Nodes of type GtkBox seem to be widely used and are probably analogous to HTML’s <div> elements as generic blocks.

The Classes column will allow you to target multiple items in multiple places. (if they have that class assigned to them) This would be like a rule for footnotes such as ‘p.footnote {}’ or just ‘.footnote {}’

The Name column is analogous to ‘id’ in HTML. So you can target a very specific element—e.g., ‘div#main_nav {}’ or just ‘#main_nav {}) especially since there can be only one of each id on a page. (HTML also uses ’name’ and it is I think interchangeable with ‘id’ and I believe ‘id’ is being deprecated in favor of ’name’)

Otherwise, you use the node types like GtkBox and Gtklabel similar to how you would style <h1> or <p> HTML elements.

If you want to target a generic node type or widely used class for an element, but only on a certain page (tab) then you need to preface this rule with the class or id for that tab—e.g., '.GncRegisterPage’ as the first selector in a rule that you want to ONLY apply on register pages, but ‘#account-tree’ id for rules you only want to apply on the CoA page. (if the CoA had a specific class to target, you could use that, but the devs chose to name it instead, the reverse for the GncRegisterPage, but that’s probably because there is only one CoA but you can have multiple registers open at once)

If there are no other general methods, you might have to get very specific and use one or more of the child selectors. So '.GncRegisterPage > GtkBox {}' will target a GtkBox element that is a direct descendent (child) of any element with the class ‘.GncRegisterPage’. If you don’t use the ‘>’ selector, then the rule would apply to ANY descendent (even grandchildren and beyond) that is of type GtkBox.

The major issue I’ve discovered in this thread per John Rall’s comment last week was that Gtk CSS is not like Web CSS. On the web, if your rule CAN be implemented, it will, even if the browser has to guess or extrapolate the result. But for Gtk, either you get it exactly right, or you see no change. Compound this with not every element can have every property altered (and there doesn’t seem to be a list of what is implemented yet) and most of it becomes a guessing game of trial and error. (with the Web, you can set a font property on a div, not just the <p> elements within it. But it seems with Gtk, you can only adjust font properties on ‘label’ and not the ‘button’ or ‘GtkBox’ which contains the labels)

Since you are both using Windows, your path is not as easy. I don’t see any helpful info on using GtkInspector on Windows even though you have Gtk installed there via GnuCash. There are ways to install Gtk directly by itself, but this will most likely involve the Windows Subsystem for Linux, and maybe even running GnuCash in that same subsystem since it’s a sandbox. It is probably easier to just install a virtual machine running a very up to date Linux distro and install GnuCash there and inspect it accordingly. To have a fair shot at your rules working in both Linux and Windows, you’d need to make sure your Linux Gtk version is the same, which in this case is 3.22.30. And after all that work, probably just easier to run GnuCash in that vm all the time.

I hope that helps sheds some light on the task.

Regards,
Adrien

> On Aug 6, 2018, at 12:03 PM, Peter Jackson <jackson at fastmail.net> wrote:
> 
> This works for me on the Totals bar at the foot of a register:-
> 
> .GncRegisterPage  {
>  background-color: aliceblue;
>  color: green;
> }
> 
> As for the screenshots, they are beyond my comprehension.
> Thanks
> pj
> 
> 
> 
> On 6 August 2018 at 17:25, Adrien Monteleone <adrien.monteleone at lusfiber.net> wrote:
> By definition, a class is not particularly specific. It applies to multiple elements.
> 
> You’d need to use a rule that targets the desired element(s) better.
> 
> If you mean the bar that has “Present” “Future” “Cleared” “Reconciled” and “Projected Minimum” then I’ve attached a screenshot for that node tree.
> 
> In my case, it’s at the top. (I don’t see a preference for reversing this)
> 
> GtkBox.GncRegisterPage has two children, the first is a GtkBox that holds the totals bar (if on top) and the second is the GNCSplitReg which holds the actual register.
> 
> Under the first GtkBox are the five child GtkBox nodes that hold each total. And each of those has two GtkLabel children, one for the title and one for the actual total.
> 
> So you probably want to do something like:
> 
> .GncRegisterPage > GtkBox label {}
> 
> for the text of the bar and for the bar itself (colors perhaps):
> 
> .GncRegisterPage > GtkBox {}
> 
> Regards,
> Adrien
> 
> > On Aug 6, 2018, at 11:02 AM, GT-I9070 H <gti9070h at gmail.com> wrote:
> > 
> > Em seg, 6 de ago de 2018 às 10:43, Peter Jackson <jackson at fastmail.net>
> > escreveu:
> > 
> >> Thanks, but is there not something missing here? to specify the bar.
> >> Regards
> >> pj
> >> 
> > 
> > Apparently yes, but for me it works, test and report your results.
> > Some selectors are like that, appear to be unspecific, see some for the
> > register, something seems to be missing.
> > 
> > 
> > Regards
> > GTI
> > 
> 
> 
> 
> _______________________________________________
> gnucash-user mailing list
> gnucash-user at gnucash.org
> 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.