Color Change Workaround for Chrome

This was posted in another thread by Isaac C. so Isaac gets all the credit.

I wanted to make it easier to find and make sure everyone saw this since it was buried in that thread.

I updated the code to match the original colors based on the YNAB blog post and added a little extra to fix the colors on the sidebar.

Everyone, if you need a quick fix, you may use this "User CSS" Chrome extension:
https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb

Go to your YNAB budget, and click the User CSS button next to your Chrome address bar. The User CSS side panel will open.

Paste the CSS code below into the side panel and the colours would be reset to the previous scheme, except that I have changed the "cautious" colour to a lighter shade of orange which works for my colour blindness.

You may change any of the background-color values below to colours that suit you better. You may do a Google search for "color picker" to find the hex code for the colours you desire:
https://www.google.com/search?q=color+picker

.ynab-new-budget-available-number.positive{
    background-color:#4c9f46;
    color:#fff;
}
.ynab-new-budget-available-number.positive:hover{
    background-color:#4c9f46;
}
.ynab-new-budget-available-number.positive .icon-goal .inner{
    fill:#fff;
}
.ynab-new-budget-available-number.positive .icon-goal .outer{
    stroke:#fff;
}

.inspector-overview-available .positive, .inspector-overview-available .positive:hover {
    background-color: #4c9f46;
}

.inspector-overview-available .cautious, .inspector-overview-available .cautious:hover {
  background-color: #da9434;
}

.ynab-new-budget-available-number.negative{
    background-color:#c44837;
    color:#fff;
}
.ynab-new-budget-available-number.negative:hover{
    background-color:#c44837;
}
.ynab-new-budget-available-number.negative .icon-goal .inner{
    fill:#fff;
}
.ynab-new-budget-available-number.negative .icon-goal .outer{
    stroke:#fff;
}

.inspector-overview-available .negative, .inspector-overview-available .negative:hover {
    background-color: #c44837;
}

.ynab-new-budget-available-number.cautious{
    background-color:#da9434;
    color:#fff;
}
.ynab-new-budget-available-number.cautious:hover{
    background-color:#da9434;
}
.ynab-new-budget-available-number.cautious .icon-goal .inner{
    fill:#fff;
}
.ynab-new-budget-available-number.cautious .icon-goal .outer{
    stroke:#fff;
}
.ynab-new-budget-available-number.cautious.credit svg,.ynab-new-budget-available-number.cautious.upcoming svg{
    fill:#fff;
}
6replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • Didn't realise the inspector view had been changed too. Thanks for bringing that up!

    Reply Like
  • This fix works for me but from a YNAB customers perspective I'm sure many of your YNAB customers are not computer savvy enough to follow your instructions. This and other software fixes should be enabled with a simple 1/2 step software menu so that all of your customers are able to understand an activate the optional change.

    Reply Like
      • Technicolor Cheetah
      • Not sure when I became a cheetah...but I'll run with it
      • technicolor_cheetah
      • 6 mths ago
      • 1
      • Reported - view

      Ken 

      This isn't a YNAB suggested work around.  Solely user made and suggested.  YNAB doesn't want to give people the ability to toggle on or off features.  

      Also, to make work in YNAB, after installing the extension, you will need to refresh your budget tab to get the extension to pop up the side panel.  

      Reply Like 1
      • Patzer
      • Retired at age 60. Thank you, YNAB!
      • Patzer
      • 6 mths ago
      • 2
      • Reported - view

      Ken 

      Customer support should be along shortly to tell you that's a great idea, and you should submit a Feature Request.  The Feature Request will go directly to the development team, where the lead developer, Mr. Dev Null, will give it the same level of consideration he gives to all Feature Requests.

      I'd suggest that everyone who can't read the numbers submit it as a bug; but that simply generates a reply email telling you it should be a Feature Request.

      Reply Like 2
  • This is awesome. Thanks!

    Reply Like
  • Hello all, 

    I wanted to follow up here to make sure no one missed the latest update on this issue. If you have any questions or concerns, please don't hesitate to let us know in that thread! :)

    Reply Like
Like4 Follow
  • 4 Likes
  • 6 mths agoLast active
  • 6Replies
  • 127Views
  • 7 Following