Financier Forums

This type of stuff is great guys. Keep it up! Taking notes for the theme task.

Quote from: asromzek on January 05, 2017, 09:03:05 AM
The popup is also green after successfully reconciling. It looks like some of the color setting are backed into the app, and can't be overridden with the stylish script. Totally unusable.

Alex helped me out. Add this below (also added to original theme post):


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


Alex helped me out. Add this below (also added to original theme post):


Nice work @Billy_McSkintos @Alex ! Looking very good. Now I need to find away to change the remaining bits of green font eg Available to budget lines .......

.month-overview__month-total {
    color: #00fdff;
}

Quote from: Billy_McSkintos on January 06, 2017, 09:46:30 AM
.month-overview__month-total {
    color: #00fdff;
}

With your tuition I think I'm getting the hang of this (using the browsers inspect element tool). So to keep the red negative as well just add:

.month-overview__month-total--negative {
   color: #ff4c4c
}   

yep, that looks right.

Quote from: Billy_McSkintos on January 06, 2017, 10:18:37 AM
yep, that looks right.

So keeping blue for positive and adding red for negatives the additional lines are as below.
}
.account__balance-value {
color: #00fdff;
}
.account__balance-value--negative {
color: #ff4c4c;

And my full adaptation of your code for a Blue Theme, increasing font size slightly in the Accounts register, replacing all green font and retaining red negatives is:
/* 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;
}
.month-overview__month-total {
    color: #00fdff;
}
.month-overview__month-total--negative {
color: #ff4c4c   
}
/* -------------------------- */
/* 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 {
    color: #4b7397;
}
/* 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);
}
.account__balance-value {
color: #00fdff;
}
.account__balance-value--negative {
color: #ff4c4c;
   
/* Modal Popup */
}
.ngdialog.ngdialog-theme-default .ngdialog-content {
    border: 5px solid #4b7397;
}
.modal footer button.primary {
    background-color: #4b7397;
}
.modal footer button.primary:hover {
    background-color: #003c69;
}
.modal form input:focus,
.modal form select:focus {
    border-color: #4b7397;
}
/* Reconcilation Popup */
@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;
    }
  /* Reduce Font sizes */ 
}
/* 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;
}
*/
/* -------------------------- */


All working nicely here on Chrome (for Mac)

I like having the color of the numbers unaffected, so white/green/red means I'm looking at data. That's why I'm also leaving the cleared icon green, because it pops out against all the blue.

And I really wish Stylish synced between computers... there has to be a way...

I want that too

Quote from: Billy_McSkintos on January 06, 2017, 03:39:44 PM
I want that too

Gonna miss it in the mobile version!

Financier in Safari also works with Stylish (1.9.2) and the Blue Theme code.

However, the Account list font is very "pixelated" and faint in Safari (with or without Stylish). Any thoughts on a line of code to fix this please? Chrome is just fine.

I am using Financier in an App on my Mac (made from Chrome using Coherence - http://www.bzgwebs.com) I like having a dedicated App rather than using a web browser.

I thought this would mean I could no longer use Stylish and "my" beloved Blue Theme. To my surprise, after rummaging in Preferences - and from there adding the Stylish extension and Blue theme  to my Financier App -  it is all working beautifully.

Quote from: Billy_McSkintos 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 Expand


/* Loader Screen */

}


You guy's are awesome !!!!!!!   I had never knew that something like this existed !!!!!   Worked like a charm   

Quote from: asromzek on January 06, 2017, 03:15:09 PM
And I really wish Stylish synced between computers... there has to be a way...

No chrome sync, perhaps time to switch [back] to firefox?

https://addons.mozilla.org/nn-NO/firefox/addon/stylishsync/