Financier Forums

I have begun tweaking a little of the style to adjust some font sizing and a few other things to gain a little real estate and minimize scrolling. I thought I would share the "code" in case anyone else finds it useful or has done something similar. Please consider that I am learning as I go.

Sylish (Chrome): https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en)


Edited with comments explaining changes:

/* 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;
    cursor: pointer;
}
.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;
    background-color: #eff7ea;
    color: #3E3E3E;
}
/* -------------------------- */


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


I just installed stylish this morning, and was going to start playing with it. Off to a good start.

Fantastic, would be great to see the output of those with some true chops...

Add this for a lightened On Budget/Off Budget title background...

.app-view__accounts-title
{
background: #87bc69;
padding: 8px;
}
.app-view__accounts-list-border
{
margin: 0px;
padding: 0px;
}
.app-view__add-account
{
margin: 8px 0px 0px 8px;   
}

Yep that one makes sense.

Add this for a little more padding within the negative category value bubble...

Edit: Softened red color.

.budget__month-row--negative
{
padding: 2px 6px;
background-color: #ff4c4c;}

Smaller "C" and adjusted spacing for Win7/Chrome.

.cleared
{
padding: 1px 1px 0px 0px;
font-size: 11px;
}

These are all great. :)

I'll have to take an evening and look at getting a lot of these implemented.

QuoteSmaller "C" and adjusted spacing for Win7/Chrome.

I like that one too

@asromzek Any more?

@Billy_McSkintos @asromzek

I'm trying to reduce the font size for balance value in budget screen (the one in red blob).

But I couldn't find the right div to hit. Little help?

Quote from: cracksys on November 07, 2016, 07:33:51 PM
@Billy_McSkintos @asromzek

I'm trying to reduce the font size for balance value in budget screen (the one in red blob).

But I couldn't find the right div to hit. Little help?

This is just for negative values (red blob). Is this what you need? (I am no expert) but I think

.budget__month-cell--display
groups the outgoing and balance together.



.budget__month-row--negative {
    font-size: 1.0em;
}


I think I have found it now:

.budget__month-cell--display.budget__month-end {
    font-size: 0.5em;
}

Quote from: Billy_McSkintos on November 08, 2016, 10:47:51 AM
I think I have found it now:

Code Select Expand


.budget__month-cell--display.budget__month-end {
    font-size: 0.5em;
}

Thanks! Definitely what I've been looking for  parrot