ポートレットとナビゲーションスタイル

一番難しいのはいつもナビゲーションです。これは本当に複雑な構造をしていて、特に例えば第２、第３レベルのナビゲーションを異なる色にするなど、異なるレベルに異なるスタイルを設定しようとするのは難しいです。幸運なことに、PloneはたくさんのCSSのクラスを用意しています。そして一番のアドバイスは、クラスをいじるときにDOMインスペクタを使うことです。

ここではデモンストレーションのために簡単なスタイルを使うことにします。

まずはポートレットやパンくずリストの基本的なスタイルををCSSに追加します。

/* Navigation */
#portal-breadcrumbs {
    margin: 1em 1em 1em 19em;
}

#portal-breadcrumbs {
    display: none;
}

.portlet dt {
    background-color: #d3cebc;
    margin-bottom: 0.5em;
    display: block;
    padding: 0.2em 0.5em;
}

.portlet dd {
    margin-left: 0;
}

.portlet a {
    text-decoration: none;
}

.portletItem {
    padding: 0.5em;
}

.portletFooter {
    border-bottom: 1px dashed #c9c4c0;
    padding: 0.5em;
    text-align: right;
}

.portletItemDetails {
    text-align: right;
    display: block;
    color: black;
}

さらにナビゲーションの要素を追加しましょう。

.portletNavigationTree {
    padding-left: 0;
}

#portlet-navigation-tree .portletHeader {
    display: none;
}

.portletNavigationTree a {
    background-color: #d3cebc;
    margin-bottom: 0.5em;
    display: block;
    padding: 0.2em 0.5em;
}

.navTreeItem {
    display: inline;
    list-style: none;
    list-style-image: none;
}

.navTreeItem a,
.navTreeItem a:visited {
    text-decoration: none;
    color: #463229;
}

.portletNavigationTree a:hover,
.navTreeCurrentItem {
    color: #d3cebc !important;
    background-color: #463229 !important;
}

今までCSSをいじったことの無い人には少し複雑に見えるかも知れませんが、これを追加すると、かなり作業がすすんだのがわかるでしょう。リロードすれば次のようになるでしょう。

うわー、かなり目的のデザインになってきました。あとはいくつかのマージンや位置関係を詰めていくだけですね。