サイドリンクバーのスタイルをCSSで変更する

SharePoint2010のカスタマイズです。

チームサイトのデフォルトのサイドリンクバーって、文字ばっかりでちょっとさびしいですよね?
pict0512-1

そこで、ヘッダーとかリストマークとかCSSでいろいろいじくってみました。
pict0512-2

ソースコードを公開しますので、ご自由にお使いください。

.s4-ql ul.root ul
{
    margin-bottom: 5px;
}

#s4-leftpanel-content
{
    background-color: #FFFFFF !important;
    border: 1px #d8d6d7 solid !important;
    border: 0px !important;
}

.menu-vertical
{
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.menu-vertical > ul.root
{
    padding-top: 5px;
}

/* mainlinks */
.menu-vertical > ul.root > li.static > .menu-item
{
    padding: 2px 2px 2px 10px !important;
    border-bottom: 1px #663366 solid !important;
    border-left: 4px #663366 solid !important;
    color: #333 !important;
    font-weight: bold;
    background-color: #FAF0E6;
    margin-top: 5px;
    margin-bottom: 1px;
}

/* Sublinks */
.menu-vertical > ul.root > li.static > ul.static > li.static
{
    margin-bottom: 5px;
}

.menu-vertical > ul.root > li.static > ul.static
{
    margin-top: 5px;
    margin-bottom: 10px !important;
}

.menu-vertical > ul.root > li.static > ul.static > li.static > a > span > span
{
    margin-top: 0px;
}

/* Selected  Style*/
.menu-vertical > ul.root > li.selected > a
{
    background-color: transparent !important;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.menu-vertical > ul.root > li.static > ul.static > li > a.selected
{
    background-image: none !important;
    background-color: transparent;
    color: fuchsia !important;
    border: 0px;
    margin-top: 1px;
}

.s4-specialNavLinkList
{
    border: 0px;
}

/* Liststyle */
.s4-ql ul.root ul > li
{
    padding-top: 0px;
    background-image: url('リストマークの画像ファイルURL');
    background-repeat: no-repeat;
    background-position: 0.0em;
}

/* List links */
.s4-ql ul.root ul > li > a
{
    display: inline-block !important;
    padding: 2px 0px 0px 16px !important;
    vertical-align: top !important;
}

色使いやリストマークの画像を適宜変えれば、クールなイメージにもできますね。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中