Personalización de estilos para los espacios de Heritage Process Portal

Después de crear una copia de un estilo existente, puede personalizar la copia especificando detalles como, por ejemplo, nombre, ubicación e imagen de vista previa.

1. Abra la copia local renombrada del archivo JavaScript que ha copiado y renombrado.
   Por ejemplo, si ha copiado una carpeta de estilo llamada banking, el archivo banking.js correspondiente podría tener un aspecto parecido al siguiente script de ejemplo.

   { 
   "cp1": "Materiales con licencia - Propiedad de IBM",
   "cp2": "5724-M22, 5724-M23, 5724-M24, 5724-L01, 5724-R31",
   "cp3": "(C) Copyright IBM Corporation 2009. Reservados todos los derechos.",
   "cp4": "Derechos restringidos de los usuarios del Gobierno de EE.UU. - El uso, duplicación o revelación"
   "cp5": "están restringidos por el GSA ADP Schedule Contract con IBM Corp.",
   
   "id": "banking",
   "name": "Banking",
   "preview": "banking/Banking_thumb_202x152.png",
   "className": "bankingStyle",
   "css": "banking/bankingStyle.css"
   }

   Importante: Las líneas desde cp1 hasta cp5 son información de copyright y no se deben cambiar.
2. En el archivo JavaScript local, cambie el valor del campo id por un nombre exclusivo como, por ejemplo, custom.
3. Cambie el valor del campo name por el nombre que desea que vean los usuarios en los recuadros de diálogo Crear espacio y Editar espacio. En este ejemplo, el valor de name es custom.
4. Cambie el valor del campo preview por la vía de acceso de la imagen de vista previa que desea que vean los usuarios en el control de selector Estilo de espacio. Las dimensiones de la imagen de vista previa deben ser de 202 X 152 píxeles para que coincidan con las demás imágenes de vista previa. Puesto que el archivo JavaScript está en el mismo nivel de jerarquía que la carpeta que ha copiado y renombrado, debe modificar la vía de acceso para hacer referencia a la carpeta correcta, por ejemplo, custom/Custom_thumb_202x152.png.
5. Coloque la imagen de vista previa en la carpeta custom local. A continuación, puede eliminar la imagen de vista previa existente.
6. Cambie el valor del campo className. El nombre de clase CSS modifica el estilo de determinados elementos de interfaz únicamente dentro de este estilo y deja sin modificar los espacios asignados a un estilo diferente. Por convenio, el nombre de clase CSS que está asociado a un estilo es el nombre del estilo seguido por la palabra "Style". En este ejemplo se utiliza customStyle.
7. Cambie el valor del campo css por el nombre de archivo CSS que se va a utilizar para controlar el aspecto de este estilo. Puesto que la vía de acceso es relativa a la ubicación del archivo JavaScript, renombre la vía de acceso para que apunte a la carpeta custom. Además, el nombre del archivo CSS debe coincidir con la variable className. Por ejemplo, defina css a custom/customStyle.css. El archivo JavaScript modificado debe ser similar al siguiente script.

   { 
   "cp1": "Materiales con licencia - Propiedad de IBM",
   "cp2": "5724-M22, 5724-M23, 5724-M24, 5724-L01, 5724-R31",
   "cp3": "(C) Copyright IBM Corporation 2009. Reservados todos los derechos.",
   "cp4": "Derechos restringidos de los usuarios del Gobierno de EE.UU. - El uso, duplicación o revelación"
   "cp5": "están restringidos por el GSA ADP Schedule Contract con IBM Corp.",
   
   "id": "custom",
   "name": "Custom",
   "preview": "custom/Custom_thumb_202x152.png",
   "className": "customStyle",
   "css": "custom/customStyle.css"
   }

8. Cambie el nombre del archivo .css. Por ejemplo, en la carpeta custom, cambie el nombre de bankingStyle.css para que coincida con el nombre especificado en el archivo JavaScript, customStyle.css.
9. Utilice el editor de texto para buscar todas las instancias de bankingStyle y sustituirlas por customStyle. Este cambio garantiza que todas las reglas existentes se aplican sólo al nuevo estilo custom.
   Importante: El archivo customStyle.css renombrado siguen conteniendo el className del estilo original, en este ejemplo bankingStyle. Utilice el editor de texto para buscar todas las instancias de bankingStyle en el archivo CSS y sustituirlas por customStyle. Este cambio garantiza que todas las reglas existentes se aplican sólo al nuevo estilo personalizado.
10. Opcional: Proporcione traducciones para el nombre del estilo.

    La carpeta webDAV_folder\public\themes\bspaceTheme\spaceStyles\nls contiene los archivos de recursos traducidos proporcionados con los espacios de Heritage Process Portal. El archivo de recursos en la raíz de este directorio, styleResources.js, se utiliza para entornos locales en inglés. Las versiones traducidas de este archivo de recursos se encuentran en directorios aparte que corresponden a cada entorno local soportado.

    1. Cree su propio archivo para sus recursos de estilo, por ejemplo, customStyleResources.js. Este archivo contiene una entrada para cada estilo; el formato de las entradas es: "ID estilo": "nombre de visualización". El ejemplo siguiente muestra una entrada para un estilo llamado "custom" y un nombre de visualización "Custom":

       {
       "custom" ; "Custom" 
       }

    2. Copie el archivo de recursos del estilo en la carpeta webDAV_folder\public\themes\bspaceTheme\spaceStyles\nls. Este archivo se utiliza para el entorno local inglés, que también es el entorno local predeterminado.
    3. Para cada idioma que desee soportar, abra la carpeta del entorno local correspondiente y añada una entrada para el estilo. Por ejemplo, si desea mostrar el nombre de estilo en alemán para los usuarios de un entorno local alemán, abra la carpeta de y añada una entrada como la siguiente:

       "custom": "serie_en_alemán"

       donde serie_en_alemán es el nombre de estilo traducido.
    4. Repita el paso anterior para cualquier idioma adicional que desee soportar. Si no se proporcionan traducciones para un entorno local, adopta el nombre en inglés como valor predeterminado.
    5. Cuando hay recursos traducidos, modifique el archivo JavaScript para el estilo personalizado, por ejemplo, customStyle.js, para hacer referencia al nuevo archivo de recursos de estilo:

       {
       "id": "custom",
       "name": "Custom",
       "preview": "custom/Custom_thumb_202x152.png",
       "className": "customStyle",
       "css": "custom/customStyle.css",
       "resourceFile": "customStyleResources"
       }

       Puede utilizar el mismo archivo de recursos para varios estilos de espacio incluyendo una entrada para cada estilo de espacio, separadas por comas. Para ver un ejemplo de un archivo de recursos que incluye recursos para varios estilos de espacio, consulte el archivo styleResources.js.

    6. Borre la memoria caché del navegador y edite las propiedades del espacio como prueba para asegurarse de que los recursos traducidos se visualizan correctamente. Cuando visualice las propiedades del espacio en distintos valores de entorno local, se deberá visualizar la etiqueta de estilo traducida correspondiente.