• Diff for "Design/Theming"

This is reference notes for local theme corrections of a Sugar-100 based theme for an XFCE environment, meant as an example case and a starting point for a desktop designer's guide.

Problem

Visual inconsistency: The Sugar theme is designed using the Gtk toolkit, and some applications use the standards offered by the Qt toolkit (and/or others).

Strategies

• Other XFCE-themes must have had this problem! Choose one for reference
  • and adapt their changes to the Sugar theme.
• Map visual flaws and report them as bugs to the Sugar Theme team:
  • Jonas Smedegaard and myself (Siri Reiter).

Visual Design

• Flat design
• High Contrast icon theme as fallback (not Adwaita), similar in expression
• Strong colors in addition to black and grey theme

File structure

/gtk-2 (toolkit)

• gtkrc

/gtk-3

• gtk.css gtk-widgets.css settings.ini

/xfwm4

• themerc

Window manager icons (in (png and) xmp format)

close (cross, no toggle variant (dialog-cancel.svg)) maximize (window(s) or window with arrows (view-fullscreen.svg)) hide (underscore, no toggle variant (look at Piranha theme (circles))) menu (arrow down (go-down.svg)) shade (arrow up, toggled down (go-up.svg)) ?stick? (circle (view-radial.svg))

variations: -active (white icon, shade 5 background) -inactive(white icon, pale background) -pressed (shade 5 icon, white background) -toggled-active -toggled-inactive -toggled-pressed

white/ shade 1 shade 2 shade 3 shade 4 black/ full color/ shade 5

Themes correspond with their iconset in usr/share/icons/

Content of icon theme sugar.orig

/cursors

/scalable

• /actions /apps /categories /control /device /emblems /mimetypes /status

icon-theme.cache index.theme

Noted flaws

Sugar theme and Sugar icons.

• Sugar does not fully cover the xdg-standard for iconsets.
  • Icon fallbacks in Thunar (desktop, filesystem, trashcan, folder, network), Icedove (get messages, write, chat, address book, tag, decrypt - search, filter and dropdown menu arrows are 'sugary') and

    Iceweasel menus. Inheritance set to ?HighContrast in icons.theme

• Frames and icons in content of websites too radical (look for plugin)
• FIXED: Icedove: Selected color white and Icedove inverted active text color
  • white in text 'button' when opening submenu (background doesn't change to grey) Grey background clash with Icedove address text color grey when sending mail (text grey when Qt 4 GUI Gtk+ is active, otherwise black) Evince: White text and background in file selection window Connection manager: White text and light grey backgrounds in manage connection selection menu xfwm4-settings: Combobox prelight background and foreground color both white.
• Tickbox and text overlap in submenus (Icedove, Iceweasel, Scribus)
  • (but not in Appearence control window)
• Tab menus don't fit with Sugar's circled indication of selection
  • (change bg color) (Appearence, Scribus, content of Thunar ind icon set view) (not or disappearing in seconds with Qt GUI set to Gtk+)
• Inkscape export combobox text fiels is too small to contain more than one
  • digit
• No sugar style for window manager
• Evince and gtk-demo has its own "window manager" toolbar (following the
  • gnome standards?)
• Cursor set is big and clumsy and only show inside borders of certain
  • windows (Iceweasel (gtk-2.0), not Thunar (gtk-2.0))
• Libreoffice: Grey squared background shows behind rounded text fields.
  • Spelling icons don't match with black background. Prelight fg and bg are both white in dialog boxes.
• Composit windows (necessary to shadow windows) makes selection in terminal
  • mode white out, when windows are layered.

Notes

• Gtk theme needs to be in usr/share/themes for xfwm4 to recognize it
• Gtk-2 control styling by gtkrc-file
• Gtk-3 control styling by css-files
• Window frames has xfwm4 icons and shape in bitmaps (png and xpm).
  • Xpm is necessary - allocates the space. Theme and typography is set in 'Window management'. Theme needs settings in themerc.

• 'Qt 4 settings' -> select gtk+ (test)

• Touchscreens work with Metacity
• Evince already has a kind of window manager with perfectly usable icons
  • (Adwaita symbolic) - with the Gnome stadard (or maybe not?).
• Cursor theme has cursor.theme file (where?)
• Background image can be placed anywhere and must be chosen in the desktop
  • manager widget. (What is the preferred location?)
• Splash screen in usr/share/images/desktop-base (symlink to desktop-splash)
  • Size something like 1920 x 1200 px

Decisions

• Sugar theme look here: Thunar, panels, window frames
• Should the theme interfere in app design in Iceweasel, Icedove etc.?

Tasks

• DONE via theme.index Inheritance: Create symlinks from High Contrast icon theme
• (NONE FOUND) Test if programs crash when using Gtk+ theme in Qt programs.
• Identify possible sources to flaws
• Look for Iceweasel plugin to manage fallback in content of websites
• DONE Distribution logo in upper left corner in icons /apps/xfce4-panel-menu.svg and in index.theme directories list (lookup directory). Scalable preferred.
• DONE Find, choose, copy and modify bitmaps and themerc settings from window theme with similar features (Murrinableu (pointy) or Gaudy (rounded))
• DONE Create bitmap icons for window manager
• Write bug reports
• Create splash screen and place it correctly
• Create desktop image and place it correctly
• Create alpha package for Debian
• Report theme changes in git
• Create colored theme variation

Gtk based applications

darktable inkscape galculator gajim thunar

Qt based applications

scribus

tk

imagemagick

Mozilla

icedove iceweasel

Todo

mypaint sxiv pidgin gimp libreoffice