---
title: Styling PDF Viewer
slug: experience/styling-pdf-viewer
docTags: 
createdAt: 2024-08-06T15:17:11.713Z
---

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: 

::Image[]{src="https://api.archbee.com/api/optimize/5BcD92LGj2lr1vKyBc90K-37mv7urrDOQjwBxqYtKsX-20250319-162542.png" size="24" width="356" height="220" position="center" showCaption="false"}

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

```css
@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;
  }
}
```

# Table of Contents 

## 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: 

```css
 #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): 

```css
 
/* 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