Show Menu
主題×

最適化表單的樣式構造

必備條件

瞭解CSS和LESS架構。

可自訂的內容

文章會列出可公開使用的最適化表單css類別。 您可以利用這些類別來設定最適化表單的各種元件樣式。 撰寫元件的樣式,例如顯示警告的對話方塊和狀態列,超出本文的範圍。 只有當您無法使用主題編輯器來設定元件的樣式時,才可使用這些樣式結構來建立樣 式(使用CSS或Less)

自訂最適化表單中的樣式

LESS架構可簡化使用案例,以自訂最適化表單的樣式。 此架構可讓您使用一組變數和函式(混合)來定義樣式。 LESS框架有助於減少捆綁代碼的大小並增加其可重用性。
您可以以下列方式自訂最適化的表單樣式:
  • 變更主題
  • 更改元件的樣式

變更主題

您可以變更最適化表單的主題,以確保其外觀與嵌入最適化表單的網頁一致。
使用CSS屬性變更最適化表單的整體外觀通常是主題變更的一部分。 對「最適化表單的確定與感覺」的重大變更(例如元件版面配置和位置的變更)不會視為主題變更。
以引導為基礎,下列CSS屬性集會定義網頁的主題:
  • 背景色彩
  • 邊框(文字、顏色、粗細)
  • 字型色彩
  • 邊距
  • 邊距
  • 字型大小
  • LineHeight
目前,LESS變數僅針對自適應形式中各種元素的這些屬性進行定義。

變更元件樣式

您可以變更元素的外觀、版面、位置和可見度。 若要完成此工作,請建立或更新您的自訂。css檔案,以包含本文中所列的樣式結構。
若要將樣式套用至最適化表單,請在中開啟最適化表單以進行編輯,開啟最適化表單容器的屬性,然後在基本索引標籤中指定自訂CSS檔案的路徑。 預設最適化表單的樣式建構,並以自訂。css檔案中所列的建構值覆寫。

元件

本文討論的元件有其預先定義的CSS類別。 您可以編輯變數以修改CSS類別中的樣式。 或者,您也可以重寫整個類。 本節介紹可使用變數修改的元件和樣式中的類。

容器樣式

容器是頂層元件。 其他面板和欄位位於容器元件下方。
CSS 類別
guideContainerNode
變數說明
變數說明
container-bgColor
容器的背景顏色
container-padding
容器的填充
container-margin
容器的邊界
container-fontColor
容器的字型顏色

欄位樣式

最適化表單包括各種欄位類型。 每個欄位都有一個唯一的類名,即欄位的名稱。 該欄位還具有公用類名 guideFieldNode
欄位包括標籤、Widget、說明說明(包括長篇和短篇說明)和欄位說明圖示(問號)。
CSS 類別
guideFieldNode
變數
說明
field-padding
欄位填補
field-error-font-color
欄位錯誤消息的字型顏色
field-error-font-size
欄位錯誤訊息的字型大小

標籤樣式

用於欄 位的 HTML元素標籤包 含左側 或上側的類,視標籤位於上側或左側而定。
CSS 類別
guideFieldLabel
變數
說明
label-font-color
欄位標籤的字型顏色
label-font-size
欄位標籤的字型大小
label-line-height
欄位標籤的CSS行高屬性
label-font-weight
欄位標籤的CSS字型粗細屬性
label-margin
欄位標籤的邊界
標籤的CSS規則會使用guideFieldLabel標 簽套用 。 如果您是作者,請覆寫此規則,讓您的自訂變更可見。

Widget樣式

Widget也會依其類型而包含類別。 通常,Widget會包含 guideFieldWidget 類別。 隨HTML提供的Widget通常使用標準HTML元素輸入並選取。 樣式會據此進行。 您無法變更變數,以自訂介面工具集的樣式設定。
CSS 類別
guideFieldWidget
變數
說明
widgets-bg-color
Widget的背景顏色(不適用於核取方塊和選項按鈕)
widgets-border-color
Widget的邊框顏色
widgets-border-thickness
Widget的邊框大小
widgets-border-radius
Widget的邊框半徑
widgets-border-type
Widget的邊框類型
widget-border-focus-type
介面工具集邊框的焦點類型
widgets-border
Widget的合併邊框樣式
widgets-font-color
介面工具集內文字的顏色
widgets-font-size
介面工具集內的文字大小
widgets-line-height
介面工具集的CSS線條高度屬性
widgets-padding
介面工具集的CSS填補屬性
widgets-focus-border-color
介面工具集聚焦時的邊框顏色
widgets-mandatory-border-color
強制欄位的介面工具集邊框顏色
widgets-mandatory-bg-color
強制欄位的介面工具集背景顏色
widgets-disabled-bg-color
停用欄位時介面工具集的背景顏色
widgets-disabled-font-color
停用欄位時介面工具集的字型顏色
widgets-disabled-border-color
停用欄位時介面工具集的邊框顏色
widget-height
介面工具集的高度(無法用於核取方塊和選項按鈕)
checkbutton-height
核取方塊和選項按鈕的高度。
listboxwidget-height
多選下拉式清單的最高高度

