Tutorial for: YNAB Suggested skill level: intermediate
- Part 1: Toolkit for YNAB – General Settings walkthrough
- Part 2: Toolkit for YNAB – Account Screen Settings
- Part 3: Toolkit for YNAB – Budget Screen Settings
- Part 4: Toolkit for YNAB – Report Screen Settings
One of the few advantages to the new web-based YNAB (from my personal perspective, of course), is being able to customize many little tweaks here and there. This is accomplished with the help of a handy browser plugin called Toolkit for YNAB. The plugin is available for both Google Chrome and Firefox. It is not available for Safari.
Hate the ever-present Help Button? The Toolkit for YNAB lets you hide it! Need a better way to switch between your personal and business budgets? You got it! The Toolkit makes it super simple.
Watch a full video tutorial here:
Prefer a text-and-screenshots tutorial? Keep reading below….
Toolkit for YNAB – General Settings
- Allow Resizing of Side Menu
- Budget Quick Switch
- Collapsable Side Menu
- Colour Blind Mode
- Hide Help [?] Button
- Hide Referral Button
- Printing Improvements
- Square Negative Mode
- Toolkit Reports
- Account Name Height
- Better Scrollbars
- Hide Account Balances
- Hide Edit Account Button
- Interface Font
- Localization of YNAB
- Navigation Tabs Height
- Privacy Mode
- Show Import Notifications in Navigation Sidebar
Allow Resizing of Side Menu
By default, the left side menu in YNAB has a fixed width. If you want to maximize screen real estate, you’re out of luck. But the Toolkit for YNAB browser extension fixes that annoying little limitation with the Allow Resizing of Side Menu setting.
To resize, hover over the line between the blue side menu and the white center screen. Your cursor will change from the standard arrow to a short vertical line with left and right horizontal arrows. Once the icon changes, click on the line and drag it to the left or right to resize to fit your preferences.
If the resizing icon doesn’t appear when you hover over the line, check to make sure you turned on this option in the Toolkit, that you saved your change, and that you refreshed your YNAB browser tab.
Budget Quick Switch
YNAB allows users to have multiple budget files. The features is fabulous — this means you can have a personal budget file and a budget for each side gig. Or your teenagers can have their own budgets. Or couples can share expenses but maintain separate budgets. Whatever floats your boat….
But, switching between files requires an unnecessary extra step which is, frankly, annoying. I’m constantly changing back and forth between my household budget and my business budget files.
The Toolkit for YNAB does a great job of eliminating this extra step with the Budget Quick Switch setting.
As you’ll see in the screenshots provided, once you turn on this setting in the Toolkit, a single click on the dropdown arrow results in a full list of all available budget file names. From this list, click on the name of the desired file and, boom!, you’re in business! Quick as a bunny, you’re working in a new file.
Collapsable Side Menu
The Collapsable [sic] Side Menu setting allows the user to quickly collapse the entire left side menu with a single click. Another click on the Collapse icon opens the menu back up to full width.
An interesting caveat to this particular setting: when the Allow Resizing of Side Menu and the Collapsable Side Menu settings are both turned on, the behavior of the Collapse button is different than described above (and depicted in the first two screenshots). Combining these two settings results in the account names and balances section being “rolled up” out of sight but the width of the sidebar itself is not affected. In effect, the sidebar is not collapsed over; the accounts section is collapsed up (below, bottom left).
Colour Blind Mode
YNAB uses color to convey information. This can be problematic for people with visual impairments and those who are color blind. If you’re color blind, Toolkit for YNAB offers a Colour Blind Mode that will help.
Specifically, Available “bubbles” are
- red if the category is overspent,
- orange if the category balance doesn’t meet a Goal you’ve set or if the balance is insufficient to cover an up-coming scheduled transaction,
- grey if the balance is $0.00,
- they’re green if the category has a positive balance (see images 1 and 2 below).
Toolkit for YNAB has adjusted a few color choices in an effort to address the needs of color blind peeps.
The Toolkit for YNAB adds a splotch of orange in the center of the red negative bubbles (see images 3 and 4 below).
With orange warning bubbles, the Toolkit changes this “warning” color to blue in the Available column and adds a spot of blue in the center of the orange bubble in the righthand inspector detail window (bottom right).
Hide Help [?] Button
The Hide Help [?] Button setting in Toolkit for YNAB gives the option to remove the ever-present hovering Help icon in the lower left corner.
Hide Referral Banner
YNAB’s Referral banner is a permanent fixture in the lower left menu area but the Toolkit now makes it possible to hide it with the Hide Referral Banner setting.
If you’ll be printing lists of transactions from YNAB — either hardcopy prints or .pdfs — the Printing Improvements setting might prove useful. Turning on the Printing Improvements setting eliminates the top navigation icons and column headers that are otherwise printed from the register screens.
Below the left screenshot shows what the default print view and the right screenshot shows the same view with the Printing Improvements turned on.
Square Negative Mode
The Square Negative Mode setting squares off the edges of the “bubble” around any negative number. As you can see in the screenshot below, this setting affects budget category Available
balances as well as negative Account balances, i.e. credit cards and other debt accounts.
YNAB offers a full set of reports including Spending Reports, Net Worth, and Income vs Expense. In each, you can adjust multiple filters. You can specify a certain date range. You can include or exclude categories. You can filter out or narrow down to specific accounts.
Turning on the Toolkit Reports in Toolkit for YNAB doesn’t replace the default reports, it adds a second set of reports.
For the most part, the Toolkit reports provide the same functionality. The main difference between the two sets of reports is in the graphic rendering of the data. The Toolkit reports make more efficient use of space and use a primary color-based palette whereas the default reports use a rather fruity color palette.
The Toolkit reports offer all the same filtering functionality as the default reports. And they include the three types of reports — Spending by Category, Net Worth, and Income vs Expense. The Toolkit reports also bring back a fourth type of report that YNAB dropped after YNAB4: Spending by Payee.
Note: There’s a bug in the Toolkit for YNAB‘s Income vs Expense report. If you have income without a stated Payee, the income is not included in the report. So, for example, if you skip entering your employer’s name because, duh, you know where your paycheck comes from, that income will not be included in the Income portion of the Income vs Expense report. A personal example: I never include the name of the bank when entering interest income transactions because the source is rather obvious.
The default YNAB reports are not affected by this bug.
Account Name Height
The Account Name Height setting has three options: Default, Compact, and Slim.
As you’ll see in the screenshots below, the Compact setting (left) affects the vertical space between account names. The Slim option (right) tightens up the horizontal space as well as reducing the kerning in the account names (smooshes the letters closer together).
This setting can be combined with the Navigation Tabs Height setting to change the display of both sections in the left navigation sidebar.
Disclaimer: I’m a Mac user. All of my videos and screenshots are taken on my MacBook. I don’t own a PC. I offer this disclaimer because it may be the reason why this setting doesn’t seem to work for me. It may work on a PC. It may actually be working on my Mac and I’m just looking in the wrong place or expecting behavior that isn’t there and missing behavior that is there. I don’t know.
What I do know is that this setting doesn’t appear to work for me on my computer. If it works for you or you know something I don’t about this setting, please leave a comment below.
Below are four screenshots of my screen each with a different Toolkit for YNAB Better Scrollbars setting implemented. You’ll notice that in every single screenshot, including when set to “off”, the scrollbars look exactly the same.
Row 1: YNAB’s default scrollbars (left) and Toolkit set to “Small” (right)
Row 2: Toolkit set to “Tiny” (left) and Toolkit set to “Off” (right)
Hide Account Balances
The Hide Account Balances setting has three options in addition to the default which shows balances.
The first Toolkit option is to Hide All. In the screenshot below you can see that all balances are hidden — both individual account balances and the Account Type total balances.
Two additional options allow you to choose which balances to hide. Hide Type Totals (left) hides the sums of your Budget and Tracking accounts but displays individual account totals. Hide Account Balances (right) hides individual account balances but displays the Type totals.
Hide Edit Account Button
If you want to edit an account’s name and details in YNAB you hover your cursor over the account name in the left side menu. This causes an icon to pop up to the left in front of the name. Clicking on that icon makes an edit window pop up.
The Toolkit for YNAB allows you to hide that edit button with the Hide Edit Account setting. If you hide the pop up button, you can still edit the account by right clicking on the account name.
Similar to the scrollbars setting above, the Interface Font setting does not seem to work properly. Whether that’s due to my computer or something else, I don’t know. While I was using Firefox to take these screenshots and record the video tutorial, I did switch to Chrome to see if Google’s browser played any better with Google Fonts. It didn’t. The screenshot below displays the default YNAB font.
The two screenshots below show a portion of the Budget screen with Open Sans selected in the Toolkit settings (left) and a sample of Open Sans from the Google Fonts website (right).
These next two screenshots show the same section of the Budget screen — this time with the Roboto font selected (left) and a corresponding sample of Roboto from Google Fonts (right).
The screenshots below were taken with the Toolkit setting on Roboto Condensed (left) and a sample of the Roboto Condensed font from Google Fonts (right).
These final screenshots represent a section of the budget screen with Droid Sans selected in the Toolkit (left) and what Google Fonts had to say when I searched for Droid Sans (right). The sample shows what Droid Sans looks like but as you can see, Google informs us that Droid Sans is not an open source font and therefore not available from Google Fonts (which is significant because the Toolkit cites Google Fonts as the source for all alternative font options).
Localization of YNAB
The Localization of YNAB setting allows you to change the language of the terminology displayed in the software.
As of this writing, Toolkit offers 31 language localization options in addition to the default (American) English. Each language option includes a small number to the right indicating the status of the translation — the degree to which all of the terminology has been translated (not pictured).
You’ll notice in the screenshots below that only the system terminology is translated. Anything you enter yourself such as your category names, category group names, transaction information, etc., will remain as you entered it.
Navigation Tabs Height
The Navigation Tabs Height setting is similar to the Account Name Height setting above.
The two screenshots below demonstrate the Compact setting (left) and the Slim setting (right).
These next two screenshots show what your screen will look like if you set both the Account Name Height and the Navigation Tabs Height settings in the Toolkit to Compact (left) or Slim (right).
Toolkit for YNAB’s Privacy Mode results in every single dollar (or other currency) amount being blurred out. To reveal a number, hover your cursor over the blurry text.
The two options for this setting are Always On and Add Toggle Button.
Always On means just that, all numbers are always blurred (below, left). Each number can be individually unblurred by hovering over the number with your cursor but as soon as you move your cursor away, the number is instantly blurred again (below, right).
The second option, Add Toggle Button, adds a little lock icon at the top of the left menu (see below).
By default, all numbers are blurred. But clicking on the lock toggle icon instantly clears all numbers. Clicking the lock toggle icon a second time quickly reverts the screen back to everything blurred.
Show Import Notifications in Navigation Sidebar
Many YNAB users love the ability to connect to their bank accounts and have their transactions imported (I have serious reservations about using this function but that’s a post for another day).
But, as shown in the screenshot below, YNAB doesn’t have an indicator on the budget screen warning that new imports are waiting and prompting you to do your thing.
Toolkit for YNAB fixes this oversight by offering the Show Import Notifications in Navigation Sidebar setting. With this setting turned on, any account with waiting imports will be easily identified by an underlined account name.
As you can see in the images below, you can choose between white underlines (left) or red underlines (right).
While I don’t find all of the Toolkit for YNAB General Settings options helpful, others add a great deal of value to my YNAB budgeting experience.
I love being able to collapse the side menu and I think the Toolkit Reports are vastly superior to YNAB‘s default reports. I also hide the help button and referral banner. And while I enter most of my purchases at the point-of-sale on my phone, I do appreciate the quick and easy-to-spot underline that shows me when a family member has new credit card transactions I need to import. But the Toolkit setting I appreciate the most is the Budget Quick Switch. I love that one!
Which Toolkit settings do you use and why? I hope you’ll let me know in the comments.