ウィジェットのカスタマイズ
コントロール・センターまたはカスタムCSSを使用してウィジェットをカスタマイズできます。
コントロール・センターを使用したカスタマイズ
CrowdTwistコントロール・センターを使用して、ウィジェットの全体の色をカスタマイズできます。ヘッダー、ボタン、リンクなどにブランド色を追加できます。
コントロール・センターを使用してスタイルをカスタマイズする手順は、次のとおりです。
- コントロール・センターで、「Program」→「Account Overview」にナビゲートします。
- 「Edit Styling」をクリックします。
- 「Edit」をクリックして、標準ウィジェットの色を変更します。
- Header Color
- Header Text Color
- Button Color
- Button Text Color
- Link Color
- Points Color
- 「Save」をクリックします。
CSSを使用したカスタマイズ
標準ウィジェットのスタイルは、CSSを使用して簡単に変更できます。変更がブランドの色にとどまらない場合は、独自のCSSを記述して、色、フォント、余白、特定などの要素、および特定の要素を表示するかどうかをカスタマイズできます。
CSSを使用して階層に対してウィジェットをカスタマイズし、メンバーの階層に応じてウィジェットの表示を変えることもできます。
次の点に注意してください。
-
カスタムCSSファイルは、https://リンクを使用してホストする必要があります(http://ではありません)。
-
デフォルトのCSS属性をオーバーライドするには、特定の属性に対して!importantルールを使用する必要がある場合があります。
-
CSSで非表示にできるものもありますが、CSSでは、ウィジェットの追加や現在ウィジェット内にあるコンテンツの変更はできません。
-
一部のウィジェットには、画面をオーバーレイするモーダルがあるものがあります。これらのモーダルは別個のCSSファイルでカスタマイズできます。
-
Webページにウィジェットを実装する場合は、次の点に注意してください。
-
ウィジェットの高さ: コンテンツに基づいて動的に計算されます(固定ピクセル値なし)。
-
ウィジェットの幅:コンテナ全体にわたります。ウィジェットが表示されるコンテナの大きさは自分で決定します。
-
レスポンシブ・デザイン: ウィジェットにはレスポンシブ・デザインがあり、タブレットおよびモバイルの解像度が自動調整されます。
-