Web Panel に、著作権のテキストを表示する変数が挿入されました。デザインを追加するために、Web Panel の Design System オブジェクトでプロパティが設定される MinorText クラスと関連付けられます。

Design System オブジェクトでこのクラスが次のように定義されている場合:

.MinorText
    {
        background-color: $colors.Grey01;
        color: $colors.OnSurface;
        font-size: 20px;
        font-family: AbhayaLibre-Bold;
    }

項目属性/変数のコントロールの [ Readonly ] プロパティを True に設定せずに既定値の False のままにすると、実行時に次のように表示されます:

コントロールの境界線が表示されます。これは、編集機能なフィールドであるためです。実際、コントロールをクリックすると、次のように表示されます:

ただし、ここでは変数を編集可能にしたくないため、最初に示したように [ Readonly ] プロパティを True に設定します。実行時に次のように表示されます:

これは、既に確認したように、HTML 内のコントロールに対して GeneXus によって生成された同じ MinorText クラスです。ただし、ここでは項目属性が「data-gx-readonly」です。つまり、エレメントをマークしています。
MinorText クラスの項目属性/変数のコントロールが読み取り専用で、背景色がグレーではなく黄色で、その他すべての MinorText のプロパティが同じである場合、これを設定するにはどうすればよいでしょうか。
非常に簡単です。クラスに、呼び出し対象となる新しいクラス (Readonly など) を参照する [ gx-readonly-class ] プロパティを追加します:

.MinorText
 {
    background-color: $colors.Grey01;
    color: $colors.OnSurface;
    font-size: 20px;
    font-family: AbhayaLibre-Bold;
    gx-readonly-class: Readonly;
  }

 .Readonly
 {
    background-color: yellow;
 }

コントロールで [ Readonly ] プロパティが設定されている場合、実行時に次のように表示されます:

Theme を DSO に変換する場合 (またはその逆の場合)、Theme オブジェクトの動作との比較についての説明と考慮事項を確認することをお勧めします。