Comprender la estructura de ficheros de un paquete de personalización

Su paquete de personalización debe estar estructurado de la siguiente manera para garantizar que se integre correctamente con Primo VE:

<View_Code>: la carpeta superior de su paquete de personalización. Se debe cambiar el nombre de la carpeta superior por el código de vista de la institución, que debe estar en el siguiente formato: <institution_code>-<view_code>. Esta carpeta debe incluir las siguientes subcarpetas:

• activos - Toda la personalización de la NDE se realiza dentro de las siguientes subcarpetas:

  • css - Esta subcarpeta contiene el fichero custom.css, que incluye sus reglas de formato para la interfaz de usuario de la NDE (excepto para la página de destino). Estas reglas ignoran las reglas correspondientes en el CSS por defecto.

  • header-footer - Al añadir los ficheros header.html y footer.html, puede personalizar el encabezado y el pie de página de su vista, respectivamente. Para más información, consulte Añadir encabezados y pies de página a continuación.

  • homepage - Esta carpeta le permite personalizar la página de destino añadiendo su HTML, CSS e imagen de fondo. Por defecto, incluye las siguientes plantillas: homepage_en.html.tmpl y homepage.css.tmpl. Para más información, consulte Personalización de la página de destino a continuación.

  • icons - Esta subcarpeta le permite personalizar varios iconos de la interfaz de usuario de la NDE, incluido el favicon.ico. Por defecto, solo incluye el fichero custom_icons.svg. Para más información, consulte Personalizar iconos a continuación.

  • images - Esta subcarpeta le permite personalizar imágenes para la interfaz de usuario de la NDE, como el logotipo de su biblioteca (library-logo.png) y los iconos de tipo de recurso (icon_<resource_type_code>.png). Por defecto, solo incluye el fichero library-logo.png. Para más información, consulte Personalizar ficheros de imágenes a continuación.

  • js – Esta subcarpeta incluye el fichero custom.js, en el que puede colocar el código JavaScript que debe ejecutarse cuando se carga la interfaz de usuario de la NDE. Este fichero se utiliza de forma diferente en la NDE que en la interfaz de usuario original y ya no se utiliza para añadir componentes Angular personalizados vinculados a un componente específico. Para implementar esa configuración, consulte Capacidades avanzadas de personalización y Gestionar complementos para la interfaz de usuario de la NDE a continuación. 

Crear e implementar un paquete de personalización

La pestaña Gestionar paquete de personalización descarga/carga el paquete de personalización entre el servidor Primo VE y su equipo local. Antes de actualizar un paquete de personalización existente, se recomienda descargarlo del servidor para asegurarse de que esté utilizando la copia más reciente. Si va a crear un paquete de personalización, le recomendamos que descargue la plantilla.

Para obtener más información, consulte Gestionar paquetes de personalización a continuación.

1. Edite su vista en la página Lista de vistas (Configuración > Descubrimiento > Configuración de despliegue > Configurar vistas).

2. Seleccionar la pestaña Gestionar paquete de personalización.

   

   Pestaña Gestionar paquete de personalización para la interfaz de usuario de la NDE

3. Si esta es la primera vez, descargue el paquete de plantilla en la sección Descargar paquete. De lo contrario, descargue el paquete actual para asegurarse de que utiliza la última versión.

4. Descomprima los ficheros.

5. Asegúrese de que la carpeta superior del fichero zip de su paquete sea la carpeta <View_Code>, que debe tener el siguiente formato: <institution_code>-<view_code>-por ejemplo, PRMO_OAP_INST-Alma.

6. Según sea necesario, personalice los ficheros de configuración y las carpetas asociadas a la página de destino, imágenes y CSS. Debe conservar la estructura y los nombres de los ficheros que está reemplazando. Para más información, consulte el resto de las secciones de este documento.

7. Comprima la carpeta <View_Code>.

   Se recomienda a los usuarios de Windows que utilicen una herramienta de compresión como 7zip o Winrar en lugar de Windows Enviar a > Comprimir carpeta para evitar errores de carga.

    

   Los usuarios de Mac deben usar el siguiente procedimiento para comprimir y extraer cualquier fichero .DS_Store oculto:

   1. Abra la aplicación Terminal en Aplicaciones > Herramientas.

   2. Muévase al directorio primario de la carpeta que desea comprimir. Por ejemplo:
      cd /Users/<nombre de usuario>/<carpeta primaria>

   3. Introduzca el siguiente comando para comprimir el fichero:
      zip –r <target file>.zip <My_View> - x "*.DS_Store"

