Personal tools
You are here: Home Plone Visual Ploneに新しいルックスを リストスタイル

リストスタイル

リストをインライン表示し、丸を非表示にします

この段階のデザインではリストに、構造的な目的で使われている、多くの丸がありますが、実際にはこういうふうに見えて欲しくありません。すべての要素は一列に並んで欲しいので、CSSを以下のようにします。

/* Site actions / search / personal bar */
#portal-siteactions {
    list-style-image: none;
    list-style-type: none;
    float: right;
}

#portal-siteactions li {
    display: inline;
    border-left: 1px solid #463229;
    padding-left: 0.5em;
}

#portal-siteactions li a {
    text-decoration: none;
}

#portal-searchbox {
    float: right;
    clear: right;
}

#portal-personaltools {
    float: right;
    margin: 0.5em 0;
    padding: 0;
}

#portal-personaltools li {
    display: inline;
    list-style: none;
    list-style-image: none;
}

#portal-personaltools li a {
    text-decoration: none;
    margin-right: 1em;
}

.documentActions {
    float: right;
    margin: 0.4em 0 0 0.5em;
    padding: 0;
}

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

.documentActions {
    display: none;
}

これはすごく長いように見えますが、違う構造の同じプロパティをいじっているだけです。つまりインラインで表示し、丸を非表示にしているのです(これらはPlone2.5以上ではすでにinvisibles.cssにて既に修正されているかも知れません)。

リロードしてみてください。次のようになります。

リストをインライン表示

いやー、だいぶ良くなってきましたね。

Document Actions