[GNC] Chaning left sidebar spacing

Adrien Monteleone adrien.monteleone at lusfiber.net
Sat Jan 4 14:27:51 EST 2020


Sorry, I sent that a bit too fast.

Rather than moving the tab image off the left hand of the screen you could make it invisible like with the button:

tab image {

  opacity: 0;

}

then your final label adjustment would look like this:

tab label {

  margin-left: -35px;
  margin-right: -35px;

}

This still doesn’t solve the uncentered “Accounts" label though.

You can of course combine rules like so:

tab image, tab button {

  opacity: 0;

}

Regards,
Adrien

> On Jan 4, 2020 w1d4, at 1:22 PM, Adrien Monteleone <adrien.monteleone at lusfiber.net> wrote:
> 
> Bill,
> 
> Sorry this took some time, but I finally got a chance to fire up the GTK Inspector.
> 
> The CSS nodes you’re looking for are called ’tabs’ (for the whole tab bar/column) and ’tab’ for each individual tab.
> 
> You can modify both padding and margin separately. Margin will affect the spacing between the tabs, padding will affect the spacing from the text to the outline of the tab.
> 
> You can also adjust left, right, top & bottom independently, or set them all to the same value.
> 
> For example, consider the following CSS declaration:
> 
> tabs, tab {
> 
>  margin: 0px;
>  padding: 0px;
> 
> }
> 
> This will pack everything about as tight as you can get it. (save for changing the font size) This gets me a tab height equal to about 1 register row with a 12px Apple system font.
> 
> The individual adjustments would be:
> 
> margin-top
> margin-bottom
> margin-left
> margin-right
> 
> padding-top
> padding-bottom
> padding-left
> padding-right
> 
> You can specify pixels (px) or ems (em), the latter being proportional to the font used. Other CSS units for these might work, but GTK hasn’t fully implemented ‘web’ CSS, so they might not. (such as ‘ex’, ‘pt’, ‘vw’, ‘vh’ and ‘%’)
> 
> 
> 
> If you want to shrink the tabs & tab column even further you can play with the tab images and close buttons.
> 
> The following will hide the tab image off the left edge of the screen:
> 
> tab image {
> 
>  margin-left: -50px;
> 
> }
> 
> This next one will make the close button invisible (but still reserve space for it):
> 
> tab button {
> 
>  opacity: 0;
> 
> }
> 
> Finally, you can tighten things up to remove the reserved space that the images & buttons were using:
> 
> tab label {
> 
>  margin-left: -15px;
>  margin-right: -35px;
> 
> }
> 
> Note that doing so will remove your ability to see at a glance, by the icon, what kind of tab it is. (report, account, etc.)
> 
> You’ll also lose your close button, but can either use the ‘close’ toolbar button or the ⌘W keyboard shortcut to close a tab instead.
> 
> Finally, also notice when you hide the tab images that your ‘Accounts’ tab label will not be centered. I haven’t found a way around this since GTK doesn’t seem to implement the ':first-child’ selector which would be used to target the label on that first tab only. (it needs a different left negative margin because it doesn’t have an image)
> 
> Hope that helps, let me know if you are still having trouble.
> 
> Note, you might have to restart GnuCash after making changes to your gtk-3.0.css file to see the difference.
> 
> Regards,
> Adrien
> 
> 
>> On Jan 3, 2020 w1d3, at 10:45 AM, William Marshall via gnucash-user <gnucash-user at gnucash.org> wrote:
>> 
>> HI David,
>> 
>> I forgot to clarify that the file I referenced DOES impact the appearance.  I just can’t seem to get anything to change the sidebar in any way.
>> 
>> Bill
> 




More information about the gnucash-user mailing list