Author Topic: Customizing Financier: Blue Theme  (Read 3267 times)

Offline Billy_McSkintos

Customizing Financier: Blue Theme
« on: January 03, 2017, 03:59:02 PM »
If you are using Stylish or something similar to modify the css and want a blue theme:

Code: [Select]
/* Loader Screen */

.loader {
    background: -webkit-linear-gradient(#003c69, #4b7397);
    background: linear-gradient(#003c69, #4b7397);
}
/* Month Selector Bar */

.month-select__month,
.month-select__control {
    background-color: #134d77;
}
.month-select__month:hover,
.month-select__year:hover,
.month-select__control:hover {
    background-color: #003c69;
}
.month-select__year {
    background-color: #003c69;
}
.month-select__month--selected, .month-select__month--selected:hover {
    background-color: #4b7397;
}
.month-select__month--selected:hover {
    background-color: #003c69;
}
/* Budget Overview: Change bg color, font color  */

.month-overview__cell-head {
    background-color: #e3ecf2;
    color: #3E3E3E;
}
/* -------------------------- */
/* Left Sidebar */

.app-view__sidebar {
    background: -webkit-linear-gradient(#003c69, #4b7397);
    background: linear-gradient(#003c69, #4b7397);
}
.app-view__title {
    background: #003c69;
}
.app-view__sidebar-footer-button {
    background-color: #4b7397;
}
.app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
    background-color: #003c69;
}
.app-view__sidebar-footer--logged-in.drop-enabled .app-view__sidebar-footer-button,
.app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
    background-color: #003c69;
}
/* Budget Selection Screen */

.budgets-header {
    background-color: #4b7397;
}
.budgets__title {
    color: #4b7397;
    border-bottom: 1px solid #4b7397
}
.budgets__budget {
    transition: transform .25s ease;
    border: 1px solid #4b7397;
}
.budgets__budget--loading:after {
    background-color: #4b7397;           
}
.fa-cog:hover, .fa-gear:hover, .fa-cog:after, .fa-gear:after {
    color: #4b7397;
}
.fa-cog:before, .fa-gear:before {
    color: #003c69;
}

/* Budget Screen Buttons and Pop-ups */

.button--primary {
    background-color: #4b7397;
}
.button--primary:hover {
    background-color: #003c69;
}
.form__textarea:focus {
    border-color: #4b7397;
}
.budget__month-cell--input input {
    border: 1px solid #4b7397;
}
.budget__month-cell--input input:focus,
.budget__month-cell--input input:hover {
    border: 1px solid #003c69;
}
/* Account Manifest */

.account__th {
    background-color: #4b7397;
}
.account__add-button {
    color: #003c69;
}
.account__editing-button--save {
    background-color: #4b7397
}
.account__editing-button--save:hover {
    background-color: #003c69
}
.cleared--true {
    background-color: #4b7397;
}
.account__tr--stripe {
    background: #f4f7f6;
}
.virtual-list .vs-repeat-after-content, .virtual-list .vs-repeat-before-content {
    background: repeating-linear-gradient(180deg,#fff,#fff 30px,#F4F7F6 0,#F4F7F6 60px);
}
.virtual-list.odd-total .vs-repeat-after-content {
    background: repeating-linear-gradient(180deg,#F4F7F6,#F4F7F6 30px,#fff 0,#fff 60px);
}

@keyframes fade-to-primary {
  from {
    background: white;
  }

  to {
    background: #4b7397;
  }
}

@keyframes fade-to-primary-caret {
  from {
    border-bottom-color: white;
  }

  to {
    border-bottom-color: #4b7397;
  }
}

/* Modal Popup */

.ngdialog.ngdialog-theme-default .ngdialog-content {
    border: 5px solid #4b7397;
}
.modal footer button.primary {
    background-color: #4b7397;
}
.modal footer button.primary:disabled {
    background-color: #4b7397;
}
.modal footer button.primary:hover {
    background-color: #003c69;
}
.modal form input:focus,
.modal form select:focus {
    border-color: #4b7397;
}
/* Error Background */
.e404 {
    background-color: #003c69;
}
« Last Edit: January 27, 2017, 10:01:16 AM 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

Offline jeremiahsvow

Re: Customizing Financier: Blue Theme
« Reply #1 on: January 03, 2017, 04:59:18 PM »
Uhh... I like the blue. That is nice.

Could there be color themes like this added as an option? I am not a part of the web guru tribe.

Offline Alex

I am the Financier owner/admin/coder dude.

Offline Paul

Re: Customizing Financier: Blue Theme
« Reply #3 on: January 04, 2017, 03:56:55 AM »
@Billy_McSkintos
Added Stylish and your code - very nice indeed - thank you! Love the blue. Presumably this will not break as Financier is updated?

PS Quick comment for those who like a Financier App in their Dock - this will not  work if you are using Coherence ( http://www.bzgwebs.com) to create a Mac OS App from Chrome for Financier (extensions are not supported through Coherence)
« Last Edit: January 04, 2017, 04:32:53 AM by Paul »

Offline Billy_McSkintos

Re: Customizing Financier: Blue Theme
« Reply #4 on: January 04, 2017, 09:13:50 AM »
@Paul You're welcome, glad you like it. I personally think some of the fonts and sizing are a little too chunky so I also have this code snippet running that makes things a little smaller, thought you might be interested.

Code: [Select]
/* Reduce size of fonts and spacing in month header */
.month-select__control,
.month-select__month,
.month-select__year {
    font-size: 0.8em;
}
.month-overview__month-total {
    font-size: 1.2em;
    margin-top: 0em;
}
.month-overview__month-text {
    font-size: 1em;
}
.month-overview__month-list {
    font-size: .65em;
}
.month-overview__month-total-subtext {
    font-size: .6em;
}
/* -------------------------- */

/* Reduce Size of Accounts Font and spacing */
.app-view__account {
    font-size: .7em;
    line-height: 1.5rem;
}
.account__balance-value {
    font-size: 1em;
}
/* -------------------------- */

/* Budget Overview: Change bg color, font color and size */
.month-overview__cell-head {
    font-weight: 400;
    font-size: .8em;
}
/* -------------------------- */

/* Change Section Icons */
.fa-credit-card:before {
    content: "\f19c";
}
.fa-pie-chart:before {
    content: "\F201";
}
/* -------------------------- */

/* Change Sticky Note and Right Arrow icons */
.fa-sticky-note-o:before {
    content: "\f0f6";
    font-size: 0.9em;
}
.fa-arrow-right:before {
    content: "\F101";
}
/* -------------------------- */

.app-view__link {
    line-height: 2.2rem;
}
.app-view__link aside {
    line-height: 2.2rem;
}
/* -------------------------- */

/* Smaller Cleared 'C' on manifest */
.cleared
{
 padding: 1px 1px 0px 0px;
 font-size: 11px;
}
/* -------------------------- */

/* Highlighting of On and Off Budget Account sections in sidebar
.app-view__accounts-title
{
 background: #87bc69;
 padding: 6px;
}
.app-view__accounts-list-border
{
 margin: 0px;
 padding: 0px;
}
.app-view__add-account
{
 margin: 6px 0px 0px 6px;   
}
*/
/* -------------------------- */

/* Padding and color change of Negative budget values */
.budget__month-row--negative
{
 padding: 1px 4px;
 background-color: #ff4c4c;
}
/* -------------------------- */

/* Color change of Positive budget values */
/*
.budget__month-cell--display
{
 color: #4f703c;
}
*/
/* -------------------------- */
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

Offline Paul

Re: Customizing Financier: Blue Theme
« Reply #5 on: January 04, 2017, 10:17:51 AM »
@Billy_McSkintos
I enjoyed myself playing with this!  ;D

I now have both styles running in Stylish. My screen is 24 inch so I tweaked the font sizes for the accounts list and the month headers up slightly - and I'm very happy with the outcome in Chrome.

Out of interest I also loaded both styles into the extension in Safari. However, the fonts in the Accounts list look terrible (as they do with the unmodified Financier) so I'll stick with Chrome.

Thanks again

Paul
PS: The modifications I made result in the amended version below:

Code: [Select]
/* Reduce size of fonts and spacing in month header */
.month-select__control,
.month-select__month,
.month-select__year {
    font-size: 0.8em;
}
.month-overview__month-total {
    font-size: 1.2em;
    margin-top: 0em;
}
.month-overview__month-text {
    font-size: 1em;
}
.month-overview__month-list {
    font-size: .75em;
}
.month-overview__month-total-subtext {
    font-size: .7em;
}
/* -------------------------- */

/* Reduce Size of Accounts Font and spacing */
.app-view__account {
    font-size: .85em;
    line-height: 1.5rem;
}
.account__balance-value {
    font-size: 1em;
}
/* -------------------------- */

/* Budget Overview: Change bg color, font color and size */
.month-overview__cell-head {
    font-weight: 400;
    font-size: .8em;
}
/* -------------------------- */

/* Change Section Icons */
.fa-credit-card:before {
    content: "\f19c";
}
.fa-pie-chart:before {
    content: "\F201";
}
/* -------------------------- */

/* Change Sticky Note and Right Arrow icons */
.fa-sticky-note-o:before {
    content: "\f0f6";
    font-size: 0.9em;
}
.fa-arrow-right:before {
    content: "\F101";
}
/* -------------------------- */

.app-view__link {
    line-height: 2.2rem;
}
.app-view__link aside {
    line-height: 2.2rem;
}
/* -------------------------- */

/* Smaller Cleared 'C' on manifest */
.cleared
{
 padding: 1px 1px 0px 0px;
 font-size: 11px;
}
/* -------------------------- */

/* Highlighting of On and Off Budget Account sections in sidebar
.app-view__accounts-title
{
 background: #87bc69;
 padding: 6px;
}
.app-view__accounts-list-border
{
 margin: 0px;
 padding: 0px;
}
.app-view__add-account
{
 margin: 6px 0px 0px 6px;   
}
*/
/* -------------------------- */

/* Padding and color change of Negative budget values */
.budget__month-row--negative
{
 padding: 1px 4px;
 background-color: #ff4c4c;
}
/* -------------------------- */

/* Color change of Positive budget values */
/*
.budget__month-cell--display
{
 color: #4f703c;
}
*/
/* -------------------------- */
[/code]
« Last Edit: January 05, 2017, 10:22:38 AM by Paul »

Offline Billy_McSkintos

Re: Customizing Financier: Blue Theme
« Reply #6 on: January 04, 2017, 10:28:15 AM »
Do share!
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

Offline MacMichael

Re: Customizing Financier: Blue Theme
« Reply #7 on: January 04, 2017, 10:32:26 AM »
Has anyone tried this using Firefox (Mac version)?  If so, is the code different?

Offline Billy_McSkintos

Re: Customizing Financier: Blue Theme
« Reply #8 on: January 04, 2017, 10:36:07 AM »
Not tried it myself but it is just CSS so any plugin that can adjust the CSS of a site would work with this. There is a Stylish plugin for Firefox too.
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: Blue Theme
« Reply #9 on: January 04, 2017, 11:04:59 AM »
I like that a lot.  :parrot:
/s implied, unless stated otherwise.

Online asromzek

Re: Customizing Financier: Blue Theme
« Reply #10 on: January 04, 2017, 11:06:33 AM »
The only issue I see is that the current months that are displayed are not highlighted in the calendar bar at the top, like they are with the default theme.
/s implied, unless stated otherwise.

Offline Billy_McSkintos

Re: Customizing Financier: Blue Theme
« Reply #11 on: January 04, 2017, 11:33:08 AM »
Good catch. Made some tweaks and updated the blue theme code above.
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: Blue Theme
« Reply #12 on: January 04, 2017, 11:36:15 AM »
Good catch. Made some tweaks and updated the blue theme code above.

Did you update with the script above with only a portion of the full script?
/s implied, unless stated otherwise.

Offline Paul

Re: Customizing Financier: Blue Theme
« Reply #13 on: January 04, 2017, 11:37:42 AM »
Good catch. Made some tweaks and updated the blue theme code above.

Nice update - I have added this to the blue theme code and it works great.
BTW I think you have accidentally overwritten the original code above - rather than just adding the additional lines 8)

Offline Billy_McSkintos

Re: Customizing Financier: Blue Theme
« Reply #14 on: January 04, 2017, 12:02:30 PM »
Quote
BTW I think you have accidentally overwritten the original code above - rather than just adding the additional lines 8)

Thank you! Fixed.
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