Author Topic: CSS/HTML Re-Styling  (Read 1319 times)

Offline Billy_McSkintos

CSS/HTML Re-Styling
« on: October 24, 2016, 03:11:04 PM »
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


Edited with comments explaining changes:

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;
    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;
}
/* -------------------------- */
« Last Edit: October 26, 2016, 09:26:38 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

Online asromzek

Re: CSS/HTML Re-Styling
« Reply #1 on: October 24, 2016, 03:21:46 PM »
I just installed stylish this morning, and was going to start playing with it. Off to a good start.
/s implied, unless stated otherwise.

Offline Billy_McSkintos

Re: CSS/HTML Re-Styling
« Reply #2 on: October 24, 2016, 03:24:32 PM »
Fantastic, would be great to see the output of those with some true chops...
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: CSS/HTML Re-Styling
« Reply #3 on: October 24, 2016, 03:36:19 PM »
Add this for a lightened On Budget/Off Budget title background...

Code: [Select]
.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;   
}
« Last Edit: October 24, 2016, 03:51:12 PM by asromzek »
/s implied, unless stated otherwise.

Offline Billy_McSkintos

Re: CSS/HTML Re-Styling
« Reply #4 on: October 24, 2016, 03:48:24 PM »
Yep that one makes sense.
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: CSS/HTML Re-Styling
« Reply #5 on: October 24, 2016, 04:12:34 PM »
Add this for a little more padding within the negative category value bubble...

Edit: Softened red color.

Code: [Select]
.budget__month-row--negative
{
 padding: 2px 6px;
 background-color: #ff4c4c;}
« Last Edit: October 24, 2016, 08:01:20 PM by asromzek »
/s implied, unless stated otherwise.

Online asromzek

Re: CSS/HTML Re-Styling
« Reply #6 on: October 24, 2016, 04:52:02 PM »
Smaller "C" and adjusted spacing for Win7/Chrome.

Code: [Select]
.cleared
{
 padding: 1px 1px 0px 0px;
 font-size: 11px;
}
/s implied, unless stated otherwise.

Offline Alex

Re: CSS/HTML Re-Styling
« Reply #7 on: October 24, 2016, 05:00:01 PM »
These are all great. :)

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

I am the Financier owner/admin/coder dude.

Offline Billy_McSkintos

Re: CSS/HTML Re-Styling
« Reply #8 on: October 24, 2016, 05:23:24 PM »
Quote
Smaller "C" and adjusted spacing for Win7/Chrome.

I like that one 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

Offline Billy_McSkintos

Re: CSS/HTML Re-Styling
« Reply #9 on: November 01, 2016, 11:59:40 PM »
@asromzek Any more?
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 cracksys

Re: CSS/HTML Re-Styling
« Reply #10 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?

Offline Billy_McSkintos

Re: CSS/HTML Re-Styling
« Reply #11 on: November 07, 2016, 10:12:15 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.


Code: [Select]
.budget__month-row--negative {
    font-size: 1.0em;
}
« Last Edit: November 07, 2016, 10:30:28 PM 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 Billy_McSkintos

Re: CSS/HTML Re-Styling
« Reply #12 on: November 08, 2016, 10:47:51 AM »
I think I have found it now:
Code: [Select]
.budget__month-cell--display.budget__month-end {
    font-size: 0.5em;
}
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 cracksys

Re: CSS/HTML Re-Styling
« Reply #13 on: November 08, 2016, 02:05:29 PM »
I think I have found it now:
Code: [Select]
.budget__month-cell--display.budget__month-end {
    font-size: 0.5em;
}
Thanks! Definitely what I've been looking for  parrot