The settings are almost the same from 3.x to 4.x, but coincidentally,
the things to change Gnucash specific items (like register colors) are
different. I'm attaching my own gtk.css with my own preferred settings.
I spent a good amount of time delving into the interface settings
available in general for GTK3 by looking at other much more complicated
themes people have written, etc.
Hope it helps.
On 2021-12-09 20:14, AC wrote:
I see information in the wiki on Gnucash 3.x because it changed to
GTK3. Is it safe to assume that Gnucash 4 is still using GTK3 so the
instructions would be the same?
On 2021-12-09 17:08, D. wrote:
Much of the interface (such as tab height) can be controlled through
css. The colors in the register may be special, however, and not as
readily changed (but I could be wrong). Others have documented these
settings on the lists and in the wiki. Searches in the list archives
and on the wiki should help you.
-------- Original Message --------
From: AC <gnuc...@acarver.net>
Sent: Thu Dec 09 19:01:05 EST 2021
To: GnuCash users group <gnucash-user@gnucash.org>
Subject: [GNC] Changing colors and layout on 4.8
Ok, finally got upgraded to 4.8, so far so good.
A couple things I want to change if at all possible:
First is the color schemes, I'd like to change the ledger to dark grays
and also change the overall UI to have a darker color if possible.
The other thing I was hoping to do is reduce the size of the tabs. They
seem to be using a touchscreen sizing (large areas of empty space to
allow for finger tapping) and I'd like to shrink that down, especially
the register tabs (I have them set to the left and they are quite tall).
Where would I go about making these changes if possible?
_______________________________________________
gnucash-user mailing list
gnucash-user@gnucash.org
To update your subscription preferences or to unsubscribe:
https://lists.gnucash.org/mailman/listinfo/gnucash-user
If you are using Nabble or Gmane, please see
https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
-----
Please remember to CC this list on all your replies.
You can do this by using Reply-To-List or Reply-All.
_______________________________________________
gnucash-user mailing list
gnucash-user@gnucash.org
To update your subscription preferences or to unsubscribe:
https://lists.gnucash.org/mailman/listinfo/gnucash-user
If you are using Nabble or Gmane, please see
https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
-----
Please remember to CC this list on all your replies.
You can do this by using Reply-To-List or Reply-All.
.
/*
* Author: Kenneth J. Farley
* Date: 2021-11-16
*
* GTK3 CSS file for use with GnuCash.
* Developed by looking at complete theme definitions,
* and scouring the internet for documentation.
*/
/* --- [ Variable Definitions ] ------------------------
*
* Definitions of colors so they can be used in many
* places and subsequently changed conveniently, rather than
* trying to find all uses of a particular color, etc.
*/
@define-color hueClear rgba( 0, 0, 0, 0.00 ) ;
@define-color hueBGButton rgba( 240, 240, 240, 1.00 ) ;
@define-color hueBGDropdown rgba( 250, 235, 215, 1.00 ) ;
@define-color hueBGMain rgba( 220, 220, 220, 1.00 ) ;
@define-color hueBGNormal rgba( 220, 220, 220, 1.00 ) ;
@define-color hueBGScroll rgba( 250, 250, 250, 0.40 ) ;
@define-color hueBGSlider rgba( 72, 61, 139, 1.00 ) ;
@define-color hueBGTooltip rgba( 0, 0, 0, 0.80 ) ;
@define-color hueBGTrough rgba( 150, 150, 150, 0.80 ) ;
@define-color hueBGSelected rgba( 0, 128, 128, 1.00 ) ;
/*
* Hover Custom Orange = 255, 136, 77
* Chartreuse = 127, 255, 0
* Carolina Blue = 87, 160, 211
* Neon Green = 57, 255, 20
*/
@define-color hueHover rgba( 255, 136, 77, 1.00 ) ;
@define-color hueHoverLo rgba( 255, 136, 77, 0.10 ) ;
@define-color hueHoverMd rgba( 255, 136, 77, 0.20 ) ;
@define-color hueHoverHi rgba( 255, 136, 77, 0.50 ) ;
@define-color hueHoverBorder rgba( 255, 136, 77, 1.00 ) ;
/*
* Tabs
*/
@define-color hueTabHover rgba( 26, 140, 255, 1.00 ) ;
@define-color hueTabHoverLo rgba( 26, 140, 255, 0.10 ) ;
@define-color hueTabHoverMd rgba( 26, 140, 255, 0.20 ) ;
@define-color hueTabHoverHi rgba( 26, 140, 255, 0.50 ) ;
@define-color hueTabHoverBorder rgba( 26, 140, 255, 1.00 ) ;
/*
* Shade LightCyan = 224, 255, 255
* LightSteelBlue = 176, 196, 222
* LightYellow = 255, 255, 214
*/
@define-color hueShadedLo rgba( 176, 196, 222, 0.05 ) ;
@define-color hueShadedMd rgba( 176, 196, 222, 0.20 ) ;
@define-color hueShadedHi rgba( 176, 196, 222, 0.50 ) ;
/*
* Hilite White = 255, 255, 255
*/
@define-color hueHiliteLo rgba( 255, 255, 255, 0.10 ) ;
@define-color hueHiliteMd rgba( 255, 255, 255, 0.25 ) ;
@define-color hueHiliteHi rgba( 255, 255, 255, 0.50 ) ;
@define-color hueBorderNormal lightsteelblue ;
@define-color hueProgress rgba( 0, 102, 102, 1.00 ) ;
@define-color hueRegCursor rgba( 230, 195, 0, 1.00 ) ;
@define-color hueRegDark lightsteelblue ;
@define-color hueRegHeader darkslateblue ;
@define-color hueRegLight lemonchiffon ;
@define-color hueTextNormal black ;
@define-color hueTextInverted white ;
/*
* --- [ Overall Appearance ] --------------------------
*
* Settings that will affect all occurrences of the
* indicated components, unless they are overriden later.
*/
*
{
font-family: "Lucida Grande", sans-serif ;
font-size: 11pt ;
}
button
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
border-radius: 6px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 1px ;
}
button:hover
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueHoverLo,@hueHoverMd,@hueHoverHi) ;
border-style: solid ;
border-color: @hueHoverBorder ;
border-width: 1px ;
}
/*
* --- [ Status Bar ] ----------------------------------
*
* The bar at the bottom of the frame window that gives
* a brief bit of info like the file name, and also holds
* the progress bar that shows status of a read or save.
*/
statusbar label
{
font-size: 11pt ;
font-weight: bold ;
color: @hueTextNormal ;
}
progressbar
{
background-color: @hueClear ;
font-size: 10pt ;
margin: 0px 2px 2px 0px ;
}
progressbar.horizontal trough,
levelbar.horizontal trough,
progressbar.horizontal progress
{
min-height: 10px ;
border-radius: 5px ;
}
progressbar progress
{
background-color: @hueProgress ;
background-image: linear-gradient(@hueHiliteLo,@hueHiliteMd,@hueHiliteHi) ;
height: auto ;
border-style: none ;
}
/*
* --- [ Main Window Bottom Bar ] ----------------------
*
* The small bar at the bottom of the application that
* is visible for all operations.
*/
.GncMainWindow
{
background-color: @hueBGMain ;
}
/*
* --- [ Summary Bar ] ---------------------------------
*
* The "button" at the bottom of the Accounts page that
* shows the total worth, profit, etc.
*/
.GncAccountPage
{
background-color: @hueBGMain ;
}
.summary-bar
{
background-color: @hueClear ;
}
.summary-bar cellview
{
background-color: @hueClear ;
color: @hueTextNormal ;
}
.combo
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
color: @hueTextNormal ;
font-size: 16pt ;
font-weight: bold ;
}
/*
* --- [ Notebook ] ------------------------------------
*
* The Notebook is the GUI structure Gnucash uses to show
* the list of accounts, account registers, etc. It is a
* simulation of a tabbed set of files. The settings here
* will format those tabs, giving them similar behavior
* as that for buttons (highlighting mouse hover, etc.)
*/
.GncMainWindow notebook box > image
{
margin-left: -2em ;
margin-right: -2em ;
padding: 0px ;
opacity: 0 ;
}
tabs label
{
margin: 2px ;
}
notebook > header
{
background-color: @hueBGMain ;
border-color: @hueBGMain ;
}
notebook tab
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
min-height: 32px ;
margin: 1px 1px 0px 0px;
padding: 0px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 1px 1px 0px 1px ;
border-radius: 6px 6px 0px 0px ;
}
notebook tab:hover
{
background-image: linear-gradient(@hueTabHoverLo,@hueTabHoverMd,@hueTabHoverHi) ;
border-color: @hueTabHoverBorder ;
}
notebook tab:checked
{
border-color: @hueTabHoverBorder ;
}
notebook > header.left tabs tab
{
margin: 0px ;
padding: 0px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 1px 0px 1px 1px ;
border-radius: 6px 0px 0px 6px ;
}
notebook > header.left tabs tab:hover
{
border-color: @hueTabHover ;
}
notebook >header.left tabs tab:checked
{
border-color: @hueTabHoverBorder ;
}
notebook tab box
{
padding: 0px ;
margin: 0px ;
background-color: @hueClear ;
border-width: 0px ;
}
notebook > header tab button:hover,
notebook > header tab button:hover:checked
{
background-image: linear-gradient(@hueTabHoverLo,@hueTabHoverMd,@hueTabHoverHi) ;
border-color: @hueTabHoverBorder ;
}
/*
* --- [ Scroll Bars ] ---------------------------------
*
* The scroll bars that show up on data presentations that
* are too big for the current window.
*/
scrollbar
{
background-image: none ;
border-style: solid ;
background-color: @hueBGScroll ;
}
scrollbar trough
{
border-style: none ;
border-width: 0px ;
background-color: @hueBGTrough ;
}
scrollbar.vertical trough
{
background-image: linear-gradient(to right,@hueHiliteLo,@hueHiliteMd,@hueHiliteHi) ;
}
scrollbar slider
{
background-color: @hueBGSlider ;
}
/*
* --- [ Account Tree ] --------------------------------
*
* The list of accounts, usually the first window tab
* in the program.
*/
#account_tree
{
letter-spacing: 0px ;
background-color: lavender ;
color: @hueTextNormal ;
}
.GncAccountPage box
{
background-color: @hueClear ;
}
.GncAccountPage label
{
font-weight: bold ;
background-color: @hueClear ;
color: @hueTextInverted ;
}
#account_tree:selected
{
background-color: @hueBGSelected ;
color: @hueTextInverted ;
font-weight: bold ;
}
treeview button
{
background-color: @hueBGNormal ;
color: @hueTextNormal ;
}
#account_tree header button
{
background-color: @hueRegHeader ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
color: @hueTextInverted ;
border-radius: 0px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 0px 1px 0px 0px ;
}
#account_tree header button:hover
{
background-image: linear-gradient(@hueHiliteLo,@hueHiliteMd,@hueHiliteHi) ;
}
/*
* --- [ Toolbar Settings ] ----------------------------
*
* These settings change the appearance of the toolbar
* and its buttons.
*/
toolbar
{
background-color: @hueBGMain ;
}
toolbar toolbutton button
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
padding-left: 2px ;
padding-right: 2px ;
border-color: @hueBorderNormal ;
min-width: 64px ;
}
toolbar toolbutton button:hover
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueHoverLo,@hueHoverMd,@hueHoverHi) ;
border-color: @hueHoverBorder ;
}
toolbar toolbutton label
{
font-size: 11pt ;
padding-left: 2px ;
padding-right: 2px ;
}
/*
* --- [ Register Settings ] ---------------------------
*
* Set the alternating colors for the lines of an account
* register, the cursor (line being edited), the split
* lines, etc.
*/
.GncRegisterPage
{
background-color: @hueBGMain ;
}
.GncRegisterPage label
{
font-family: "CopperPlate", sans-serif ;
font-size: 12pt ;
background-color: @hueClear ;
color: @hueTextNormal ;
margin: 2px ;
}
*.gnc-class-register-header
{
background-color: @hueRegHeader ;
color: @hueTextInverted ;
}
*.gnc-class-register-primary
{
background-color: @hueRegLight ;
color: @hueTextNormal ;
}
*.gnc-class-register-primary:disabled
{
background-color: mix (@hueRegLight, grey, 0.2) ;
color: mix (@hueTextNormal, grey, 0.2) ;
}
*.gnc-class-register-secondary
{
background-color: @hueRegDark ;
color: @hueTextNormal ;
}
*.gnc-class-register-secondary:disabled
{
background-color: mix (@hueRegDark, grey, 0.2) ;
color: mix (@hueTextNormal, grey, 0.2) ;
}
*.gnc-class-register-split
{
background-color: @hueBGDropdown ;
color: @hueTextNormal ;
}
*.gnc-class-register-split:disabled
{
background-color: mix (@hueBGDropdown, grey, 0.2) ;
color: mix (@hueTextNormal, grey, 0.2) ;
}
*.gnc-class-register-cursor
{
background-color: @hueRegCursor ;
color: @hueTextNormal ;
}
*.gnc-class-register-cursor:disabled
{
background-color: mix (@hueRegCursor, grey, 0.2) ;
color: mix (@hueTextNormal, grey, 0.2) ;
}
gnc-id-cursor entry
{
margin: 2px 5px 2px 5px ;
background-color: @hueRegCursor ;
color: @hueTextNormal ;
}
gnc-id-cursor button
{
margin: 1px 1px 1px 1px ;
}
/*
* --- [ Tooltips ] ------------------------------------
*
* These are the small popups that give a brief line of text
* explaining the function of a button, etc.
*/
tooltip.background
{
background-color: @hueClear ;
}
tooltip box
{
background-color: @hueBGTooltip ;
color: @hueTextInverted ;
border-radius: 4px ;
padding: 0px 0px 0px 0px ;
}
/*
* --- [ Calendar ] ------------------------------------
*
* Apparently someone thought the calendar was important,
* since they provided a lot of means of altering its
* appearance.
*/
sheet calendar
{
font-family: "Arial", sans-serif ;
font-size: 10pt ;
}
calendar
{
border-color: @hueHoverBorder
}
calendar.header
{
background-color: @hueBGNormal ;
border-radius: 2px ;
border-width: 1px ;
border-color: @hueBGNormal ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
color: @hueTextNormal ;
}
calendar.highlight
{
background-color: @hueBGSelected ;
color: @hueTextInverted ;
border-radius: 0px ;
padding: 0px ;
}
calendar.view
{
background-color: @hueRegDark ;
background-image: linear-gradient(to right,@hueHiliteLo,@hueHiliteHi) ;
color: @hueTextNormal ;
}
#dens-cal-popup treeview
{
background-color: @hueBGDropdown ;
}
calendar.button
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
border-radius: 2px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 1px ;
}
calendar.button:hover
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueHoverLo,@hueHoverMd,@hueHoverHi) ;
border-style: solid ;
border-width: 1px ;
border-color: @hueHoverBorder ;
}
calendar*:selected,
calendar*:selected:focus
{
background-color: @hueBGSelected ;
color: @hueTextInverted ;
border-radius: 2px ;
}
_______________________________________________
gnucash-user mailing list
gnucash-user@gnucash.org
To update your subscription preferences or to unsubscribe:
https://lists.gnucash.org/mailman/listinfo/gnucash-user
If you are using Nabble or Gmane, please see
https://wiki.gnucash.org/wiki/Mailing_Lists for more information.
-----
Please remember to CC this list on all your replies.
You can do this by using Reply-To-List or Reply-All.
