Scheduled Maintenance: We are aware of an issue with Google, AOL, and Yahoo services as email providers which are blocking new registrations. We are trying to fix the issue and we have several internal and external support tickets in process to resolve the issue. Please see: viewtopic.php?t=158230

 

 

 

Stretch - Consistent look-n-feel (gtk2, gtk3, qt theme set)

Graphical Environments, Managers, Multimedia & Desktop questions.
Post Reply
Message
Author
ruffwoof
Posts: 298
Joined: 2016-08-20 21:00

Stretch - Consistent look-n-feel (gtk2, gtk3, qt theme set)

#1 Post by ruffwoof »

gtk3 has adwaita as its inbuilt default theme. Not the nicest looking, white background with blue highlight on menus, but it is one of the themes that is common to others (gtk2, qt4, qt5).

I use a base cli debian install with xorg and jwm window manager added in (together with pcmanfm file manager, that I also use as the desktop icon manager i.e. pcmanfm --desktop). For a common adwaita look and feel I've installed

Image

and left gtk3 to use its default inbuilt (adwaita) theme i.e. a ~/.config/gtk-3.0/settings.ini content of

Code: Select all

[Settings]
gtk-theme-name=
gtk-icon-theme-name=hicolor
gtk-font-name=Sans 13
gtk-cursor-theme-size=0
gtk-toolbar-style=GTK_TOOLBAR_BOTH
gtk-toolbar-icon-size=GTK_ICON_SIZE_LARGE_TOOLBAR
gtk-button-images=1
gtk-menu-images=1
gtk-enable-event-sounds=1
gtk-enable-input-feedback-sounds=1
gtk-xft-antialias=1
gtk-xft-hinting=1
gtk-xft-hintstyle=hintslight
gtk-xft-rgba=rgb
and a ~/.config/gtk-3.0/gtk.css content of

Code: Select all

/* Custom styles */

/* select-on */
@define-color selected_bg_color #4b6983;
@define-color selected_fg_color #eeeeee;
@define-color theme_selected_bg_color @selected_bg_color;
@define-color theme_selected_fg_color @selected_fg_color;
/* select-on */

/* panel-on */
@define-color panel_bg_color #dcdad5;
@define-color panel_fg_color #333333;

PanelWidget,
PanelApplet,
PanelToplevel,
PanelSeparator,
PanelApplet > GtkMenuBar.menubar,
PanelApplet > GtkMenuBar.menubar.menuitem,
PanelMenuBar.menubar,
PanelMenuBar.menubar.menuitem,
PanelAppletFrame,
UnityPanelWidget,
.gnome-panel-menu-bar,
.unity-panel {
	background-image: -gtk-gradient(linear,left top,left bottom,from(shade(@panel_bg_color,1.2)),to(shade(@panel_bg_color,0.8)));
	color: @panel_fg_color;
}

.unity-panel.menuitem,
.unity-panel .menuitem {
	color: @panel_fg_color;
}

.unity-panel.menubar.menuitem:hover,
.unity-panel.menubar .menuitem *:hover {
	border-color: shade(@panel_bg_color, 0.7);
	border-image: none;
	background-image: -gtk-gradient(linear,left top,left bottom,from(shade(@panel_bg_color, 0.97)),to(shade(@panel_bg_color, 0.82)));
	color: @panel_fg_color;
}

PanelApplet .button {
	border-color: transparent;
	border-image: none;
	background-image: -gtk-gradient(linear,left top,left bottom,from(shade(@panel_bg_color,1.2)),to(shade(@panel_bg_color,0.8)));
	color: @panel_fg_color;
	box-shadow: none;
	text-shadow: none;
	-unico-inner-stroke-width: 0;
}

PanelApplet .button:active {
	border-color: shade(@panel_bg_color,0.8);
	border-image: none;
	background-image: -gtk-gradient(linear,left top,left bottom,from(shade(shade(@panel_bg_color,1.02),0.9)),to(shade(shade(@panel_bg_color,1.02),0.95)));
	color: @panel_fg_color;
	box-shadow: none;
	text-shadow: none;
	-unico-inner-stroke-width: 0;
}

