Hi Gregorio/GnuCash users,
Some basics:
What operating system are you using?
What version of GNUCash are you using? The current version is 5.10 -
https://www.gnucash.org/download.phtml
---
Thanks,
Brad - https://www.facebook.com/brad.morrison.12327/ &
https://norcal.social/@BradMorrison
On 2025-01-21 05:49, Gregório Miranda wrote:
> Hi all,
> I'm customizing my GTK3 style sheets and have been relatively successful at
> making a dark everforest theme (see CSS in the attachments), but I just
> can't do much with the calendar shown inside the scheduled transactions tab
> <https://github.com/ggio/gnucash_dark_everforest/blob/main/calendar_issue.png>(#gnc-id-dense-calendar).
> I've searched a lot, read the docs and tweaked extensively with GTK
> inspector, but I'm still lost.
>
> The calendar is still ugly as hell and the options given in the doc's CSS
> sample file aren't helping at all. I got to change the header's background
> and the focused background (but not the focused text).
>
> Would appreciate it if someone can show me the right track.
>
> Specially, I would like to customize:
>
> - The *primary and secondary month background colors *(the
> "#gnc-id-dense-calendar .primary" and "... .secondary" options within the
> CSS sample simply doesn't work);
> - The *background color of empty cells*;
> - The *text at the highlighted/focused dates* (currently whithish in a
> yellow background).
>
> Gregório
> _______________________________________________
> gnucash-user mailing list
> gnucash-user@gnucash.org
> To update your subscription preferences or to unsubscribe:
> https://lists.gnucash.org/mailman/listinfo/gnucash-user
> -----
> Please remember to CC this list on all your replies.
> You can do this by using Reply-To-List or Reply-All.
/*
* Author: Gregório Ribeiro de Miranda
* Date: 2025-01-21
* Current version hosted at: https://github.com/ggio/gnucash_dark_everforest
*
* Gtk3 css file for use with gnucash.
*/
/* ====== COLORS ====== */
/* Elementary colors */
@define-color yellow #b58900;
@define-color red #e04c56;
@define-color red-light #dc747b;
@define-color dark #2f383e;
@define-color dark2 #374247;
@define-color dark3 #22282c;
@define-color bg-new #54646c;
@define-color fg-dark #d3c6aa;
@define-color fg2-dark #C9B382;
@define-color fg-new #cdae6a;
@define-color charcoal #2a2a2a;
/* Everforest */
@define-color bg0-dark #22282c;
@define-color bg1-dark #272f34;
@define-color bg-dark #2f383e;
@define-color bg2-dark #374247;
@define-color bg3-dark #404c51;
@define-color bg4-dark #4a555b;
@define-color bg5-dark #525c62;
@define-color bg_visual #503946;
@define-color bg_red #4e3e43;
@define-color bg_green #404d44;
@define-color bg_blue #394f5a;
@define-color bg_yellow #4a4940;
@define-color shadow #000070;
/* Application wide colors */
@define-color bg_color @dark2;
@define-color bg_highlight @bg3-dark;
@define-color bg_dark @dark;
@define-color bg_darker @dark3;
@define-color fg_color @fg-dark;
@define-color fg_highlight @fg-new;
@define-color fg_pop @yellow;
@define-color negative @red;
/* Register's colors */
@define-color bg_header #4c5f3a;
/*@define-color fg_header #d4ddcd;*/
@define-color bg_primary #A7C080;
@define-color fg_primary #1c2921;
@define-color bg_secondary #fff9b2;
@define-color fg_secondary #272402;
@define-color bg_cursor #ffeb81;
@define-color fg_cursor #3a3000;
/* ====== TODO ====== */
/*
* (A) Calendar
* (C) Reports' CSS
*/
/* ====== GENERAL ====== */
/* Application wide font setting */
*
{
color: @fg_color;
border-color: @fg_color;
outline-color: @fg_color;
outline-width: 0px;
border-width: 0px;
}
/* Highlight Text */
.gnc-class-highlight
{
background-color: @bg_color;
color: @fg_highlight;
}
entry
{
background-color: @bg_darker;
}
/* Scollbar size */
scrollbar slider
{
/* Size of the slider */
min-width: 20px;
min-height: 20px;
border-radius: 22px;
color: @fg_color;
background-color: @fg_color;
/* Padding around the slider */
border: 5px solid transparent;
}
/* ====== MAIN ====== */
#gnc-id-main-window
{
background-color: @bg_darker;
}
#gnc-id-main-window notebook header
{
background-color: @bg_darker;
}
/* Area above the status bar */
#gnc-id-account-page
{
background-color: @bg_darker;
}
#gnc-id-account-tree:hover
{
/* Why doesn't this apply? color applies just fine... */
background-color: @bg_highlight;
}
/* Tweaking with some trees to add some contrast in the budget */
#gnc-id-account-tree
{
background-color: @bg_color;
}
/* Controls, along much other things, the budget summary */
treeview
{
background-color: @bg_darker;
color: @fg_color;
}
treeview:hover
{
background-color: @bg_highlight;
color: @fg_highlight;
}
treeview:selected
{
color: @fg_pop;
}
gnc-id-sheet-list treeview
{
background-color: @bg_highlight;
color: @fg_highlight;
}
gnc-id-sheet-list treeview:hover
{
border-style: solid;
border-width: 1px;
border-color: @fg_highlight;
background-color: @bg_color;
}
/* Progress bar */
progressbar progress
{
color: green;
}
/* Status Bar */
statusbar frame
{
margin-top: 0px;
margin-bottom: 0px;
background-color: @bg_darker;
}
statusbar
{
background-color: @bg_darker;
}
statusbar label
{
/* font-size: 12px; */
color: @fg_pop;
}
/* Summary bar */
#gnc-id-summarybar
{
background-color: @bg_color;
color: @fg_pop;
}
#gnc-id-summarybar .gnc-class-highlight
{
background-color: @bg_highlight;
color: @fg_pop;
}
#gnc-id-summarybar label
{
background-color: @bg_color;
color: @fg_pop;
}
/* Toolbar Button size and spacing */
toolbar
{
background-color: @bg_color;
color: @fg_highlight;
}
/* Toolbar font size, 0 to remove text */
toolbar toolbutton label
{
/* font-size: 0px; */
}
toolbar toolbutton button
{
padding-left: 4px;
padding-right: 4px;
}
toolbar toolbutton label
{
padding-left: 4px;
padding-right: 4px;
}
/* Negative number color */
.gnc-class-negative-numbers
{
color: @negative;
}
/* Gnucash Main Window, reduce size */
#gnc-id-main-window notebook tab
{
min-height: 25px;
min-width: 0px;
padding-top: 4px;
padding-bottom: 4px;
margin-top: 3px;
margin-bottom: 3px;
border-top: 0px;
border-bottom: 0px;
background-color: @bg_dark;
}
#gnc-id-main-window notebook tab:checked
{
background-color: @bg_highlight;
}
#gnc-id-main-window notebook tab:checked label
{
color: @fg_pop;
}
#gnc-id-main-window notebook label
{
/* font: 14px arial, sans-serif; */
}
#gnc-id-main-window notebook tab button
{
min-height: 0;
min-width: 0;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
tab:checked, tab:checked label
{
background-color: @bg_highlight;
color: @fg_highlight;
}
/* ====== MENU ====== */
#gnc-id-main-window menubar
{
color: @fg_color;
background-color: @bg_color;
outline-width: 0px;
border-width: 0px;
}
menuitem label
{
background-color: inherit;
color: inherit;
}
menuitem label accelerator
{
background-color: inherit;
color: inherit;
}
menuitem:disabled
{
color: mix (@fg_color, @bg_color, 0.5);
}
menuitem:hover
{
background-color: @bg_highlight;
color: @fg_highlight
}
menuitem
{
background-color: @bg_color;
color: @fg_color;
}
/* ====== REGISTER ====== */
gnc-id-register
{
}
/* Register sheet font setting */
gnc-id-sheet
{
border-width: 0px;
outline-width: 0px;
background-color: @bg_color;
}
/* Register header font setting */
gnc-id-header
{
}
.gnc-class-register-foreground
{
color: inherit;
}
gnc-id-cursor entry
{
background-color: @bg_cursor;
color: @fg_cursor;
/* border-color: red;
border-width: 1px; */
}
gnc-id-cursor entry undershoot
{
background-color: @bg_cursor;
color: @fg_cursor;
}
gnc-id-cursor widget
{
color: inherit;
background-color: inherit;
border-color: inherit;
}
selection
{
background-color: @fg_color;
color: @bg_color;
}
/* Register sheet calendar */
gnc-id-sheet calendar
{
border-width: 1px;
}
/* Register User Colors, remove 'user' for builtin register values */
.gnc-class-register-header
{
color: @fg_color;
background-color: @bg_header;
}
.gnc-class-register-primary
{
color: @fg_primary;
background-color: @bg_primary;
}
.gnc-class-register-primary:disabled
{
color: mix (black, @bg_color, 0.5);
background-color: @bg_primary;
}
.gnc-class-register-secondary
{
color: @fg_secondary;
background-color: @bg_secondary;
}
.gnc-class-register-secondary:disabled
{
color: mix (black, @bg_color, 0.5);
background-color: @bg_secondary;
}
.gnc-class-register-split
{
color: @fg_secondary;
background-color: @bg_secondary;
}
.gnc-class-register-split:disabled
{
color: mix (@fg_color, @bg_color, 0.5);
}
.gnc-class-register-cursor
{
background-color: @bg_cursor;
color: @fg_cursor;
}
/* ====== BUTTONS ====== */
button
{
/* Clear button image imposed by GTK theme */
background-image: none;
border-width: 3px;
border-style: solid;
border-color: mix (@bg_darker, @bg_dark, 0.5);
background-color: @bg_dark;
}
button:hover
{
border-color: @bg_darker;
background-color: @bg_highlight;
}
button:hover label
{
background-color: inherit;
color: @fg_pop;
}
button:active
{
border-color: mix (@bg_darker, @fg_highlight, 0.5);
}
button:focus label
{
color: @fg_highlight;
}
button:focus
{
background-color: @bg_highlight;
}
.text-button label
{
background-color: inherit;
}
/* Other buttons */
check
{
background-image: none;
color: @fg_pop;
background-color: mix (@bg_darker, @bg_color, 0.5);
}
check:hover
{
background-color: @bg_darker;
}
check:checked
{
background-color: @bg_darker;
}
radio
{
background-image: none;
color: @fg_pop;
background-color: mix (@bg_darker, @bg_color, 0.5);
}
gnc-id-cursor button
{
color: inherit;
background-color: inherit;
border-color: inherit;
border-width: 1px;
}
/* ====== DIALOGS ====== */
assistant
{
background-color: @bg_color;
}
assistant notebook
{
background-color: @bg_darker;
}
dialog
{
background-color: @bg_color;
}
dialog stack
{
background-color: @bg_color;
}
messagedialog
{
background-color: @bg_color;
}
messagedialog box
{
}
.sidebar
{
background-color: @bg_dark;
}
text
{
background-color: @bg_darker;
}
/* Frame around text in the tip of the day dialog */
textview
{
background-color: @bg_darker;
}
window, stack
{
background-color: @bg_color;
}
window header
{
background-color: @bg_darker;
}
/* Specific windows */
dialog #gnc-id-account-tree
{
background-color: @bg_darker;
}
#gnc-id-account notebook header
{
background-color: @bg_darker;
}
#gnc-id-commodity
{
background-color: @bg_color;
}
#gnc-id-preferences stack
{
background-color: @bg_darker;
}
#gnc-id-preferences tabs
{
background-color: @bg_color;
}
/* ====== CALENDAR ====== */
/* Dense Calendar Settings, use widget name gnc-id-dense-calendar
* or gtk css name calendar which would also apply to other calendar
* widgets */
/*.calendar {*/
/* background-color: @bg_color;*/
/* color: @fg_color;*/
/*}*/
#gnc-id-dense-calendar .frame
{
}
calendar .frame
{
}
#gnc-id-dense-calendar .header
{
}
calendar .header
{
color: @fg_color;
background-color: @bg_color;
border-radius: 2px ;
border-width: 1px ;
}
calendar .highlight
{
background-color: @bg_dark ;
color: @fg_color ;
border-radius: 1px ;
padding: 1px ;
}
calendar.view
{
background-color: @bg_highlight ;
}
calendar.button:hover
{
background-color: @bg_highlight ;
border-style: solid ;
border-width: 1px ;
color: @fg_pop;
}
calendar*:selected,
calendar*:selected:focus
{
background-color: @fg_pop ;
color: @bg_darker ;
border-radius: 2px ;
}
#gnc-id-dense-calendar .primary
{
}
#gnc-id-dense-calendar .secondary
{
}
#gnc-id-dense-calendar .markers
{
color: @negative;
}
#gnc-id-dense-calendar-popup
{
color: @fg_color;
}
#gnc-id-dense-calendar-popup treeview
{
color: @fg_color;
}
/* ====== RECONCILE WINDOW ====== */
#gnc-id-reconcile-totals *
{
}
.gnc-class-credits treeview
{
}
.gnc-class-credits treeview:selected
{
background-color: @bg_color;
color: @fg_color;
}
.gnc-class-debits treeview
{
}
.gnc-class-debits treeview:selected
{
background-color: @bg_highlight;
color: @fg_highlight;
}
_______________________________________________
gnucash-user mailing list
gnucash-user@gnucash.org
To update your subscription preferences or to unsubscribe:
https://lists.gnucash.org/mailman/listinfo/gnucash-user
-----
Please remember to CC this list on all your replies.
You can do this by using Reply-To-List or Reply-All.
