Financier Forums

Financier App => Other => Topic started by: Billy_McSkintos on February 20, 2018, 09:38:18 AM

Title: Customizing Financier: Themes and Styling
Post by: Billy_McSkintos on February 20, 2018, 09:38:18 AM
I have added the Stylish (https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) styles to userstyles.org (https://userstyles.org/styles/browse?search_terms=financier) so that they can be found and (sometimes) show up in the library tab of the plugin.

- Smaller Financier (https://userstyles.org/styles/155953/financier-smaller) - shrinks some fonts and spacing
- Blue Financier (https://userstyles.org/styles/155988/financier-blue) - dark blue theme
- nYNABish (https://userstyles.org/styles/155955/financier-nynabish) - theme based on nYNAB

@cracksys You created an excellent take on YNAB4 style, but it has elements that cannot be uploaded.

For others interested in the YNAB4 style, here is his code:
Code: [Select]
@import url('https://fonts.googleapis.com/css?family=Quicksand:500|Lato|Clear+Sans+Pro|Nunito+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&text=1234567890');

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/l/font?kit=56hreGcsKW_5tYMq1kGVlI1gxl0b5o72Zj2IMmSm8lM&skey=62c1cbfccc78b4b2&v=v14) format('woff2');
}

body, button, html, input, select, textarea {
    font-family: 'Open Sans','Quicksand','Nunito Sans','Lato';
}

.app-view__sidebar {
background: -webkit-linear-gradient(top, rgba(42,148,195,1) 0%, rgba(46,152,200,1) 100%);
background: linear-gradient(to bottom, rgba(42,148,195,1) 0%, rgba(46,152,200,1) 100%);
}

.app-view__links {
    background: #1A6F9D;
    border-style: solid;
    border-width:1px;
    border-color: #2B95C4;
    border-radius: 8px;
    margin: 5px 5px 5px 5px;
}

.app-view__accounts-list-border {
    background: #1A6F9D;
    border-style: solid;
    border-width:1px;
    border-color: #2B95C4;
    border-radius: 8px;
margin: 5px 5px 5px 5px;
}

.account__tr--stripe {
    background: #EDF6FB;   
}

.account__th {
background: -webkit-linear-gradient(top, rgba(103,114,120,1) 0%, rgba(77,90,97,1) 100%);
background: linear-gradient(to bottom, rgba(103,114,120,1) 0%, rgba(77,90,97,1) 100%);
}

.account__tbody {
    background: #FFFFFF;
}

.account__add-button {
color: #000000;
}

.app-view__title {
    background: rgba(42,148,195,1);
    color: #fff;
}

.app-view__sidebar-footer {
    background-color: rgba(46,152,200,1);
}

.sync-status {
    margin: 5px;
}

.app-view__sidebar-footer-button {
    background-color: rgba(46,152,200,1);
}

.app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
    background-color: #00596f;
}

.budget__thead {
    background-color: #DBDBDB;
}

.month-overview__month-overview--old {
    background-color: #5C666D;
}

.month-select__control {
background: -webkit-linear-gradient(top, #D6D6D6, #C7C8C7);
background: linear-gradient(to bottom, #D6D6D6, #C7C8C7);
    border-width:1px;
    border-style:outset;
}

.month-select__month {
    background: #49575E;
}

.month-select__month:hover {
    background: #49575E;
    opacity: 0.7;
}

.month-select__year {
    background-color: #2B3335;
}

.month-select__month:hover,
.month-select__year:hover,
.month-select__control:hover {
    opacity: 0.8;
}

.month-select__month--selected {
    background-color: #0082CB;
}

.month-overview__cell-head {
background: #EEF5E7;
    margin: 0px 0px 4px 0px;
}

.month-overview__month-overview {
    border-style: solid;
    border-width:1px;
    border-color: #2D3236;
    border-radius: 5px;
    margin: 4px 2px 4px 2px;
}

.budget__categories-label {
    color: #000000;
}

.budget__master-category-label {
background-color: #E6F4FB;
    border-width:1px;
    border-color:#2DB6E7;
border-top-style: dotted;
    border-bottom-style: dotted;
}

.budget__month-cell--input input {
    border: 1px solid rgba(58, 186, 232, 0.75);
}

.budget__category-label {
    font-size: 0.9em;
}

.account__td {
    font-size: 0.925em;
}

.month-overview__month-total {
    color: #ADCD5C;
font-weight: bold; 
}

.month-overview__month-total--negative {
    color: #ff4c4c;
font-weight: bold; 
}

.budget__cell-input,
.budget__month-cell--display {

}

Disclaimer: I am nothing more than a tinkerer so my code is likely messy and malformed.
Title: Re: Customizing Financier: Themes and Styling
Post by: asromzek on February 20, 2018, 09:53:36 AM
This is awesome. :parrot:
Title: Re: Customizing Financier: Themes and Styling
Post by: keyboard on February 20, 2018, 10:00:50 AM
Good Job Billy  ;D ;D ;D ;D
Title: Re: Customizing Financier: Themes and Styling
Post by: Rhuarc on February 21, 2018, 07:34:06 PM
Love these, personally using both the Blue and Smaller Financier themes!