If you are using Stylish (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) or something similar to modify the css and want a blue theme:
/* 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;
}
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.
https://trello.com/c/P7TdZ0Uj/104-theme-color-picker :P
@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)
@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.
/* 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;
}
*/
/* -------------------------- */
@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:/* 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]
Do share!
Has anyone tried this using Firefox (Mac version)? If so, is the code different?
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 (https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjCtqPd9ajRAhXCxVQKHTwtBgMQFggcMAA&url=https%3A%2F%2Faddons.mozilla.org%2Fen-US%2Ffirefox%2Faddon%2Fstylish%2F&usg=AFQjCNHJlpbQSmCh1V8sf8OhyJx3lWqnaw&sig2=7E1rtu8P3RbISycXHkguiA) for Firefox too.
I like that a lot. :parrot:
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.
Good catch. Made some tweaks and updated the blue theme code above.
Quote from: Billy_McSkintos on January 04, 2017, 11:33:08 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?
Quote from: Billy_McSkintos on January 04, 2017, 11:33:08 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)
Quote
BTW I think you have accidentally overwritten the original code above - rather than just adding the additional lines 8)
Thank you! Fixed.
I disabled the Cleared icon (.cleared--true) setting, because I like the original green. Awesome stuff,
@Billy_McSkintos.
You missed a spot. ;)
I can't find the class to change that; can you?
Quote from: Billy_McSkintos on January 04, 2017, 04:02:31 PM
I can't find the class to change that; can you?
Looks to be .budgets__budget--loading:after in my testing. And if helpful, current opacity is set to .9 as part of the default background-color CSS.
Nice work on the styles. Think I prefer the blue theme and will be running with it for now!
@Billy_McSkintos I added this code:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("https://app.financier.io")
above your code in Firefox (Mac) using Stylish and it worked like a charm. I like your blue theme.
QuoteLooks to be .budgets__budget--loading:after in my testing. And if helpful, current opacity is set to .9 as part of the default background-color CSS.
Nice work on the styles. Think I prefer the blue theme and will be running with it for now!
Thank you. Added the following:
.budgets__budget--loading:after {
background-color: #4b7397;
}
.fa-cog:hover, .fa-gear:hover {
color: #4b7397;
}
Quote from: Billy_McSkintos on January 04, 2017, 04:02:31 PM
I can't find the class to change that; can you?
It's a total show stopper, so I'll look if I can find some spare time today.
@Billy_McSkintos Not to be picky, but since you are doing such a great job with the theme, what about the initial "Loading Financier" page? Is that do-able?
Quote from: MacMichael on January 05, 2017, 08:36:58 AM
@Billy_McSkintos
Not to be picky, but since you are doing such a great job with the theme, what about the initial "Loading Financier" page? Is that do-able?
The loading screen is blue for me with the current script.
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. :P
I found my problem for the loading screen. I left off the curly braces. So, if you are using Firefox (Mac) this line of code needs to be at the top of
@Billy_McSkintos code:
@-moz-document url("https://app.financier.io") {
}
That'll do it. I forgot to mention that I'm on Win7 with Chrome.
Quote from: Billy_McSkintos on January 04, 2017, 10:28:15 AM
Do share!
I have inserted the amended code into my original post - only four changes in all but a better balance on a larger screen. BTW I have no real idea what I am doing!
Me either but I enjoy the tinkering.
Quote from: Billy_McSkintos on January 05, 2017, 01:30:50 PM
Me either but I enjoy the tinkering.
I'm just fascinated by how much more I enjoy using Financier now - and just because I have been able to tweak it to look exactly how I want. It looks really slick and professional (perhaps because blue is my favourite colour!) ;D
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. :P
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 ....... :parrot:
.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
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 (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) or something similar to modify the css and want a blue theme:
/* Loader Screen */
}
You guy's are awesome !!!!!!! I had never knew that something like this existed !!!!! Worked like a charm ;D
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/