DOCINFRA-2341_merged_using_automation

ej2-javascript-toc.html

@@ -1669,10 +1669,18 @@
     <li><a href="/ej2-javascript/pdfviewer/troubleshooting/document-loading-issues">Document Loading Issues in Version 23.1 or Newer</a></li>
     <li><a href="/ej2-javascript/pdfviewer/troubleshooting/content-security-policy">Content Security Policy</a></li>
   </ul>
+</li>
+  <li>Style and Appearance
+  <ul>
+    <li><a href="/ej2-javascript/pdfviewer/style-and-appearance/style-and-appearance"> Style and Appearance</a></li>
+    <li><a href="/ej2-javascript/pdfviewer/style-and-appearance/annotation">Style and Appearance in Annotation module</a></li>
+    <li><a href="/ej2-javascript/pdfviewer/style-and-appearance/form-designer">Style and Appearance in Form Field module</a></li>
+  </ul>
 </li>
 <li><a href="https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer">API Reference</a></li>
 </ul>
-</li><li>
+</li>
+<li>
 Pivot Table
 <ul>
 <li><a href="/ej2-javascript/pivotview/getting-started">Getting Started</a></li>

ej2-javascript/pdfviewer/js/style-and-appearance/annotation.md

@@ -0,0 +1,125 @@
+---
+layout: post
+title: Style and appearance in ##Platform_Name## Pdfviewer control | Syncfusion
+description: Learn all about style and appearance in the Annotation module in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: PDF Viewer 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Style and Appearance in Annotation module ##Platform_Name## Pdfviewer control
+
+## Customizing the Highlight icon
+
+Use the following CSS to customize the Highlight icon.
+
+```
+/* To specify font size and color */
+
+  .e-pdfviewer .e-pv-highlight-icon{
+    color: rgb(143, 89, 219);
+    font-size: 20px;
+  }
+```
+
+## Customizing the Underline  icon
+
+Use the following CSS to customize the Underline  icon.
+
+```
+/* To specify font size and color */
+
+  .e-pdfviewer .e-pv-underline-icon{
+    color: rgb(143, 89, 219);
+    font-size: 20px;
+  }
+```
+
+## Customizing the Strikethrough icon
+
+Use the following CSS to customize the Strikethrough icon.
+
+```
+/* To specify font size and color */
+
+  .e-pdfviewer .e-pv-strikethrough-icon{
+    color: rgb(143, 89, 219);
+    font-size: 20px;
+  }
+```
+
+## Customizing the Shape Annotation icon
+
+Use the following CSS to customize the Shape Annotation icon.
+
+```
+/* To specify font size and color */
+
+  .e-pdfviewer .e-pv-annotation-shape-icon{
+    color: rgb(143, 89, 219);
+    font-size: 20px;
+  }
+```
+
+## Customizing the Calibration icon
+
+Use the following CSS to customize the Calibration icon.
+
+```
+/* To specify font size and color */
+
+  .e-pdfviewer .e-pv-annotation-calibrate-icon{
+    color: rgb(143, 89, 219);
+    font-size: 20px;
+  }
+```
+
+## Customizing the FreeText icon
+
+Use the following CSS to customize the Handwritten signature icon.
+
+```
+/* To specify font size and color */
+
+  .e-pdfviewer .e-pv-freetext-icon{
+    color: rgb(143, 89, 219);
+    font-size: 20px;
+  }
+```
+
+## Customizing the Handwritten signature icon
+
+Use the following CSS to customize the Handwritten signature icon.
+
+```
+/* To specify font size and color */
+
+  .e-pdfviewer .e-pv-handwritten-icon::before{
+    color: rgb(143, 89, 219);
+    font-size: 20px;
+  }
+```
+
+## Customizing the Ink Annotation icon
+
+Use the following CSS to customize the Ink Annotation icon.
+
+```
+/* To specify font size and color */
+
+  .e-pdfviewer .e-pv-inkannotation-icon{
+    color: rgb(143, 89, 219);
+    font-size: 20px;
+  }
+```
+## Customizing the Close icon 
+
+Use the following CSS to customize the Close icon.
+
+```
+ #pdfViewer_annotation_closeIcon{
+    display: none
+  }
+```

