Customizing Financier: Blue Theme

[Billy_McSkintos]

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;
}


[jeremiahsvow]

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.

[Alex]

https://trello.com/c/P7TdZ0Uj/104-theme-color-picker

[Paul]

@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)

[Billy_McSkintos]

@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;
}
*/
/* -------------------------- */

[Paul]

@Billy_McSkintos
I enjoyed myself playing with this! 

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]

[Billy_McSkintos]

Do share!

[MacMichael]

Has anyone tried this using Firefox (Mac version)?  If so, is the code different?

[Billy_McSkintos]

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.

[asromzek]

I like that a lot. 

[asromzek]

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.

[Billy_McSkintos]

Good catch. Made some tweaks and updated the blue theme code above.

[asromzek]

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?

[Paul]

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

[Billy_McSkintos]

BTW I think you have accidentally overwritten the original code above - rather than just adding the additional lines

Thank you! Fixed.