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
/* * 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.
