Author Topic: Customizing Financier: Themes and Styling  (Read 241 times)

Offline Billy_McSkintos

Customizing Financier: Themes and Styling
« on: February 20, 2018, 09:38:18 AM »
I have added the Stylish styles to userstyles.org so that they can be found and (sometimes) show up in the library tab of the plugin.

- Smaller Financier - shrinks some fonts and spacing
- Blue Financier - dark blue theme
- 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.
« Last Edit: February 24, 2018, 05:16:53 PM by Billy_McSkintos »
Project Fi Referral - Get $20 credit: https://g.co/fi/r/RWN1J1
Betterment.com Referral - 90 days managed free: https://www.betterment.com/?invite=marcusglynn

Online asromzek

Re: Customizing Financier: Themes and Styling
« Reply #1 on: February 20, 2018, 09:53:36 AM »
This is awesome. :parrot:
/s implied, unless stated otherwise.

Offline keyboard

Re: Customizing Financier: Themes and Styling
« Reply #2 on: February 20, 2018, 10:00:50 AM »
Good Job Billy  ;D ;D ;D ;D
Go for the 7 Ball  !!!!!!!

www.createsongstyles.com

Offline Rhuarc

Re: Customizing Financier: Themes and Styling
« Reply #3 on: February 21, 2018, 07:34:06 PM »
Love these, personally using both the Blue and Smaller Financier themes!