Versão do Koha utilizada: 25.05.05 (Outubro de 2025).
Você já ouviu falar de snippet? A palavra snippet é um pequeno bloco de código, no nosso caso CSS (Cascading Style Sheets) que é reutilizável e projetado para realizar uma tarefa repetitiva ou aplicar um estilo específico de forma eficiente. A palavra “snippet” significa “trecho” ou “pedaço”.
Servem para: Economizar tempo (vocês não vão precisar reinventar a roda, mas poderão melhorá-la sempre que souberem como). Produtividade (vai acelerar o processo de desenvolvimento, especialmente para layouts comuns ou efeitos visuais). Consistência (sempre que você quiser usar o código vai estar aqui e como estou publicando, muitas pessoas poderão usar o mesmo código – que eu não inventei, só adequei para a realidade do koha). E por fim, personalização, customização de aparência e até mudar as fontes, cores e layouts de elementos.
Com um snippet você pode aplicar sombras em caixas (box-shadow), criar efeitos de gradiente, brilho, estilizar botões, etc.
Aqui você vai encontrar alguns snippets de melhorias de OPAC visando deixar a interface do catálogo público mais amigável e com uma experiência melhor ao usuário. A ideia é atualizar a entrada conforme mais informações se tornem disponíveis.
Catálogo público utilizado: Biblioteca Pública de Prudentópolis. Nenhuma informação sensível será mostrada. (Vamos cobrir e deixar só os snippets e o que eles fazem, ok?).
Fizemos algumas configurações prévias utilizando o plugin Galadriel (da ByWater se eu não me engano). Então vamos começar com o header.
Header: deixando o ícone do calendário amarelo. #
Aqui no nosso header por exemplo, você consegue ver que o calendário não segue o mesmo padrão de cor dos outros ícones? (provavelmente o galadriel não foi otimizado pra isso, então nós teremos que recorrer a uma modificação no CSS pela administração. Novamente com poderes de superlibrarian (e lembre-se com grandes poderes, grandes responsabilidades).
Você pode chegar no local para alterar o CSS de dois modos.
Modo 01: Através do módulo “Ferramentas”.
E depois personalizações HTML.
Na próxima tela, clica em OPACUserCSS.
E essa tela vai te levar pra área da administração que cuida justamente da personalização estética do Catálogo Público (OPAC).
E o outro caminho é você ir em Administração > Preferências do Sistema > Aba lateral até OPAC > OPACUserCSS.
É a mesma tela, a única coisa que eu fiz aqui foi clicar em “Editar” e ele abriu um quadradinho para escrevermos.
Snippet 01: Mudando a cor do ícone de histórico de busca do header. #
Vamos modificar a cor do ícone de calendário “Histórico de busca” do header. Perceba que ele está diferente dos outros ícones.
/*modificando a cor do ícone de calendário "Histórico de Busca" do header*/
.fa.fa-calendar-days.fa-fw.fa-icon-black {
color: #FAA21B ;
}A primeira frase ali, em /* … */ é um comentário dentro do código, pra que fique organizado.
Agora usa a mesma cor do ícone “entre na sua conta” e do botão de busca. Isso dá mais coerência pra página.
Em outra documentação de personalização nós modificamos completamente esse ícone. (procure por “inserindo menus de redes sociais”)
Snippet 02: Estendendo a faixa de busca principal e a faixa dos menus. #
Consegue ver que eles parecem tortos? Isso vai ser resolvido estendendo as duas faixas azuis pra que independentemente de que tipo de tela se use, elas apareçam de uma ponta a outra da tela, por igual.
Este código faz a div da busca (#opac-main-search.mastheadsearch) continuar com o tamanho “normal”, mas cria uma faixa azul de largura total atrás dela usando um pseudo‑elemento ::before. Cole no OPACUserCSS.
/* Bloco da busca: mantém tamanho e vira referência para o ::before */
div.col > #opac-main-search.mastheadsearch {
position: relative; /* necessário para posicionar o ::before */
margin: 30px 0; /* distância da faixa em relação aos elementos acima/abaixo */
padding: 30px 0; /* altura da faixa (aumente/diminua aqui) */
background: transparent; /* quem pinta é só o ::before */
}
/* Faixa azul de fora a fora, alinhada com o bloco da busca */
div.col > #opac-main-search.mastheadsearch::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%); /* centraliza a faixa em relação à tela */
width: 100vw; /* largura da viewport inteira */
height: 102%; /* ligeiramente maior para não sobrar “dente” */
background: #0f4379; /* cor/gradiente da faixa */
z-index: -1; /* fica atrás do formulário de busca */
}Vou deixar ele sem comentários pra vocês copiarem e colarem. A ideia de ter um código comentado é aprender como cada coisa se comporta pra conseguir modificar o elemento. No caso, do snippet pra ‘aumentar’ a faixa é criar uma faixa atrás do elemento, a gente chama isso de pseudo elemento…
div.col > #opac-main-search.mastheadsearch {
position: relative;
margin: 30px 0;
padding: 30px 0;
background: transparent;
}
div.col > #opac-main-search.mastheadsearch::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100vw;
height: 102%;
background: #0f4379;
z-index: -1;
}
E aqui um snippet do menu de baixo (o que tem os elementos ‘pesquisa avançada’, ‘busca de autoridade’, etc) comentado pra vocês entenderem como funciona cada coisa:
/* Alterando a faixa do menu de mais buscas */
ul#moresearches.nav { /* seletor da faixa do menu "Mais buscas" */
width: 100%; /* faz a faixa ocupar toda a largura disponível */
background-color: #0f4379; /* mantém o azul da identidade visual */
margin: 0; /* remove margens externas */
padding: 0 15px; /* espaço interno lateral para não colar nas bordas */
display: flex; /* transforma a faixa em um container flexível */
justify-content: center; /* centraliza os itens do menu na horizontal */
}
Mas, se quiser sem comentário, só pra copiar e colar….
ul#moresearches.nav {
width: 100%;
background-color: #0f4379;
margin: 0;
padding: 0 15px;
display: flex;
justify-content: center;
}
Vamos ver primeiro como a nossa OPAC está hoje depois destas pequenas alterações? Ainda temos muito o que alterar, certo?
Ela está bem “bagunçada”. Vamos configurar parte a parte dela pra você entender. A primeira mudança que nós vamos fazer é aqui na lateral. Vamos transformar esse amontoado de links em botões.
Snippet 03: Criando botões em html/css #
Vamos trabalhar aqui com duas abas, ok? Uma nós vamos deixar na OpacUserCss que estavamos antes. Embaixo do código que já colocamos, vamos colocar mais este aqui:
/*CSS para os botões da lateral esquerda*/
.botao-esquerdo {
display: block;
padding: 8px 12px;
background-color: #0f4379;
color: #ffffff;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
margin-bottom: 6px;
}
.botao-esquerdo:hover,
.botao-esquerdo:focus {
background-color: #FAA21B;
color: #0f7349;
}O que eu fiz? Eu disse pro meu código que meus botões se chamam .botao-esquerdo (poderia ser botão-da-esquerda, poderia ser qualquer coisa porque esse nome é você quem decide, idealmente de um modo que outra pessoa possa entender). Também disse que ele vai ser azul como o resto do nosso design (background-color: #0f4379) e as letras vão ser brancas (color: #ffffff). Ele vai ter as bordas levemente arredondadas (border-radius 4px) a fonte não vai ser nem muito fina e nem muito grossa (font-weight:500) o tamanho do botão vai ser de 8px x 12px e quando eu passar o mouse em cima (hover) o botão vai ficar amarelo (estes códigos com letras e números que se seguem após # são chamados de códigos hex, você pode definir as cores que irá utilizar numa busca simples por “cor x hex” que seu buscador deverá informar.)
Agora vamos para outra aba, vamos pra parte de edição dos blocos HTML. Você entra em: Início> Ferramentas > Personalizações HTML
Você provavelmente não tem essa parte no seu código, mas você pode ter, se quiser. Basta clicar em “+ Nova Entrada”. Isso vai te levar para uma página assim:
Na primeira parte em “Exibir Localização” Você escolhe a opção OpacNav. Em Biblioteca, se você quiser exibir em apenas UMA localização, escolha a biblioteca aqui. Mas, caso seja uma configuração geral para todas as entidades, escolha “Todas as bibliotecas”. Em data de publicação, você escolhe uma data anterior ao dia em que está, porque assim a publicação passa a valer à partir daquela data. (Se quiser que a publicação desapareça depois de um período, coloque uma data de validade). E coloque a posição de página em que aparece (caso você tenha mais de um item do mesmo tipo, dois recados no OpacNav por exemplo, a ordem de aparição deles).
Você também pode escolher por grupo de idiomas, etc. No meu caso, a tela está assim:
Se eu clicar no botão <> ali no editor, ele vai me mostrar o código e é aqui que você vai trabalhar. (E sempre que você salva alguma coisa, ele minifica, ou seja, automaticamente bagunça sua vida, é por isso que é ideal que você documente isso em algum lugar fora do koha. Por questão de organização, backup e boas práticas). Vou te mostrar como está o meu (eu apaguei algumas informações, mas nada do código em si).
Eu vou arrumar essa bagunça e você vai enteder passo a passo o que deve ter cada coisa, ok?
Primeiramente que botões você quer ter aqui? Quais são importantes para a sua instituição? Eu vou criar botões para redes da nossa instituição e botões que auxiliem nossos leitores, tipo “Como usar o Catálogo”, “Serviços da Biblioteca”, Horários e Endereço”, “Sugira um livro”, ideias pra vocês: Caso tenham uma rede de bibliotecas “Outras bibliotecas de Prudentópolis” , “Repositório / Coleções digitais”.. e por aí vai. Pense em experiência de usuário, pense em clareza, lembre da regra “Poupe o tempo do seu leitor”. E como você monta um botão em html? (que é o que você vai usar aqui)
Snippet 04: Estrututa de um botão #
Cada botão é na verdade, um link ( <a> ) com uma classe de estilo e, opcionalmente, um ícone. A estrutura básica é:
<a class="lib-left-button" href="URL_DO_LINK" target="_blank" rel="noopener">
<i class="mdi MDI-DO-ICONE"></i> Texto do botão
</a>Em seguida, indique que todos os botões vão dentro do mesmo “bloco”:
<div class="lib-left-nav" aria-label="Links úteis da biblioteca">
<!-- coloque seus botões aqui dentro -->
<a class="lib-left-button" href="https://exemplo.com" target="_blank" rel="noopener">
<i class="mdi mdi-book-open-page-variant"></i> Como usar o Catálogo
</a>
</div>Primeiro o CSS e depois o HTML, primeiro descreve como você está construindo a cena e depois dá a estrutura dela. Eu indico ali que o botão tem que ter segurança pra abrir em outra aba (noopener) e que quero que ele tenha um ícone, pode ser da biblioteca mdi ou você pode escolher da Font Awesome (ou qualquer outra). Vou colocar um da font awesome pra ficar bem bonito. Veja, o botão diz que vai ter o link aí eu informo o link , que ele vai abrir em outra aba e vai usar aquele ícone e terá escrito “Cultura – Prudentópolis”.. certo? Aí começa outro botão…
<div class="lib-left-nav" aria-label="Links úteis da biblioteca">
<a class="botao-esquerdo" href="https://cultura.prudentopolis.pr.gov.br" target="_blank" rel="noopener">
<i class="fa-thin fa-palette"></i> Cultura - Prudentópolis
</a>
<a class="botao-esquerdo" href="https://prudentopolis.pr.gov.br" target="_blank" rel="noopener">
<i class="fa-thin fa-building-columns"></i></i> Prefeitura de Prudentópolis
</a>
<a class="botao-esquerdo" href="https://wa.me/5542935059225" target="_blank" rel="noopener">
<i class="fa-brands fa-whatsapp"></i> WhatsApp da Biblioteca
</a>
</div>
Salvei, ficou assim. Mas quando eu vou na OPAC, ele vai mostrar pra mim assim:
E em hover:
Caso queira alterar a quantidade de botões, basta voltar naquele mesmo lugar em que você criou os botões (Ferramentas > Personalização HTML > título do arquivo que você criou, no nosso caso, botões da esquerda rs) e editar. O Koha sempre tira os espaços do código (minifica) por isso é recomendado que você tenha um backup disso em algum outro documento (um arquivo html do vscode, um arquivo de texto, alguma coisa que você possa controlar e visualizar esses códigos de maneira mais organizada, você pode incluir estes arquivos como documentos da sua instituição pensando naqueles que virão depois).
Melhorando o Carrossel de Livros #
A próxima coisa que vamos alterar aqui é como o nosso carrossel de livros aparece na OPAC. Porque, a princípio, ele fica imenso, atrapalhando a visualização de tudo. Então precisamos colocar ele dentro de uma caixa invisível que force a diminuição da visualização, vamos rever como o carrossel estava:
Mas como fazemos isso? Primeiro precisamos descobrir a classe desse carrossel. Como o sistema chama ele. (e não tenho como printar isso rs. Mas vou te instruir). Você vai clicar sobre o carrossel na opac com o botão direito do mouse. Ok? E se estiver usando o Firefox, clicará em “Inspecionar” ele vai te mostrar o código do elemento onde você clicou na página (isso é possível de ser feito em qualquer página da internet).
ali onde está sublinhado mostra uma sequencia de texto com um link para “images” ou “img src = link…” E ele tem uma seta pra baixo na lateral esquerda, isso quer dizer que aquela imagem (img) está dentro de alguma coisa (uma caixa invisível por exemplo). Usando o botão de scroll do mouse você vai subir o código até ver onde essa imagem chega. Dentro do que ela está. E conforme você clica nas coisas na página, ele vai selecionando elementos dentro da interface web pra você ter noção de qual é aquele elemento em que você está mexendo.
Com isso conseguimos descobrir qual era o elemento html do carrossel para maquiarmos o html com um pouco de css. Então vamos mexer nesse box. Lá no OpacUserCss, vamos criar algo assim:
Snippet 05: Melhorando o Carrossel #
/* box do carrossel */
#coverflow {
max-width: 800px; /* largura máxima do carrossel */
max-height: 200px; /* altura máxima do carrossel */
margin: 0 auto 20px; /* centraliza e dá espaço embaixo */
padding: 10px;
background: #ffffff;
border: 1px solid #ddd;
border-radius: 4px;
}
/* garante que os itens não estourem a largura do box */
#coverflow .flipster {
max-width: 100%;
margin: 0 auto;
}Isso fez o nosso carrossel ficar num espaço menor, visualmente mais agradável
Deixei comentado onde é a altura e a largura pra você testar na sua própria realidade e ver como isso fica. E aqui você vê que nós diminuímos o box do carrossel (coverflow) mas isso cortou as imagens, precisaremos tratar essa questão diminuindo o tamanho das imagens dentro. Como deixei com 200px de altura a caixa fora, eu vou deixar as imagens com 190px.
/* Deixa as capas um pouco menores sem cortar */
#coverflow .flipster__item__content img {
max-height: 190px; /* reduz a altura das capas */
width: auto;
}
Boa sorte 😀
