Skip to main content

Topic: Styling the Otter-UI (Read 1258 times)

Styling the Otter-UI
Hi all,

as the look & feel of an UI is impotant to me, I did some styling of "my" Otter-browser.
Looks really outdated now ...

1 CSS file + a bunch of icons, mostly stolen from Opera 12.x ... "Skinning" /is/ available for Otter, obviously :-)
Skin is not perfect yet (see e.g. feed/bookmark properties dialog - OK-button w/o border), so it will take some further investigation to solve these problems - hints are welcome!

Screenshots are vailable at:

Stylesheet + icons can be found at:

A readme.txt containing installation instructions is provided.

Please feel free to report errors/make suggestions.

mfg, Hartmut

  • Quetzal
  • [*][*][*]
Re: Styling the Otter-UI
Reply #1
hi, thanks for sharing... but the "read me" inside is in german/dotsch (if i read well)

here a traduction with return charriot..
Drilling Gray + 3d light - style sheet for the Otter Browser
================================================== =======

BoringGray is a "skin" for the Otter Browser
next icon collection, wild stuff from Opera 12.x,
1 x Windows XP and Otter 0.99.
This will give you a couple of .son files with Toolbar and Menu configuration.

1. Stylesheet
   To use the style:
   - Style file file stored separately
   - Otter through
       Working / Adjustments / Extending / Separating image -> Overflakes-Format Forces
       about: config -> Interface / StyleSheet
     put the style sheets in the knowledge.
     The style sheet also defines it as being devastating
     Widget Graphics (Arrows, Hoists, Radio-Checked Images).
     The sticks in the icons / w /.
     Should those icons not be used, the appropriate block
     loosen / comment on stylesheet, then use otter
     say their own.
2. Icons
   About the Icons / Steering Element Decorations:
   - Icons-Organizer below
   - Otter through
       about: config -> Interface / IconThemePath
     to Know the Icons in the Knowledge
  - the drilling gray style sheet contains the icon pfade (in the file note)
    The whole block is commenting on, otters
    Use standard widget icons.
3. Toolbar / Menü Configate:
   About the Toolbar / Menü Config files:
   - secure those related .json files:
   % Username% \ AppData \ Local \ Otter \ otter \ toolBar.json
   % Username% \ AppData \ Local \ Otter \ otter \ menu \ webWidget.json
   - save the approved .son files below
     search the appropriate Pfaden
   - Otter start.
   menu / webWidget.json contains the web site context menu,
   Add a single "Open with".
   That way one can add the current page. one major link
   open another browser.
   These mice were used to fix the hassle-free application.

Re: Styling the Otter-UI
Reply #2
Hi Quetzal,

any problems with "putting the style sheets in the knowledge"?
Ok, it is a bit frightening that "The style sheet also defines it as being devastating Widget Graphics".
But, "The whole block is commenting on", so what?


Thanks for the hint. A somewhat better translation is now available on
also included in the .zip file.

Happy translating,
mfg, Hartmut