Quickfile Colour Sceme

User Interface
21

Monitors?
I haven’t used a monitor for over 20 years.
I have a 15" Laptop.

22

I too preferred the old colour. Now it doesn’t match the colours used for the for the statuses on the purchase and invoice management pages at all.

There are areas on the UI that do need fixing. For example the Show Tags, Modify Columns, Modify Columns buttons on the purchase and invoice management pages are too small/poor contrast. The same with the “11551 Items found (Total Amount: GBP x,xxx.xx)” text just below them. These are very poor from a Web Accessibility perspective.

1 Like
23

How did you reduce the spacing? Used the above code and it’s so much better already :metal:

24

I used this code, its not perfect but its sorted it enough for me.

.dataLineRow td {
    
    padding: 2px 2px 2px 2px !important;
    vertical-align:middle !important;
}

.dataLineRow > .tdamt {
text-align: right;
padding: 2px 2px 0 0 !important;
vertical-align:middle  !important;
}
25

Glad it’s not just us, who got surprised with the washed-out colours.

The first reaction I heard here, after the bank feed was refreshed, was a shocked “Am I on the right page? Did someone hack QuickFile?”

It’s quite odd to have to write CSS to make an accounting system visually clear again. I guess it’s a combination of upselling to Power User and then the feeling of accomplishment of tinkering with the system for a sense of ownership – or not.

Finance and accounting are exciting, but maybe shouldn’t be for being jumped on by pastel colours…

26

I agree they are very wishy washy and do not stand out at all, I thought it was just my computer.

I’m glad its doesn’t bother me too much as I got to the CSS bit in quickfile and the rest is just double dutch.

27

Thanks for the customisation @QFMathew , works great with the bank.

However, the receipt hub is still the same new more faded colours.

Can you please advise how to customise to make those buttons strong colours again ?

28

Hello @mickcox

You can add the below in the same screen


}
.g_status_box_red, .lred-box {
    background-color: #E64F4F !important;
    border-left: solid 4px #DC4C64 !important;
}

.g_status_box_green, .lgreen-box  {
    background-color: #69D94B !important;
    border-left: solid 4px #69D94B !important;
}

Giving this result in the Receipt hub

image

29

Hi @QFSteve
Thanks for that, but the tagme buttons in the Recipt Hub are the same light pink colour. I copied and pasted your lines in below the other custom CSS, within GLOBAL CSS.
What have I done wrong?

30

Hello @mickcox

I had a look at your account,

The was some extra curly brackets in your GLOBAL CSS screen.

I tidied the code up and now it is working correctly.

31

Hi Steve

Thank you so much for your help