+++
date = "2019-10-27T07:12:59+00:00"
publishdate = "2023-12-29T07:08:55+00:00"
title = "Improving Paperless' Interface"
slug = "improving-paperless-interface"
author = "Thedro"
tags = ["python","css"]
type = "posts"
summary =  "Paperless is an open source Django web application for searching documents that have been indexed using OCR (Optical Character Recognition). "
draft =  ""
syntax =  "1"
toc =  ""
updated =  "2021-11-03"
+++

{{< image source="/images/improving-paperless-interface.png" title="Improved Paperless Interface" >}}
Improved Paperless Interface {{< /image >}}

[Paperless,](https://github.com/the-paperless-project/paperless) now known as
[paperless-ng,](https://github.com/jonaswinkler/paperless-ng#paperless-ng) and
[paperless-ngx](https://github.com/paperless-ngx/paperless-ngx#readme) is an
open source
{{< sidenote mark="Django" set="left" >}}[Django](https://www.djangoproject.com/)
is a Python web framework.{{< /sidenote>}} web application for searching
documents that have been indexed using `OCR` (Optical Character Recognition).
The backend can be gutted in any way you like to run customized operations pre
and post document {{< sidenote mark="consumption." set="right" >}}The document
consumption process can be paired with
[`ocrmypdf`](https://github.com/jbarlow83/OCRmyPDF) for precise control of the
generated text layer when using the
[Tesseract `OCR` Engine](https://github.com/tesseract-ocr/tesseract).{{< /sidenote>}}
Paperless provides a robust, quick, and hands
{{< sidenote mark="free" set="left" >}}Connect a scanner to this system, and
never see paper again.{{< /sidenote>}} solution for those who may want to go
"paperless". The interface is lacking though --- it's the Django admin dashboard
after all. On initial deployment it looks bare.

{{< image source="/images/improving-paperless-interface-default.png" title="Default Paperless Interface" >}}
Default Paperless Interface {{< /image >}}

The project has provided a way to override `CSS` and `JavaScript` at run time.
To do this, create the files `overrides.css` and `overrides.js` in the `media`
folder from the project's root directory. I'm going for a clean look. Here's a
stylesheet override implementing some improvements to the interface.

```css
body { background-color: #fcfcfc; max-width: 1800px; margin: 0 auto; }
label[for="searchbar"] { display: none !important; }
.result .header { background-color: #fff !important }
.result .header a, .result a.tag { color: #000 !important; }
.result .header .info { display: none !important; }
.result .date { color: #555 !important; }
thead th a:link, thead th a:visited { color: #000 !important; }
thead th, tfoot td { color: #000 !important; }
a.section:link, a.section:visited { color: #000 !important; }
#changelist-filter { background: transparent }
.results, #changelist-filter, #login-form, fieldset { text-align: left }
.selector .help-icon { background: url(/static/admin/img/icon-unknown.svg) 0 0 no-repeat !important; }
.xfull { margin-top: -1rem; }
.object-tools { display: inline-block; }
.module, #changelist .actions { background-color: transparent; }

#changelist #toolbar { 
  border-top: none !important; 
  border-bottom: none !important; 
  background-color: transparent !important;
}

.djangoql-toggle { display: none !important; }
.paginator { border-top: none !important; }
#changelist .paginator { border-bottom: none !important; }
#changelist .toplinks { border-bottom: none !important; }
.grid { margin-right: 0 !important; }
.quiet { margin: 0 1rem !important; color: #555; }

@media (max-width: 560px) { table#result_list { display: block; overflow:scroll } }

.paginator .this-page {font-size: 24px !important; color: #17541f; }
.paginator a:link, .paginator a:visited { background-color: transparent !important; color: #000 !important; }
.paginator a:focus, .paginator a:hover { background-color: #ccc !important; border-radius: 6px; }
#header { color: #000 !important; background-color: transparent !important; }
#header a:link, #header a:visited { color: #000 !important; }
.breadcrumbs { display: none !important; }
#content h1 { display: none !important; }
#content-related { float: none !important; width: 100% !important; position: inherit !important; margin-right: 0 !important; text-align: left; background-color: transparent !important; }
.colMS { margin: 0 auto !important; }
#branding, #user-tools, #content { text-align: center; }
.colMS div:first-child h3:first-child { color: #17541f; font-size: 2rem !important; }
.colMS div:first-child { margin-bottom: 4rem !important; }
.actions { margin-bottom: 2rem; justify-content: center; }
textarea { vertical-align: middle !important }
#changelist-search > div, #changelist-search input[type="submit"] { font-weight:bold; margin: 0 auto; }
#changelist #toolbar form input[type="submit"] { margin: 1rem auto; padding: 8px 24px; }

.button, input[type=submit], input[type=button], .submit-row input, a.button {
  color: #fff !important;
}

.button, .button:active, .button:focus, .button:hover, a.button, .submit-row input, input[type="submit"], input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover, input[type="button"], input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover {
    background-color: #17541f !important;
}

.button, #changelist #toolbar form input[type="submit"] { border: none !important; box-shadow: none !important; }

#changelist-search input#searchbar { width: 100%; }

#searchbar {
  margin: 2rem 0 !important;
  height: 1rem !important; 
  padding: 0.75rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) { #searchbar { width: 100% !important; } }

.module h2, .module caption, .inline-group h2 {
    background-color: #eee;
    color: #000 !important;
}

.object-tools a:link, .object-tools a:visited { border-radius: 3px; background-color: #17541f; }
```

We should also replace the default logo with its darker variant, since the
background colors are now significantly lighter.

```diff
diff --git a/src/documents/templates/admin/base_site.html b/src/documents/templates/admin/base_site.html
index 0f76ec58..d84574ca 100644
--- a/src/documents/templates/admin/base_site.html
+++ b/src/documents/templates/admin/base_site.html
@@ -55,7 +55,7 @@

 {% block branding %}
 <h1 id="site-name">
-	<a href="{% url 'admin:index' %}"><img src="{% static 'paperless/img/logo-light.png' %}" alt="Paperless" /></a>
+	<a href="{% url 'admin:index' %}"><img src="{% static 'paperless/img/logo-dark.png' %}" alt="Paperless" /></a>
 </h1>
 {% endblock %}
```

Every page of the application has been improved. Notably, the table row headers
have been adjusted for responsive
{{< sideimage mark="design." set="right" source="/images/improving-paperless-interface-mobile.png" >}}Responsive
View{{< /sideimage >}} The overall result is decent enough.

{{< image source="/images/improving-paperless-interface-search.png" title="Default Paperless Interface" >}}
Improved Paperless Search Interface {{< /image >}}

More functional improvements can be implemented using
{{< sidenote mark="JavaScript," set="left" >}}We can implement search
suggestions using text from the `OCR` layer.{{< /sidenote>}} but I'll leave it
there. The changes listed in this article can be viewed at
[this repository.](https://github.com/tdro/paperless/commits/master)