PanelApplet .button:hover {
	border-color: transparent;
	border-image: none;
	background-image: -gtk-gradient(linear,left top,left bottom,from(shade(@panel_bg_color,1.2)),to(shade(@panel_bg_color,1.0)));
	color: @panel_fg_color;
	box-shadow: none;
	text-shadow: none;
	-unico-inner-stroke-width: 0;
}

PanelApplet .button:active:hover {
	border-color: shade(@panel_bg_color,0.8);
	border-image: none;
	background-image: -gtk-gradient(linear,left top,left bottom,from(shade(shade(@panel_bg_color,1.02),1.0)),to(shade(shade(@panel_bg_color,1.02),1.05)));
	color: @panel_fg_color;
	box-shadow: none;
	text-shadow: none;
	-unico-inner-stroke-width: 0;
}

WnckPager,
WnckTasklist {
	background-color: @panel_bg_color;
}

/* panel-on */

/* menu-on */
/* @define-color menu_bg_color #dcdad5; */
@define-color menu_bg_color #ffffff;
@define-color menu_fg_color #333333;

GtkTreeMenu.menu,
GtkMenuToolButton.menu,
GtkComboBox .menu {
	background-color: @menu_bg_color;
}

.primary-toolbar .button .menu,
.toolbar .menu,
.toolbar .primary-toolbar .menu,
.menu {
	border-style: none;
	background-image: none;
	background-color: @menu_bg_color;
	color: @menu_fg_color;
	box-shadow: none;
	text-shadow: none;
	-unico-inner-stroke-width: 0;
}

.menu.button:hover,
.menu.button:active,
.menu.button:active:disabled,
.menu.button:disabled,
.menu.button {
	background-color: @menu_bg_color;
	background-image: none;
}

GtkTreeMenu .menuitem * {
	color: @menu_fg_color;
}

.menuitem,
.menu .menuitem {
	background-color: transparent;
}

.menu .menuitem:active,
.menu .menuitem:hover {
	background-color: @theme_selected_bg_color;
}

.menuitem.check,
.menuitem.radio,
.menuitem.check:hover,
.menuitem.radio:hover,
.menuitem.check:active,
.menuitem.radio:active {
	background-color: transparent;
}

.menu .menuitem:disabled,
.menu .menuitem *:disabled {
	color: mix(@menu_fg_color,@menu_bg_color,0.5);
}

.menuitem.arrow {
	color: alpha(@menu_fg_color, 0.6);
}

.menuitem .entry {
	border-color: shade(@menu_bg_color,0.7);
	border-image: none;
	background-color: @menu_bg_color;
	background-image: none;
	color: @menu_fg_color;
}

.menuitem .accelerator {
	color: alpha(@menu_fg_color,0.6);
}

.menuitem .accelerator:disabled {
	color: alpha(mix(@menu_fg_color,@menu_bg_color,0.5),0.6);
	text-shadow: none;
}

.menuitem.separator {
	background-color: transparent;
	color: shade(@menu_bg_color, 0.9);
}

.menuitem GtkCalendar,
.menuitem GtkCalendar.button,
.menuitem GtkCalendar.header,
.menuitem GtkCalendar.view {
	border-color: shade(@menu_bg_color,0.8);
	border-image: none;
	background-color: @menu_bg_color;
	background-image: none;
	color: @menu_fg_color;
}

.menuitem GtkCalendar:indeterminate {
	color: mix(@menu_fg_color,@menu_bg_color,0.5);
}

/* menu-on */
For gtk2 my ~/.gtkrc-2.0 contains

Code: Select all

gtk-theme-name="Adwaita"
gtk-icon-theme-name="Adwaita"
gtk-font-name="Sans 13"
gtk-cursor-theme-size=18
gtk-toolbar-style=GTK_TOOLBAR_BOTH_HORIZ
gtk-toolbar-icon-size=GTK_ICON_SIZE_LARGE_TOOLBAR
gtk-button-images=1
gtk-menu-images=1
gtk-enable-event-sounds=1
gtk-enable-input-feedback-sounds=1
gtk-xft-antialias=1
gtk-xft-hinting=1
gtk-xft-hintstyle="hintslight"
gtk-xft-rgba="rgb"

style "scroll"
{
    GtkScrollbar::slider-width        = 26
}

class "*" style "scroll"
In ~/.profile I've set qt5 to use adwaita by including the line

