ViewerOverrideCssStyles.cs
//
// This code is part of Document Solutions for PDF demos.
// Copyright (c) MESCIUS inc. All rights reserved.
//
using System.IO;
using GrapeCity.Documents.Pdf;
namespace DsPdfWeb.Demos
{
// This sample shows how to override default GcPdfViewer's CSS Styles.
//
// You can add internal CSS to your HTML document by using a <style> element in the <head> section.
// Here's an example:
// <head>
// <style>
// body .gc-menu__btn-container { background-color: #999999; }
// body .gc-btn--accent { background-color: #000000; }
// body .gc-btn--accent:not([disabled]):not(.gc-btn--disabled):hover { background-color: #000000; }
// body .gc-viewer-host .gc-viewer .gcv-menu .gc-menu__panel-toggle--active .gc-btn { background-color: #999999; }
// body .gc-btn[disabled] { opacity: 0.7; }
// body .gc-accent-color { color: #7914a2; }
// body .gc-menu__panel-header { color: #999999; }
// body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail .label { color: #999999; }
// body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail.selected .selectdecor { background-color: #000000; }
// body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail:hover .selectdecor { background-color: #7914a2; }
// body .gcv-page-input__text { color: #7914a2; }";
// </style>
// <script type = "text/javascript" src="gcpdfviewer.js"></script></body>
// </head>
//
// Or you can add an external style sheet to define the CSS styles for many HTML pages,
// in this case add your styles to an external stylesheet file and include stylesheet file as follow:
// <head>
// <link rel = "stylesheet" href="custom_style.css">
// <script type = "text/javascript" src="gcpdfviewer.js"></script></body>
// </head>
public class ViewerOverrideCssStyles
{
public void CreatePDF(Stream stream)
{
var doc = new GcPdfDocument();
using var fs = File.OpenRead(Path.Combine("Resources", "PDFs", "CompleteJavaScriptBook.pdf"));
doc.Load(fs);
doc.Save(stream);
}
// don't put line breaks and commas here:
private const string STYLE_CODE = @"body .gc-menu__btn-container { background-color: #999999; }" +
"body .gc-btn--accent { background-color: #000000; } " +
"body .gc-btn--accent:not([disabled]):not(.gc-btn--disabled):hover { background-color: #000000; }" +
"body .gc-viewer-host .gc-viewer .gcv-menu .gc-menu__panel-toggle--active .gc-btn { background-color: #999999; }" +
"body .gc-btn[disabled] { opacity: 0.7; }" +
"body .gc-accent-color { color: #7914a2; }" +
"body .gc-menu__panel-header { color: #999999; }" +
"body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail .label { color: #999999; }" +
"body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail.selected .selectdecor { background-color: #000000; }" +
"body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail:hover .selectdecor { background-color: #7914a2; }" +
"body .gcv-page-input__text { color: #7914a2; }";
public const string JS_CODE = @"
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '"+ STYLE_CODE + @"';
document.getElementsByTagName('head')[0].appendChild(style);
function createPdfViewer(selector, baseOptions) {
var options = baseOptions || {};
var viewer = new GcPdfViewer(selector, options);
viewer.addDefaultPanels();
return viewer;
}
";
}
}