Styling PDF Viewer

5 min

As the Presenter is implemented for each platform, you'll need to modify the styling at different points in the Application.

Preface loading Image

By default, while loading the E-Paper PDF, an image is displayed in the viewer:

you may override this by applying the following in your custom.css, and adding the resources accordingly.

@media (min-width:501px) {
  .pp-player .pp-loaderBackground {
    background-image: url("resource://dynamic/storefront/assets/logo.png");
    background-image: -webkit-image-set(url("resource://dynamic/storefront/assets/logo.png") 1x, url("resource://dynamic/storefront/assets/logo.png") 2x);
    background-image: image-set(url("resource://dynamic/storefront/assets/logo.png") 1x, url("resource://dynamic/storefront/assets/logo.png") 2x);
    background-size: contain;
  }
}

Web

Styling to be applied via custom.css, experience wide. Use the pipelines set up for your project accordingly.

Workaround for the known bug of TOC not being properly localized:

 #wp_controls .wp-toc-container .wp-toc .wp-toc-header {
    color: transparent !important;
}
 #wp_controls .wp-toc-container .wp-toc .wp-toc-header:before {
   content: "Inhaltsverzeichnis";
   letter-spacing: 0.3px;
   font-size: 20px;
   line-height: 22px;
   font-weight: 500;
   position: absolute;
   color: white !important;
   left: 20px;
   top: 15px;
 }

To modify the styling for TOC on the web, you may override the original styles like so (remember to modify your index.scss accordingly, to include the styling as needed):

 
/* Web ToC */
.wp-toc-entries {
    width: 220px !important;
 
    .wp-toc-entry {
 
        height: 390px !important;
 
        .wp-toc-label-wrapper {
            display: block !important;
            margin-right: 25px !important;
            height: 20px !important;
            margin-bottom: 10px !important;
            width: 300px !important;
        }
 
        .wp-toc-label {
            text-align: left !important;
            font-size: 1em !important;
        }
 
        .wp-toc-thumbnail {
            height: 284px !important;
            width: 200px !important;
            background-color: transparent !important;
        }
 
        .wp-toc-texts-wrapper {
            height: 50px !important;
        }
    }
}

storefront-presenter .mainPresenterViewContainer {
  width: 100vw !important;
  height: calc(100vH - var(--appBarHeight) - 85px) !important;
  position: fixed;
  left: 0;
}

storefront-view.presenter {
  min-height: unset;
}
storefront-view.presenter > .content {
  min-height: unset;
}
storefront-view.presenter .mainPresenterViewContainer {
  height: 100%;
}

Apps

The opportunities for Styling the TOC in Apps are fairly limited at the moment.

You may modify colors and such from Purple Manager, kiosk design

Styling PDF Viewer

Preface loading Image

Table of Contents

Web

﻿

Apps