Code: Select all

export QT_STYLE_OVERRIDE=Adwaita
and in ~/.config/Trolltech.conf my [Qt] section looks like

Code: Select all

[Qt]
style=Adwaita
font="Sans Serif,13,-1,5,50,0,0,0,0,0"
Palette\active=#000000, #dcdad5, #ffffff, #cbc7c4, #b8b6b2, #b8b5b2, #000000, #ffffff, #000000, #ffffff, #dcdad5, #a9a8a4, #4b6983, #ffffff, #0000ff, #ff00ff, #efefef, #000000, #ffffdc, #000000
Palette\inactive=#000000, #dcdad5, #ffffff, #cbc7c4, #b8b6b2, #b8b5b2, #000000, #ffffff, #000000, #ffffff, #dcdad5, #a9a8a4, #9c9a94, #ffffff, #0000ff, #ff00ff, #efefef, #000000, #ffffdc, #000000
Palette\disabled=#6e6d6a, #dcdad5, #ffffff, #cbc7c4, #b8b6b2, #b8b5b2, #6e6d6a, #ffffff, #6e6d6a, #ffffff, #dcdad5, #a9a8a4, #838383, #ffffff, #0000ff, #ff00ff, #efefef, #000000, #ffffdc, #000000
fontPath=@Invalid()
embedFonts=true
doubleClickInterval=400
cursorFlashTime=1000
wheelScrollLines=3
resolveSymlinks=false
globalStrut\width=0
globalStrut\height=0
useRtlExtensions=false
XIMInputStyle=On The Spot
DefaultInputMethod=xim
audiosink=Auto
videomode=Auto
GUIEffects=none
I've also set jwm to have a common adwaita type look i.e. a section in ~/.jwmrc that looks like

Code: Select all

    <WindowStyle>
        <Font>Sans-11:bold</Font>
        <Width>8</Width>
        <Height>32</Height>
        <Corner>0</Corner>
        <Foreground>#FFFFFF</Foreground>
        <Background>gray60:gray10</Background>
        <Outline>#000000</Outline>
        <Opacity>0.5</Opacity>
        <Active>
            <Foreground>white</Foreground>
            <Background>blue:#0077CC</Background>
            <Outline>blue</Outline>
            <Opacity>1.0</Opacity>
        </Active>
    </WindowStyle>
   <TaskListStyle>
      <Font>Sans-11</Font>
      <Active>
             <Foreground>white</Foreground>
             <Background>#0077CC:blue</Background>
      </Active>
      <Foreground>white</Foreground>
      <Background>gray60:gray10</Background>
    </TaskListStyle>
    <TrayStyle group="false" list="all">
        <Font>Sans-12</Font>
        <Background>#333333</Background>
        <Foreground>#FFFFFF</Foreground>
        <Outline>#000000</Outline>
        <Opacity>0.75</Opacity>
    </TrayStyle>
    <PagerStyle> <!-- Using brightside hot corner to show desktop so not used -->
        <Outline>#000000</Outline>
        <Foreground>#555555</Foreground>
        <Background>#333333</Background>
        <Text>#FFFFFF</Text>
        <Active>
            <Foreground>#0077CC</Foreground>
            <Background>#004488</Background>
        </Active>
    </PagerStyle>
    <MenuStyle>
        <Font>Sans-13</Font>
        <Foreground>#000000</Foreground>
        <Background>#FFFFFF</Background>
        <Outline>#000000</Outline>
        <Active>
            <Foreground>#FFFFFF</Foreground>
            <Background>#4A90D9</Background>
        </Active>
        <Opacity>0.85</Opacity>
    </MenuStyle>
    <PopupStyle>
        <Font>Sans-13</Font>
        <Foreground>#000000</Foreground>
        <Background>#999999</Background>
    </PopupStyle>
Tweaking the font size across all of those involves editing the Font values in each of the files to be similar ... as desired.

So now if I open leafpad, or galculator, or kcheckers, Libre, Firefox ... etc. they all have the same (similar) look and feel.

Of course if you use a desktop installation and fire up its theme manager and make changes then that will screw up the setup i.e. I avoid changing things once set up.

GTK2
Image

GTK3
Image

Qt4
Image

Post Reply