介面工具集樣式限制

焦點、強制和停用欄位的樣式會使用變數加以限制。 不過,您可以覆寫樣式來變更樣式。 使用變數的限制主要是為了保持變數數目的檢查。 如果場的外觀發生顯著變化,則可以放鬆限制,因為它位於前面討論的任何狀態中。

說明說明

作者可以使用簡短和詳細說明元件,在欄位中指定說明內容。 這兩個元件都有一 .guideHelpDescription 個公用類 .long / .short ,具體取決於說明類型。 「說明」內容會隨附在段落元素中,以覆寫說明的樣式。 說明說明(包括長篇和短篇)會使用以widgetshelp開頭的變數來修改,如下表所述:
變數
說明
widgets-help-long-bg-color
Widget的背景顏色長篇說明
widgets-help-long-border-color
Widget的邊框顏色長篇說明
widgets-help-long-border-indicator-color
Widget的左指示符邊框顏色長說明
widgets-help-short-bg-color
Widget的背景顏色簡短說明
widgets-help-short-color
Widget的字型顏色說明
widgets-help-short-tooltip-bg-color
Widget的背景顏色簡短工具提示說明
widgets-help-short-tooltip-color
Widget的字型顏色簡短工具提示說明

Terms and Conditions

「條款與條件」(TnC )介面工具集可讓您指定條款與條件。 您可以使用下表所述的變數來自訂介面工具集。
變數
說明
tnc-unvisited 未瀏覽的tnc連結的字型顏色。
tnc-visited 已造訪的tnc連結的字型顏色。

按鈕

按鈕也是Widget。 不過,其樣式與Widget略有不同。 在最適化表單中,下列任一項皆構成按鈕:
  • #
  • 按鈕
  • 元素與類別。button
按鈕的HTML程式碼:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS 類別
說明
iconButton-icon
提供按鈕的圖示
iconButton-label
樣式按鈕標籤/標題
變數
說明
button-border-size
按鈕的邊框大小
button-border-type
邊框類型
button-padding
按鈕的CSS填補屬性
button-font-size
按鈕的字型大小
button-background-color
按鈕的背景顏色
button-font-color
按鈕的字型顏色
button-border-color
按鈕的邊框顏色
button-large-padding
大按鈕的間距(類別為。buttonlarge的按鈕)
button-large-font-size
大型按鈕的字型大小
button-small-padding
小按鈕的間距(類別為。buttonsmall的按鈕)
button-small-font-size
小按鈕的字型大小
button-info-background-color
資訊按鈕的背景顏色(具有類別。buttoninforment的按鈕)
button-info-font-color
提供資訊的按鈕的字型顏色
button-info-border-color
資訊按鈕的邊框顏色
button-warning-background-color
警告樣式的按鈕的背景顏色(類別為。buttonwarning的按鈕)
button-warning-font-color
警告樣式化按鈕的字型顏色
button-warning-border-color
警告樣式化按鈕的邊框顏色
button-alert-background-color
警報按鈕的背景顏色(具有類。buttonalert的按鈕)
button-alert-font-color
警報按鈕的字型顏色
button-alert-border-color
警報按鈕的邊框顏色

Question mark

對於介面工具集,當作者在「說明」內容中新增詳細說明時,就會顯示問號。 使用引導中提供的預設表徵圖。 若要使用自訂圖示,您可以自訂引導圖示。
CSS 類別
guideHelpQuestionMark
變數
說明
questionmark-font-color
表徵圖顏色
questionmark-hover-font-color
滑鼠停留在圖示上方時的圖示顏色

表格

