ブログ

ServiceNow の Widget のヘッダの背景色を変更する

ServiceNow開発部ブログ第10回目です。

Widget ヘッダの背景色は、下記の３種類の設定の影響を受けます。

  • Service Portal > Themes の $panel-default-heading-bg
  • 各 Widget の BootStrap Color 選択肢
  • Themes の CSS Include 関連リストでインクルードされている CSS

分類

各Widget により設定方法も異なります。下記のような種類に分かれます。Service Portal > Pages メニューで設定を変更したい Page を開き、Related Link の Open in Page Designer リンクを探します。（下図参照）

  1. Open in Page Designer で各Widgetの編集アイコンをクリックすると BootStrap Color 選択肢がある。
  2. Open in Page Designer で各Widgetの編集アイコンをクリックしても BootStrap Color 選択肢がない 。 Page Designer を起動する代わりに Page Content ツリーの中の 各Widget の Instance リンクをクリックし、BootStrap Color 選択肢を変えると色が変わる。
    • Tokyo Version での実例は Announcement Widget です。
  3. Open in Page Designer で各Widgetの編集アイコンをクリックしても BootStrap Color 選択肢がない。 Page Content ツリーの中の 各Widget の Instance リンクをクリックし、BootStrap Color 選択肢を変えても色が変わらない 。
    • Tokyo Version での実例は My Item Widget です。
    • Instance リンクは、代わりに Instance with Link、Instance with Search、Instance of Simple List のような名前のリンクになっていることがあります。

１または２に該当する場合

各 Widget の BootStrap Color 選択肢をいろいろと変えてみて希望の色に近いか確認します。BootStrap Color を変更しても色が変わらない場合、CSS Include で背景色が設定されている場合があります。その場合の対策はトラブルシューティングで後述します。

もし希望の色に近いものがない場合、Service Portal > Themes の $panel-default-heading-bg を変えることもできます。ただし、$panel-default-heading-bg を変えると、BootStrap Color=Default を選択している各種 Widget の背景色に反映されます。

３の場合

Service Portal ＞ Widget で各 Widget に定義されている CSS を調べます。 その CSS の設定を上書きできるようなCSSを作成して、Include するか、もしくは Widget をクローンして、HTML 部分やCSS部分をカスタマイズします。これは、Widget の種類ごとに判断する必要があります。

Tokyo Version での実例としては My Items Widget （自分のアクティブなアイテム）がありました。CSSを見たところ、下記のような CSSを作成して Include すればよいことがわかりました。

.my-items-container {
    .widget-header {
        background: azure;
    }
}

ちなみに文字色も変えられます。

.my-items-container {
    .widget-header {
        background: azure;
        color: red;
    }
}

なお、コミュニティには、.panel-heading を各Widget の CSS に設定する方法が紹介されています。しかし、Tokyo Version の My Items Widget では無効でした。

トラブルシューティング：CSS Include による影響

各 Widget の BootStrap Color 選択肢 を変更してもService Portal > Themes の $panel-default-heading-bg を変更しても反映されない場合、CSS Include で背景色が設定されていることがあります。

Tokyo Version の実例では Employee Center でインクルードされていた ec-theme-global の中の一部の CSS により背景色無しにされていました。 .panel-heading の background が none になっていました。

//ec-theme-global.css から一部抜粋
 /* dashboard panel with .show-bounding-box */
  div[widget=widget] section.show-bounding-box, div[widget=widget], div[widget=widget] > div {
    > .panel.b, > .panel-default.b {
      border: none;
      background: $background-primary;
      box-shadow: $sp-panel-box-shadow;
      > .panel-heading {
        padding: $sp-space--xl;
        background: none; /* ここが原因 */
        @media (max-width: 767px){
          padding: $sp-space--lg;
        }
      }
/* 以下略 */
}}

ec-theme-global による background: none を上書きするため、下記の CSS を作成して Include しました。
下記の場合、Service Portal > Themes の $panel-default-heading-bg に設定した色が使用されるようになります。

/* dashboard panel with .show-bounding-box */
  div[widget=widget] section.show-bounding-box, div[widget=widget], div[widget=widget] > div {
    > .panel.b, > .panel-default.b {
      > .panel-heading {
        background: $panel-default-heading-bg;
      }
    }
  }

background 指定したところに color 指定も入れると、文字の色も変えられます。

/* dashboard panel with .show-bounding-box */
  div[widget=widget] section.show-bounding-box, div[widget=widget], div[widget=widget] > div {
    > .panel.b, > .panel-default.b {
      > .panel-heading {
        background: $panel-default-heading-bg;
        color: red;
      }
    }
  }

弊社公式Qiitaへも同様の記事を投稿しております。

一覧へ戻る

pagetop