列印

列印工具由新增至控制列的按鈕和啟動工具時顯示的模態對話方塊組成。

使用下列CSS類別選擇器來控制列印按鈕的外觀：

.s7ecatalogsearchviewer .s7print

列印按鈕的CSS屬性

邊距頂端	與控制條頂部的偏移。
左邊距	到左側下一個按鈕的距離；如果這是一行中的第一個按鈕，則到控制列左側的距離。
width	按鈕的寬度。
height	按鈕的高度。
背景影像	為指定按鈕狀態顯示的影像。
背景位置	如果使用CSS精靈，請放在圖稿精靈內。 另請參閱 CSS精靈。

按鈕工具提示可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

範例——若要設定28 x 28像素的列印按鈕，並針對四個不同的按鈕狀態顯示不同的影像。

.s7ecatalogsearchviewer .s7print { 
margin-top: 4px; 
margin-left: 10px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7print[state='up'] { 
background-image:url(images/v2/Print_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7print[state='over'] { 
background-image:url(images/v2/Print_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7print[state='down'] { 
background-image:url(images/v2/Print_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7print[state='disabled'] { 
background-image:url(images/v2/Print_dark_disabled.png); 
}

當對話方塊處於作用中時，會使用下列CSS類別選取器來控制覆蓋網頁的背景覆蓋：

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

背面覆蓋的CSS屬性

不透明度	背景覆蓋不透明度。
背景色	背景覆蓋顏色。

範例——若要設定背景覆蓋為灰色且不透明度為70%:

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

預設情況下，模態對話框會顯示在案頭系統的螢幕中央。 對話框的定位和大小由元件管理。對話框由以下CSS類選擇器控制：

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

對話框的CSS屬性

邊框半徑	對話框邊框半徑。
背景色	對話框背景顏色；

示例——要設定具有灰色背景的對話框：

.s7ecatalogsearchviewer .s7printdialog .s7dialog { 
background-color: #dddddd; 
}

對話框標題由表徵圖、標題文本和關閉按鈕組成。 標題容器會使用下列CSS類別選擇器加以控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

對話框標題的CSS屬性

填補	頁首內容的內部填補。

圖示和標題文字會包住另一個容器，由下列項目控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

對話框行的CSS屬性

填補	頁首圖示和標題的內填充。

標題圖示由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

對話框標題表徵圖的CSS屬性

寬度	圖示寬度。
高度	圖示高度。
背景影像	圖示影像。
背景位置	如果使用CSS精靈，請放在圖稿精靈內。 另請參閱 CSS精靈。

標題標題由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

對話框標題文本的CSS屬性

字型粗細	字型粗細。
字型大小	字型高度。
font-family	字型系列。
填補	內部文字填補。

使用下列CSS類別選擇器控制關閉按鈕：

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

關閉按鈕的CSS屬性

頂部	垂直按鈕相對於標題容器的位置。
右側	相對於頁首容器的水準按鈕位置。
寬度	按鈕寬度。
高度	按鈕高度。
填補	按鈕的內填充。
背景影像	每個狀態的按鈕影像。
背景位置	如果使用CSS精靈，請放在圖稿精靈內。 另請參閱 CSS精靈。

「關閉」按鈕工具提示和對話框標題可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

範例——若要設定對話框標題，包含間距、22 x 22像素圖示、粗體16點標題和28 x 28像素的「關閉」按鈕，從對話框容器的頂端和右側放置兩個像素：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader { 
 padding: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlgprint_cap.png"); 
    height: 22px; 
    width: 22px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='disabled'] { 
 background-image:url(images/sdk/close_disabled.png); 
}

對話框腳注由「取消」和「發送到打印」按鈕組成。 使用下列CSS類別選擇器來控制頁尾容器：

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

對話方塊頁尾的CSS屬性

border

可用來將頁尾與對話框的其餘部分以視覺化方式分隔的邊框。

頁尾有一個內容器，可保存兩個按鈕。 它由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

對話框按鈕容器的CSS屬性

填補	頁尾和按鈕之間的內填充。

使用下列CSS類別選擇器控制「取消」按鈕：

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

對話框取消按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
color	每個狀態的按鈕文字顏色。
背景色	每個狀態的按鈕背景顏色。

「傳送至列印」按鈕由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

對話框操作按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
顏色	每個狀態的按鈕文字顏色。
背景色	每個狀態的按鈕背景顏色。

此外，這兩個按鈕共用相同的通用CSS類別，可包含其他對話方塊按鈕相同的CSS設定：

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

按鈕的CSS屬性

字型粗細	按鈕字型粗細。
字型大小	按鈕字型大小。
font-family	按鈕字型系列。
線高	按鈕內的文字高度。 影響垂直對齊。
方塊陰影	陰影。
邊界右側	右鍵邊界。

按鈕工具提示可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

示例——要設定一個對話框腳注，其中「64 x 34取消」按鈕和「96 x 34發送到打印」按鈕，並且每個按鈕狀態的文本顏色和背景顏色不同：

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton { 
 width:96px; 
 height:34px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
}

主對話方塊區域（在頁首和頁尾之間）包含對話方塊內容。 在所有情況下，元件會管理此區域的寬度，無法在CSS中設定。 主對話方塊區域會使用下列CSS類別選擇器加以控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

對話方塊檢視區域的CSS屬性

高度	主對話框區域的高度。
背景色	主對話框區域的背景顏色。
margin	外邊界。

範例——若要設定主對話方塊區域，使其具有自動計算的高度、有10個像素的邊界，並使用白色背景：

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:auto; 
}

所有表單內容（如標籤和輸入欄位）都位於由下列CSS類別選擇器控制的容器中：

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

對話方塊內文的CSS屬性

填補

內填充。

範例——若要設定表單內容，使其有10個像素間距：

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody { 
    padding: 10px; 
}

對話框表單逐行填寫，其中每行都包含表單內容的一部分（如標籤和文本輸入欄位）。 使用下列CSS類別選擇器控制單一表單行：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

對話框行的CSS屬性

填補

內線填補。

示例——要設定對話框表單，使每行具有10個像素間距：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline { 
    padding: 10px; 
}

對話方塊內容的大小會透過下列CSS類別選擇器加以控制：

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

對話框輸入寬度的CSS屬性

寬度	區塊寬度。
填補	內線填補。

範例——若要將內容區塊設定為430像素寬，並在底部填入10像素間距：

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide { 
    padding-bottom: 10px; 
    width: 430px; 
}

對話方塊表單中的所有靜態標籤都可使用下列CSS類別選擇器加以控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

此類不適合控制標籤大小或位置，因為您可以將其應用於表單用戶介面中不同位置的文本。

對話方塊標籤的CSS屬性。

字型粗細	標籤字型粗細。
字型大小	標籤字型大小。
font-family	標籤字型系列。
顏色	標籤文字顏色。

對話框標籤可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

範例——若要將所有標籤設為灰色、粗體，以及9像素字型：

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel { 
    color: #666666; 
    font-size: 9pt; 
    font-weight: bold; 
}

輸入控制項會包裝在容器中，並使用下列CSS類別選擇器加以控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

左邊距

內填充。

示例——從對話框的左邊設定30像素間距。

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer { 
    padding-left: 30px; 
}

選項按鈕及其標題文字由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

對話框選項的CSS屬性

寬度	選項按鈕的總寬度（含標題）。
顏色	標題文字顏色。

選項按鈕與其標題之間的間距由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

對話框選項輸入的CSS屬性

邊界右側	選項按鈕與其標題之間的間距。

列印範圍選擇的數值選取器會使用下列CSS類別選擇器加以控制

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

對話框打印範圍的CSS屬性

寬度	數值選擇器的寬度。
邊界	數值選擇器周圍的間距。

範例——將所有選項按鈕設定為150像素寬、黑色文字、10像素間距和42像素寬的數值選取器：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption { 
    color: #000000; 
    width: 150px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input { 
    margin-right: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange { 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 42px; 
}

頁面範圍選擇和列印版面區域之間的水準分隔線是由下列CSS類別選擇器所控制：

 .s7ecatalogsearchviewer 
.s7printdialog .s7horizontaldivider

水準分隔線的CSS屬性

邊界	分隔線周圍的邊框。
填補	內填充。
寬度	分隔線寬度。
邊界	外邊界

範例——若要設定430像素寬的灰階分隔線，兩側各有10像素的垂直間距，頂端則有10像素的邊界：

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider { 
    border-top: 1px solid #aaaaaa; 
    margin-top: 10px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 430px; 
}