#中小企業こそ #Notes / #Domino ！！: CSS

2023年4月30日日曜日

This time I wanted to change the color of the field labels in DominoLeap to make them stand out.

Using custom CSS, I was able to implement this easily, so I will introduce it here.

I could not find any technical documents in Japanese, so I hope this will be helpful.

みなさま、こんにちは。
ゴールデンウィークスタートしましたね。
とはいいつつ、今週は単なる土日。月末月初ということで、普段通りです。

そんな中いよいよ本格的に社内へDomino Leapワークフローの展開がスタートしたのですが、進めていく中で、フィールドを目立たせたいという課題が発生しました。

Notesなら、フォントカラーや背景色をプロパティで簡単に変更できるのですが、Leapのプロパティにはそのような項目はありません。

簡単に設定できないものか・・
ということで、気なったのが

そう、カスタムCSSクラスです。

そういえば、以前受講したDomino Leapのハンズオンでは、[表示]の[HTML]を利用して、LeapのデフォルトバナーをCSSを利用して消したことがありました。

要は、カスタムCSSクラスに新しいクラスを追加して、このHTMLに追記すれば解決するのではと考えました。

ということで、Leapで利用されているクラスの一覧が必要となります。
サポートに問い合わせようかと思ったのですが、いや、まずは自分で探そうとググッてみたところ、すぐに見つかりました。

このページの前半には記述例。
後半にクラス定義が書かれていました。

クラスは分かりやすいように、分類分けされて表示されています。

今回はフォームラベルの色を赤くしたいので、Form itemsが対象となります。

図示されていて、わかりやすいですよね。
この例でみると、クラスは [.lfFormLabel ] であることがわかります。

前半の書き方を確認して、以下のように設定してみました。

まずはカスタムCSSクラスを設定します。
例では [sales] としました。

続いてHTMLに追記します。

クラスの指定方法はこの順番になります。

プレビューしてみると、

思うような結果が得られました。

ついでに「回収予定日」と「回収方法」もカスタムCSSに [sales] を設定すると、

簡単ですね。
CSSの詳しい知識がなくても、ある程度の見た目は変更できそうです。

以上、日本語の解説を見つけることができませんでしたので、記事にさせて頂きました。

みなさま、よい連休を!!

ページビューの合計