Financier Forums

Quote from: Billy_McSkintos on January 04, 2017, 04:02:31 PM
I can't find the class to change that; can you?

Looks to be    .budgets__budget--loading:after    in my testing. And if helpful, current opacity is set to .9 as part of the default background-color CSS.

Nice work on the styles. Think I prefer the blue theme and will be running with it for now!

Similar principal, but using SVG logos from various banks. Not sure which I like better.

Yes, thanks for the reminder Alex.

Posted a bit more detail here: https://discuss.financier.io/index.php?topic=226.0

Full Disclosure: I am not an expert by any means. This took quite a bit of trial and error to get right. There is probably a better way to do this, but this works for me for now.

Also remember: This may break at any point as enhancements/fixes are implemented by Alex. If possible, I will try to keep it updated to accommodate but no guarantees.

Going along with the "Customizing Financier" thread (https://discuss.financier.io/index.php?topic=97.0) that outlines how to add Emoji to your Account Names, I wanted a way to help identify which account I may be looking for (plus, I think it just looks good). However, with 3+ credit cards and only a single credit card Emoji, I went looking for another option.

Alex is currently using Font Awesome for some icons and using custom javascript added to the page onload using an extension such as Tampermonkey (Chrome) or Greasemonkey (Firefox), you can pull in these icons and preface the Account Name with them.

Font Awesome includes a bunch of "payment" icons (http://fontawesome.io/icons/) so you can include a Visa, Mastercard, Discover, Cash, AMEX, etc logo.

Tampermonkey/Greasemonkey script to create once the extension is installed:

// ==UserScript==
// @name         Financier Account Icons
// @version      0.1
// @description  Add FontAwesome icons to Account listing (left panel only)
// @author       JumpySquirrel @ https://discuss.financier.io
// @match        https://app.financier.io/*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @require      https://gist.githubusercontent.com/BrockA/2625891/raw/9c97aa67ff9c5d56be34a55ad6c18a314e5eb548/waitForKeyElements.js
// @grant        GM_addStyle
// ==/UserScript==

var accountDict = {
    "Visa Account Name": "cc-visa",
    "Amazon Card": "amazon",
    "Mastercard Account Name": "cc-mastercard",
    "Checking": "bank",
    "Cash": "money",
    "Mortgage": "home",
    "PayPal": "paypal"
};

//waitForKeyElements function courtesy https://gist.github.com/BrockA/2625891
waitForKeyElements (".app-view__accounts", setAccountIcons);

function setAccountIcons (jNode) {

    //Loop through each account
    $( ".app-view__name" ).each(function(index){

        //Get current Account Name
        var accountName = $(this).html();

        //Get FA Icon Name From AccountDict (or Account Name if undefined)
        var iconName = accountDict[accountName];
        if(iconName === undefined) { iconName = accountName.toLowerCase(); }

        //Build Icon String
        var accountIconString = "<i class=\"fa fa-" + iconName + "\" style=\"padding-top:9px; padding-right:2px\"></i>";

        //Add Icon String
        $(this).before(accountIconString);

    });

}


The only thing that should need to be modified is the following. Each line should include the Account Name followed by the name of the Font Awesome icon (http://fontawesome.io/icons/) you want to use


var accountDict = {
    "Visa Account Name": "cc-visa",
    "Amazon Card": "amazon",
    "Mastercard Account Name": "cc-mastercard",
    "Checking": "bank",
    "Cash": "money",
    "Mortgage": "home",
    "PayPal": "paypal"
};


If you don't want an Account to have an icon, it can simple be left out of this and no icon will display.

See the attached screenshot for the end result.

Let me know if you have any questions / this doesn't work for you. I'm open to making necessary changes/suggestions if people find it helpful and it isn't working for them.

Sure, I'll try to get a write-up done tonight and get it in the "Other" board.

It needs a browser extension such as Tampermonkey for Chrome or Greasemonkey for Firefox (and to be fair, I've only tested it in Chrome). This wasn't a big deal to me as I already had it installed and use various scripts on other sites.

It simply takes advantage of the FontAwesome catalog of "icons" that Alex is already referencing/pulling in for other icons (Budget / Reports / Accounts).

Tweaking complete, just need to figure out best way to link my account names to an icon. As a proof of concept, I am simply reading the account name and pulling the FontAwesome icon with that name.

Found out about FontAwesome . Gives a bunch of "payment icons" that are more specific than the generic credit card emoji.

Need to work on the layout a bit, but this should work for me.

Thanks for the replies guys. I am currently using Emojis for all of my categories, but I have 3+ credit cards but there is only 1 credit/debit card emoji so for accounts, they don't fit as well.

Alex, if there was a way for you to modify the Content Security Policy header settings to allow for base64 images, I would be all set. Wouldn't need to call out to an external server then. I can provide sample Tampermonkey script of what I'm running into if interested.

Great work so far! Just found out about Financier a few days ago and have already signed up and plan to extend pass the trial. Also set my nYNAB to month to month instead of a annual renewal in mid-January in preparation for making the full on switch.

I would like to request being able to set a custom picture/icon next to the account name in the left pane -- under "On Budget" / "Off Budget". I picture it being to the left of the Account Name so all of the icons are vertically aligned.

I had a Tampermonkey script that I used for nYNAB to add a picture of the credit card / debit card / bank logo / etc that related to that account. It was small enough to not cause any impact to the Account view, but helpful in identifying the exact account I was looking for. I tried to create a similar script for Financier but the Content Security Policy is preventing me from loading custom images (or base64 of an image) and I haven't figured out a way around it (I'm a Tampermonkey/Greasemonkey/Web Security newbie).