FireFoxのアドオンでCook Bookをカスタマイズ表示

CakePHPのオンラインリファレンス、CookBookのデザインが新しくなりました。
http://book.cakephp.org/ja#
内容は一緒ですが、デザインが大幅に変わり、また検索結果の出力が非同期表示になるなどの違いがあります。

しかしながらこの新デザイン、個人的に、非常に使いにくい。
なんといっても、左ナビが380pxと広すぎます。
私のメインモニタは1024x768と、今日では若干小さめなせいもありますが、
コードを書きながら参照する、つまり複数窓を横並べにすることを考えると、やはり左ナビは広すぎるように感じます。

FireFoxのアドオン、Stylishを入れて、自分向けにカスタマイズしました。
https://addons.mozilla.org/en-US/firefox/addon/stylish/developers

Stylishの導入方法および基本的な使い方は、以下を参考にしました。
Loading...

Stylish導入後、FireFoxを再起動すると、ウィンドウ右下にStylishのアイコンが追加されます。
CookBookを開いてこのアイコンをクリック、
「新しいスタイルを書く」で、「book.cakephp.org専用」のスタイルを作成しました。

内容は、以下の通りにしています。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("book.cakephp.org") {
  body {
    background: none repeat scroll 0 0 transparent !important;
  }
  #sidebar { 
    width: 180px !important;
    padding: 5px;
    
  }
  #content {
    padding: 20px 20px 20px 200px !important;
    min-width: 500px !important;
  }

キーは、!important。
これでStylishでの設定を最優先させないと、反映されない箇所が多いです。

ブラウザをモニターの縦半分にして閲覧するのがメインの前提。横にスクロールさせれば、記事本体(#content)は全て見られる、という志向です。

元の左ナビ用の背景色が、ナビ文言の無い箇所は消えてしまうのですが、そこは気にしない方針。