From 4e8867112fc6adf574914edacafdc5b8f7391584 Mon Sep 17 00:00:00 2001
From: Build Automaion <buildautomation@syncfusion.com>
Date: Thu, 7 Dec 2023 10:57:56 +0530
Subject: [PATCH] Integrated latest changes at 12-07-2023 10:30:08 AM

---
 ej2-javascript-toc.html                       |  10 +-
 .../js/style-and-appearance/annotation.md     | 125 ++++++++++++
 .../js/style-and-appearance/form-designer.md  | 185 ++++++++++++++++++
 .../style-and-appearance.md                   |  73 +++++++
 4 files changed, 392 insertions(+), 1 deletion(-)
 create mode 100644 ej2-javascript/pdfviewer/js/style-and-appearance/annotation.md
 create mode 100644 ej2-javascript/pdfviewer/js/style-and-appearance/form-designer.md
 create mode 100644 ej2-javascript/pdfviewer/js/style-and-appearance/style-and-appearance.md

diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html
index a3ed2762d..1e4d3422f 100644
--- a/ej2-javascript-toc.html
+++ b/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>
diff --git a/ej2-javascript/pdfviewer/js/style-and-appearance/annotation.md b/ej2-javascript/pdfviewer/js/style-and-appearance/annotation.md
new file mode 100644
index 000000000..5f788c4e3
--- /dev/null
+++ b/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
+  }
+```
diff --git a/ej2-javascript/pdfviewer/js/style-and-appearance/form-designer.md b/ej2-javascript/pdfviewer/js/style-and-appearance/form-designer.md
new file mode 100644
index 000000000..390271621
--- /dev/null
+++ b/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);
+}
+
+```
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/style-and-appearance/style-and-appearance.md b/ej2-javascript/pdfviewer/js/style-and-appearance/style-and-appearance.md
new file mode 100644
index 000000000..ca058edb8
--- /dev/null
+++ b/ej2-javascript/pdfviewer/js/style-and-appearance/style-and-appearance.md
@@ -0,0 +1,73 @@
+---
+layout: post
+title: Style and appearance in ##Platform_Name## Pdfviewer control | Syncfusion
+description: Learn here all about Style and appearance 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 ##Platform_Name## Pdfviewer control
+
+To modify the PDF Viewer appearance, you need to override the default CSS of PDF Viewer. Please find the CSS structure that can be used to modify the PDF Viewer appearance. Also, you have an option to create your own custom theme for all the JavaScript controls using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=material).
+
+## Customizing the PDF Viewer root element
+
+Use the below CSS to customize the PDF Viewer root element.
+
+```
+.e-pdfviewer{
+    border: 3px solid rgb(119, 249, 238);
+}
+```
+## Customizing the PDF Viewer container
+
+Use the following CSS to customize the PDF Viewer container
+
+```
+/* To specify background color*/
+.e-pv-viewer-container  {
+    background-color: rgb(119, 249, 238);
+}
+```
+## Customizing the PDF Viewer container
+
+Use the following CSS to customize the PDF Viewer container
+
+```
+/* To specify background color*/
+.e-pv-viewer-container  {
+        background-color: rgb(119, 249, 238);
+}
+```
+
+## Customizing the bookmark of the PDF Viewer
+
+Use the following CSS to customize the bookmark of the PDF Viewer
+
+```
+/* To specify color of the bookmark */
+  .e-pdfviewer .e-pv-bookmark-icon{
+    color: rgb(24, 182, 231);
+  }
+  .e-pdfviewer .e-pv-bookmark-icon:hover{
+    color: rgb(226, 76, 11);
+  }
+
+```
+## Customizing the Thumbnail of the PDF Viewer
+
+Use the following CSS to customize the Thumbnail of the PDF Viewer
+
+```
+/* To specify color of the bookmark */
+  .e-pdfviewer .e-pv-thumbnail-view-icon{
+    color: rgb(24, 182, 231);
+  }
+  .e-pdfviewer .e-pv-thumbnail-view-icon:hover{
+    color: rgb(226, 76, 11);
+  }
+
+```
\ No newline at end of file