ej2-javascript/pdfviewer/js/style-and-appearance/form-designer.md

@@ -0,0 +1,185 @@
+---
+layout: post
+title: Form Field  ##Platform_Name## Pdfviewer control | Syncfusion
+description: Learn all about style and appearance in the Form Field module in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: PDF Viewer 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Style and Appearance in Form Field module ##Platform_Name## Pdfviewer control
+
+## Customizing the Textbox field
+
+Use the following CSS to customize the Textbox field icon.
+
+```
+/* To specify color of the textbox*/
+
+  .e-pdfviewer .e-pv-textbox-icon{
+   color: rgb(119, 249, 238);
+   font-size: 16px;
+  }
+
+```
+
+## Customizing the Password field 
+
+Use the following CSS to customize the Password field  icon.
+
+```
+/* To specify color of the Password*/
+
+  .e-pdfviewer .e-pv-textbox-icon{
+   color: rgb(119, 249, 238);
+   font-size: 16px;
+  }
+
+```
+
+## Customizing the CheckBox field 
+
+Use the following CSS to customize the CheckBox field  icon.
+
+```
+/* To specify color of the CheckBox*/
+
+  .e-pdfviewer .e-pv-checkbox-icon{
+   color: rgb(119, 249, 238);
+   font-size: 16px;
+  }
+
+```
+
+## Customizing the RadioButton field 
+
+Use the following CSS to customize the RadioButton field  icon.
+
+```
+/* To specify color of the RadioButton*/
+
+  .e-pdfviewer .e-pv-radiobutton-icon{
+   color: rgb(119, 249, 238);
+   font-size: 16px;
+  }
+
+```
+## Customizing the ListBox field 
+
+Use the following CSS to customize the ListBox field  icon.
+
+```
+/* To specify color of the ListBox*/
+
+  .e-pdfviewer .e-pv-listbox-icon{
+   color: rgb(119, 249, 238);
+   font-size: 16px;
+  }
+
+```
+
+## Customizing the DropDown field 
+
+Use the following CSS to customize the DropDown field  icon.
+
+```
+/* To specify color of the DropDown*/
+
+  .e-pdfviewer .e-pv-dropdown-icon{
+   color: rgb(119, 249, 238);
+   font-size: 16px;
+  }
+
+```
+
+## Customizing the Signature and initial field
+
+Use the following CSS to customize the Signature and initial fields  icon.
+
+```
+/* To specify color of the Signature and initial fields*/
+
+  .e-pdfviewer .e-pv-handwritten-icon{
+   color: rgb(119, 249, 238);
+   font-size: 16px;
+  }
+
+```
+
+## Customizing the Close icon 
+
+Use the following CSS to customize the Close icon.
+
+```
+ #pdfViewer_formdesigner_closeIcon{
+    display: none
+  }
+```
+
+## Customizing the Property window 
+
+Use the following CSS to customize the property window 
+
+### Customizing the dialog header
+
+Use the following CSS to customize the dialog header properties.
+
+```
+  .e-pv-form-field-property-header {
+    color: rgb(119, 249, 238);
+    display: block;
+    font-family: cursive;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .e-pv-form-field-property-header-general{
+    font-family: "calibri";
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 15px;
+    color: rgb(119, 249, 238);
+  }
+```
+
+
+### Customizing the dialog check box
+
+Use the following CSS to customize the checkbox in the dialog.
+
+```
+  .e-pdfviewer .e-checkbox-wrapper .e-frame + .e-label, .e-pdfviewer .e-css.e-checkbox-wrapper .e-frame + .e-label{
+    font-family: cursive;
+  }
+  .e-checkbox-wrapper .e-frame{
+    border-color: rgb(119, 249, 238);
+  }
+```
+
+### Customizing the dialog close button
+
+Use the following CSS to customize the dialog close button.
+
+```
+ .e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
+    font-size: 12px;
+    color: rgb(119, 249, 238);
+  }
+```
+
+### Customizing the dialog footer button
+
+Use the following CSS to customize the dialog footer button.
+
+```
+.e-dialog .e-footer-content .e-btn {
+    font-family: "calibri";
+    font-size: 13px;
+    font-style: normal;
+    color: rgb(119, 249, 238);
+}
+
+```