您可以使用下列變數,變更表格標題列和內文列的色彩主題。
變數
說明
table-header-bg-color
標題列的背景顏色。 預設值為 #333
table-odd-row-bg-color
奇數內文行的背景顏色。 預設值為 rgb(255, 255, 255)
table-even-row-bg-color
偶數內文行的背景顏色。 預設值為 #eee

檔案附件

最適化表單的檔案附件Widget可讓您上傳檔案。 您也可以使用變數自訂介面工具集。
變數
說明
fileItemPadding
填充介面工具集中顯示的檔案
fileItemBackground
檔案項目的背景顏色
fileItemBorderColor
上邊框的邊框顏色
fileItemColor
檔案項目的字型顏色
filePreviewIconColor
介面工具集中「預覽」圖示(引導表徵圖)的顏色
fileItemCommentHeight
檔案項目的註解高度

面板樣式

「面板」包含選用工具列及其內容。
CSS 類別
guidePanelNode
變數
說明
panel-background-color
面板的背景顏色
panel-font-size
面板文字的字型大小
panel-font-color
面板文字的字型顏色
panel-padding
在面板內填充
panel-description-font-size
面板說明的字型大小
panel-description-padding
面板說明的填充
panel-help-bg-color
面板說明的背景顏色
panel-help-border-indicator-color
面板說明的指示符邊框顏色
面板節點被分為導覽器和內容。 內 容沒有單獨的樣式元件。 描述的變數會套用在導覽器和內容上。
最上方的面板(RootPanel)沒有此類。

行動樣式

Header bar

這些變數會影響行動裝置或小型螢幕裝置上可見的標題列,這些裝置包含面板標題以及下一個和後一個導覽器。
CSS 類別
guide-header-bar
變數
說明
headerbar-background-color
標題列的背景顏色
headerbar-font-color
標題列內文字的字型顏色
headerbar-padding
標題欄的間距

捲動指示器

這些變數會影響「捲動」指示器,此指示器是顯示在行動裝置或小型螢幕裝置上的橙色箭頭。 「捲動」指示符指示螢幕的可見部分以外有內容。 您可以向下捲動以檢視。 當您按下內容結尾時,箭頭會消失。
CSS 類別
mobileScrollIndicator
變數
說明
scrollIndicatorBottom
從下到下的捲軸器固定位置
scrollIndicatorRight
捲軸器右側固定位置
scrollIndicatorWidth
捲動器寬度
scrollIndicatorHeight
捲軸器高度

行動固定工具列版面特定變數

下表中的這些變數會影響行動固定工具列的版面配置。
CSS 類別
mobileToolbar
變數
說明
mobileToolbarBottom
固定工具列在行動裝置上的下方位置
mobileToolbarTop
固定工具列在行動裝置上的位置,從上方
mobileToolbarLeft
固定工具列在行動裝置上的左側位置
mobileToolbarRight
固定工具列在行動裝置上的右側位置
mobileButtonIconTopMargin
修正工具列按鈕圖示的上方位置
mobileButtonIconWidth
行動裝置上工具列按鈕圖示的寬度
mobileButtonIconHeight
行動裝置上工具列按鈕圖示的高度
mobilefixedtoolbarbgcolor
行動裝置上工具列的背景顏色

主題特定變數

位於 /etc/clientlibs/fd/af/guidetheme/simpleEnrollment的Simple enrollment 主題和類別 guide.theme.simpleEnrollment 也引入了一些變數。 如果您想要建立增強簡單註冊的主題,可以使用下列「額外變數」:
變數
說明
button-focus-bg-color
焦點按鈕的背景顏色
button-hover-bg-color
暫留時按鈕的背景顏色
button-radius
按鈕半徑
navigation-button-bg-color
導覽按鈕的背景顏色(上/下一頁)
navigation-button-bg-hover-color
暫留時的導覽按鈕(上/下一頁)的背景顏色
initial-nav-color
首次呈現時,精靈導覽器和對應進度列的背景顏色。
active-nav-color
當前/活動嚮導導航器和相應進度條的背景顏色
visited-nav-color
已瀏覽的精靈導覽器和對應進度列的背景顏色。
tabs-bifercating-border-color
將邊框顏色分叉的容器分成導覽器和面板
tabs-navigator-separator-color
左側標籤的底部邊框顏色分隔標籤(標籤導覽器)。
tabs-child-nav-bg-color
導覽器巢狀/子/子導覽器的背景顏色