segunda-feira, 1 de agosto de 2016

Personalizando as páginas de erro do Squid

O daemon monta as páginas com base nos esqueletos presentes em /usr/share/squid/errors/<locale>/. São servidas de acordo com a língua do cliente obtida do cabeçalho HTTP. Do arquivo /etc/squid/errorpage.css sai o estilo. Seu conteúdo é injetado no HTML dentro de um elemento <style>.

Pacotes RPM marcam /etc/squid/errorpage.css como %config(noreplace): ao ser editado localmente, nunca é substituído por cópia mais recente do pacote (/etc/squid/errorpage.css.rpmnew será criado caso necessário). No que diz respeito à aparência, esse arquivo é território do administrador.

Imagens precisam ser hospedadas num servidor web acessível aos clientes.

Aparência padrão

Mexendo um pouquinho no CSS.

--- /etc/squid/errorpage.css    2017-02-06 09:20:07.000000000 -0200
+++ /etc/squid/errorpage.css    2017-02-10 13:52:05.462396002 -0200
@@ -21,9 +21,10 @@
 html body {
     margin: 0;
     padding: 0;
-    background: #efefef;
     font-size: 12px;
     color: #1e1e1e;
+    background: url('http://centos.localdomain/interestelar.jpg') center top/cover no-repeat fixed black;
+    text-shadow: 3px 3px 5px lightgrey;
 }
 
 /* Page displayed title area */
@@ -31,15 +32,15 @@
     margin-left: 15px;
     padding: 10px;
     padding-left: 100px;
-    background: url('/squid-internal-static/icons/SN.png') no-repeat left;
+    background: url('http://centos.localdomain/cafe.png') left/90px no-repeat;
 }
 
 /* initial title */
 #titles h1 {
-    color: #000000;
+    color: white;
 }
 #titles h2 {
-    color: #000000;
+    color: white;
 }
 
 /* special event: FTP success page titles */
@@ -52,6 +53,8 @@
 #content {
     padding: 10px;
     background: #ffffff;
+    opacity: 0.8;
+    text-shadow: none;
 }
 
 /* General text */
@@ -101,4 +104,5 @@
 #footer {
     font-size: 9px;
     padding-left: 10px;
+    color: white;
 }

Aplicamos com systemctl reload squid.service.

Resultado:

Interestelar

(imagem daqui)

Fica menos monótono para os clientes. ☺

[Atualização - 10/02/2017] Colocar background-size dentro de background.

2 comentários:

  1. Respostas
    1. Só esqueci de comentar que o CSS não funcionará direito no IE8 (e no IE9 ficará capenga sem as sombras no texto). Mas ninguém em sã consciência dá a mínima para tais museus mesmo... :-|

      Excluir