none
SharePoint2013 Webパーツのヘッダーの周りに罫線と色つけ方法 RRS feed

  • 質問

  • SharePoint2013にて、すべての Web パーツのヘッダーの周りに罫線と色をつけたく以下のサイトの記事を参考に行ったのですが何も表示されませんでした。記事がSP2010用だったためかもしれませんが、これと同じことをぜひSharePoint2013で実現したいのでどのようにしたらいいのかお知恵をお貸しください。


    SharePoint 2010 Web パーツ ユーザー インターフェイスのカスタマイズ (Wrox)

    https://msdn.microsoft.com/ja-jp/library/office/hh537935(v=office.14).aspx


    2016年3月30日 12:24

回答

  • ちょっと手直ししたほうが良いかなーと思うところはありますが、こんな感じでしょうか?

    /* Webpart table */
    .ms-webpart-chrome{
    padding:0px!important;
    margin:0px!important;
    border:1px solid #dbddde !important;
    }
    /* Wrb Part title background */
    div.ms-webpart-chrome-title{
    background-color: #f7f7f7;
    border-bottom:1px #ccc solid!important;
    padding:2px;
    }
    /* Web Part title */
    .ms-webpart-chrome-title h2{
    color: #333;
    font-weight:bold;
    }
    /* Linked title and visited */
    .ms-webpart-chrome-title a, .ms-webpart-chrome-title a:visited {
    color: #333!important;
    text-decoration:none!important;
    }
    /* Hover */
    .ms-webpart-chrome-title a:hover {
    color:red!important;
    }

    • 回答の候補に設定 佐伯玲 2016年4月1日 4:56
    • 回答としてマーク 佐伯玲 2016年4月4日 0:45
    2016年3月31日 4:01

すべての返信

  • ちょっと手直ししたほうが良いかなーと思うところはありますが、こんな感じでしょうか?

    /* Webpart table */
    .ms-webpart-chrome{
    padding:0px!important;
    margin:0px!important;
    border:1px solid #dbddde !important;
    }
    /* Wrb Part title background */
    div.ms-webpart-chrome-title{
    background-color: #f7f7f7;
    border-bottom:1px #ccc solid!important;
    padding:2px;
    }
    /* Web Part title */
    .ms-webpart-chrome-title h2{
    color: #333;
    font-weight:bold;
    }
    /* Linked title and visited */
    .ms-webpart-chrome-title a, .ms-webpart-chrome-title a:visited {
    color: #333!important;
    text-decoration:none!important;
    }
    /* Hover */
    .ms-webpart-chrome-title a:hover {
    color:red!important;
    }

    • 回答の候補に設定 佐伯玲 2016年4月1日 4:56
    • 回答としてマーク 佐伯玲 2016年4月4日 0:45
    2016年3月31日 4:01
  • ありがとうございます。無事動作しましたこれを参考に角を丸くするへも挑戦して見たいと思います。
    2016年4月1日 21:44