8. Especifique el nombre del paquete comprimido y cliquee Cargar en la sección Cargar paquete.

9. Seleccione Guardar para aplicar los cambios.

10. Actualice su vista en el navegador web y pruebe sus cambios antes de cargarlos en el servidor de producción.

Personalizar la página de destino

La página de destino es el punto de entrada para el descubrimiento de la biblioteca y suele incluir un cuadro de búsqueda vacío.

Se anima a las instituciones a añadir o personalizar los siguientes elementos de la página:

• Enlaces de acceso rápido, como los horarios de las bibliotecas

• Mensaje de bienvenida y consejos de búsqueda

• La imagen de fondo de la Página de destino

  Para obtener información sobre la superposición de color aplicada a la imagen de forma predeterminada, consulte Desactivar la superposición de la imagen de fondo a continuación.

• El texto del banner (consulte Modificación del banner a continuación)

En la actualidad, la personalización del contenido y los estilos de la página de inicio debe realizarse utilizando el paquete de personalización, como se explica en Personalización del contenido y los estilos de la página de inicio a continuación. En la hoja de ruta de 2026, como parte de una mejora de CERV, se añadirán opciones de configuración que permitirán modificar el anuncio, los enlaces rápidos y el mensaje de bienvenida directamente en Alma, de modo que solo será necesario utilizar el paquete de personalización para implementar modificaciones de mayor alcance.

Añadir encabezados y pies de página

Los encabezados y pies de página son áreas situadas en la parte superior e inferior de la interfaz de usuario de la NDE. Puede mostrar información común en todas las páginas de la interfaz de usuario en estas áreas si las añade a los siguientes ficheros de su paquete de personalización: header.html y footer.html. Si admite idiomas distintos del inglés, utilice el siguiente formato para incluir el código de dos dígitos del idioma en el nombre del fichero: header_<language_code>.html y footer_<language_code>.html.

Por ejemplo, añada el siguiente código al fichero footer.html para mostrar enlaces a la política de privacidad, la declaración de accesibilidad y las condiciones de uso de su institución:

Cuando se implementa, el pie de página aparece en la parte inferior de la interfaz de usuario:

Personalizar un esquema de colores

Si ha seleccionado uno de nuestros esquemas de colores listos para usar, pero necesita pequeños cambios para adaptarlo a su marca, puede modificar variables específicas (como --sys-primary) con su paquete de personalización.

1. Determine qué atributo desea modificar. Para ver una lista de los atributos utilizados actualmente, consulte el fichero fuente nde-color-theme-*.css utilizando las Herramientas de desarrollo del navegador (F12). 

   

   Inspeccionar variables de color en el navegador

2. Edite la variable en el fichero custom.css de su paquete de personalización. Por ejemplo:

   :root {
     --sys-primary: #b51a57;  
   }

3. Comprima y cargue su paquete de personalización. Para obtener más información, consulte Crear e implementar un paquete de personalización, más arriba.

Personalizar ficheros de imagen

La carpeta de imágenes contiene las imágenes utilizadas para personalizar el logotipo de la biblioteca y las miniaturas de los tipos de recursos. Para añadir los ficheros de imágenes, utilice el formato PNG y asegúrese de respetar las pautas y los siguientes formatos de denominación:

• library-logo.png - Cuando se añade a la carpeta de imágenes, anula la imagen predeterminada para el logotipo de la biblioteca que aparece en el menú principal:

  

  Logotipo de la biblioteca en la interfaz de usuario de la NDE

• icon_<resource_type_code>.png - Cuando se añade a la carpeta de imágenes, anula la miniatura predeterminada de un recurso si no hay portada para la imagen. Por ejemplo: icon_audio.png.

Personalizar iconos

La carpeta de iconos contiene los iconos utilizados para personalizar el favicon y varios iconos utilizados en la interfaz de usuario de la NDE (como el icono de búsqueda ). Para personalizar los iconos, utilice el formato SVG y los siguientes ficheros:

• favicon.ico - Cuando se añade a la carpeta de iconos, anula el favicon por defecto de la vista. 

  

  Favicon en la pestaña de la interfaz de usuario de la NDE

•  custom_icons.svg - Añadir los iconos (basados en el ID del icono por defecto) a este fichero usando el formato SVG. Puede añadir tantos iconos como necesite utilizando el elemento <symbol> para cada uno.

  

  Icono de búsqueda en la interfaz de usuario de la NDE (Próxima experiencia de descubrimiento)

  Para determinar el ID de un icono, utilice las Herramientas de desarrollo del navegador para inspeccionar el icono que desea personalizar. Tras seleccionar la opción Inspeccionar elemento y el icono, el ID del icono aparece en el campo data-mat-icon-name:

  

  Inspeccionar el icono para la identificación

  Por ejemplo, el fichero custom_icons.svg puede aparecer de la siguiente manera con un solo icono:

  <?xml version="1.0" encoding="UTF-8"?>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">

    <symbol id="Search" height="24px" viewBox="0 -960 960 960" width="24px" fill="">

      <path d="M440-240q116 0 198-81.5T720-520q0-116-82-198t-198-82q-117 0-198.5 82T160-520q0 117 81.5 198.5T440-240Zm0-280Zm0 160q-83 0-147.5-44.5T200-520q28-70 92.5-115T440-680q82 0 146.5 45T680-520q-29 71-93.5 115.5T440-360Zm0-60q55 0 101-26.5t72-73.5q-26-46-72-73t-101-27q-56 0-102 27t-72 73q26 47 72 73.5T440-420Zm0-40q25 0 42.5-17t17.5-43q0-25-17.5-42.5T440-580q-26 0-43 17.5T380-520q0 26 17 43t43 17Zm0 300q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T80-520q0-74 28.5-139.5t77-114.5q48.5-49 114-77.5T440-880q74 0 139.5 28.5T694-774q49 49 77.5 114.5T800-520q0 64-21 121t-58 104l159 159-57 56-159-158q-47 37-104 57.5T440-160Z"/>

    </symbol>

  </svg>

  Fichero Example of custom_icons.svg

Añadir HTML personalizado y otros ficheros

Además, puede añadir sus propios ficheros HTML y, de hecho, la mayoría de los demás tipos de ficheros estáticos (excluidos los ficheros relacionados con bases de datos), a su paquete de personalización. Esto le permite alojar recursos adicionales como páginas de ayuda, contenido instructivo o componentes reutilizables, todos accesibles con un enlace directo sin alterar el comportamiento básico del sistema. 

Una vez añadidos los ficheros al paquete, se puede hacer referencia a ellos utilizando la siguiente estructura de URL:

Ejemplo:

1. Descargue el paquete de personalización para su vista de NDE.

2. Descomprima el paquete.

3. Añada sus ficheros personalizados a la carpeta Activos.

4. Comprima el paquete.

5. Cargue el paquete al servidor.

Para obtener información más detallada, consulte Crear e implementar un paquete de personalización.

Pautas para logotipos y miniaturas

Con el marco de personalización de la NDE, puede personalizar la interfaz de usuario de su institución según sus necesidades sustituyendo el logotipo y las miniaturas de los tipos de recursos. Descargue la plantilla y añada su logotipo y miniaturas personalizadas a una carpeta de imágenes específica.

Siga estas pautas para garantizar un despliegue óptimo y evitar la distorsión de las imágenes:

• Formato de fichero: debe ser PNG (con sufijo .png).

• Dimensiones máximas:

  • Altura: hasta 100 px.

  • Ancho: hasta 300 px.

• Tamaño del fichero: no más de 30 KB.

• Relación de aspecto: mantenga la relación de aspecto original para evitar distorsiones.

Siga estas directrices para garantizar un despliegue óptimo y evitar la distorsión de las miniaturas de tipo recurso:

• Ancho: fijo en 68 px.

• Altura: se ajusta según las proporciones, con alineación hacia arriba.

• Color del trazo del borde: #DFDFDF (se aplica a todas las miniaturas e imágenes de marcador de posición, especialmente para fondos blancos).

• Radio de esquina: 2 px tanto para miniaturas como para marcadores de posición.

Siga estas pautas para garantizar un despliegue óptimo y evitar la distorsión de miniaturas de recomendación de BX (escritorio y móvil)

• Ancho: fijo en 34 px.

• Altura: se ajusta según las proporciones, con alineación hacia arriba.

• Color del trazo del borde: #DFDFDF (se aplica a todas las miniaturas e imágenes de marcador de posición, especialmente para fondos blancos).

• Radio de esquina: 2 px tanto para miniaturas como para marcadores de posición.