Crear un tema

Puede crear un nuevo tema copiando un tema existente y realizando cambios a la copia. También puede importar y utilizar contenido de Bootstrap en un nuevo tema.

Nota:

Tanto si está creando un nuevo tema como realizando actualizaciones en un tema existente, realice siempre una copia del tema y trabaje en la copia. Pruébelo con un sitio de ejemplo o una copia del sitio real para asegurarse de que funciona correctamente. Tenga en cuenta que los cambios realizados en un tema existente se implantarán en todos los sitios que utilicen el tema inmediatamente después de la publicación del tema revisado.

Copia de un tema

En la página inicial, haga clic en Desarrollador.

Se abrirá la página Desarrollador.
Haga clic en Ver todos los temas.

Se muestra una lista de temas. Puede controlar cómo se muestran los temas haciendo clic en el icono de vista y seleccionando una opción en la lista.
Seleccione un tema y elija Copiar en el menú contextual o haga clic en en la barra de acciones.

Se copiarán todas las carpetas y los archivos del tema, incluidas las páginas de ejemplo y el contenido.

Nota:
Al copiar un tema, no se copia la información de uso compartido del tema.
Introduzca un nombre para el tema copiado. No puede usar un nombre que ya esté utilizando otro tema.

Puede utilizar letras, números, caracteres de subrayado (_) y guiones (-) en el nombre. Si introduce un espacio, se reemplaza automáticamente por un guion.

No utilice los siguientes nombres para plantillas, temas, componentes, sitios ni páginas de sitios: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Aunque puede utilizar los siguientes nombres para las páginas del sitio, no los utilice para plantillas, temas, componentes ni sitios: documents, sites.
Opcionalmente, introduzca una descripción para el tema.
Haga clic en Copiar.

Una barra de progreso muestra el nombre del tema y el estado de copia. Cuando se copia el tema, el nombre aparece en la lista de temas. Puede examinar las carpetas y los archivos de los que consta el tema haciendo clic en el nombre del tema en la lista de temas.
Utilice la aplicación de escritorio de Oracle Content Management para sincronizar las carpetas y los archivos del tema con el sistema local. Esto le permitirá explorar las carpetas locales y trabajar directamente con los archivos. Los cambios que realice en el tema se sincronizarán automáticamente. Puede realizar cambios utilizando su HTML, código o herramientas de edición de texto favoritos.

Definir los estilos personalizados que se pueden usar en un sitio

El administrador de un tema puede especificar los estilos que vienen con un tema o personalizarlos.

Una opción en un archivo components.json de un tema especifica si se puede definir el estilo personalizado en el creador de sitios. Esto permite controlar que el contribuyente de un sitio se mantenga dentro del estilo del sitio al crearlo y no utilice, por ejemplo, otras fuentes y colores.

Para no permitir el uso de estilos personalizados en un sitio:

Oculte la opción Personalizar del panel Configuración para los componentes.
En el archivo components.json del tema, agregue el siguiente objeto junto con otras definiciones de componente:
```
[
    {
        "showStyleClassOnly": "true"
    }
]
```

Personalice grupos de barra de herramientas y botones de CKEditor para eliminar la aplicación de estilos personalizados:

En el archivo components.json del tema, puede especificar as propiedades toolbarGroups y removeButtons de CKEditor para personalizar los grupos y los botones en los grupos para los componentes Title y Paragraph.

Por ejemplo, agregue los siguientes objetos junto con otras definiciones de componentes para eliminar los estilos, la fuente y los colores del grupo Styles:

[
    {
        "name": "",
        "list": [
            {
                "type": "scs-title",
                "id": "scs-title",
                "config": {
                    "toolbarGroups": [
                        {
                            "name": "basicstyles",
                            "groups": ["basicstyles"]
                        },
                        {
                            "name": "styles",
                            "groups": ["styles"]
                        },
                        {
                            "name": "colors",
                            "groups": ["colors"]
                        },
                        "/",
                        {
                            "name": "undo",
                            "groups": ["undo"]
                        },
                        {
                            "name": "links",
                            "groups": ["links"]
                        },
                        {
                            "name": "paragraph",
                            "groups": ["list", "indent"]
                        },
                        {
                            "name": "align",
                            "groups": ["align"]
                        },
                        {
                            "name": "cleanup",
                            "groups": ["cleanup"]
                        }
                    ],
                    "removeButtons": "Styles,Subscript,Superscript,Strike,Anchor,Blockquote,Link,Unlink,Font,TextColor,BGColor"
                }
            },
            {
                "type": "scs-paragraph",
                "id": "scs-paragraph",
                "config": {
                    "toolbarGroups": [
                        {
                            "name": "basicstyles",
                            "groups": ["basicstyles"]
                        },
                        {
                            "name": "styles",
                            "groups": ["styles"]
                        },
                        {
                            "name": "colors",
                            "groups": ["colors"]
                        },
                        "/",
                        {
                            "name": "undo",
                            "groups": ["undo"]
                        },
                        {
                            "name": "links",
                            "groups": ["links"]
                        },
                        {
                            "name": "paragraph",
                            "groups": ["list", "indent"]
                        },
                        {
                            "name": "align",
                            "groups": ["align"]
                        },
                        {
                            "name": "insert",
                            "groups": ["image", "table"]
                        },
                        {
                            "name": "cleanup",
                            "groups": ["cleanup"]
                        }
                    ],
                    "removeButtons": "Styles,Subscript,Superscript,Strike,Anchor,Blockquote,Link,Unlink,Font,TextColor,BGColor"
                }
            }
        ]
    }
]

Evite que se pegue el estilo en CKEditor.
El pegado sigue los estilos y los botones configurados. Con el ejemplo anterior, se elimina Font de los datos pegados.

No permitir estilos personalizados tiene los siguientes efectos:

En todos los componentes incorporados, el separador style oculta la opción (o) Personalizar.
En CKEditor, los botones de la barra de herramientas para definir estilos están ocultos y se sustituyen las especificaciones de familia de fuentes, color de fuente, etc.
En CKEditor, tampoco sería posible definir un estilo con texto pegado. Estarían permitidas la negrita y la cursiva.

Ocultar diseños de sección y componentes de un tema

Puede ocultar diseños de sección y componentes para evitar que los utilice un desarrollador del sitio. Para ello, debe editar el archivo component.json del tema. Puede que desee hacerlo para conseguir un aspecto consistente. Consulte Ocultar diseños de sección y componentes de un tema.

Verificación del tema con un sitio

Una vez que haya completado la edición del tema, debe comprobar que todas las partes funcionan de forma conjunta con el sitio como estaba previsto.

Asegúrese de que ha sincronizado las carpetas y los archivos copiados con la aplicación de escritorio de Oracle Content Management y de que se hayan guardado todas las modificaciones.
Abra un sitio (puede ser un sitio de prueba o un sitio existente fuera de línea) en el creador de sitios y realice el cambio en el sitio para que se utilice el nuevo tema.
Pruebe el sitio con el tema agregando páginas y utilizando valores, visualizando imágenes, comprobando la navegación y todo aquello que haya cambiado en el nuevo tema.
Compruebe que todo se representa correctamente, incluidos los archivos y los enlaces.
Publique el tema para que el sitio implante los cambios del tema y, a continuación, compruébelo en un entorno de tiempo de ejecución.

Consulte Publicación de temas.

Uso de un tema de Bootstrap

Las similitudes entre los temas de Oracle Content Management y los temas de Bootstrap hacen posible convertir las páginas y el contenido existentes de Bootstrap para utilizarlos en un tema de Oracle Content Management.

Bootstrap es una recopilación de herramientas gratuitas de código abierto para la creación de sitios web y aplicaciones web. Contiene plantillas de diseño basadas en HTML y en CSS para componentes de interfaz y extensiones JavaScript.

Deberá seguir las mismas instrucciones para crear un tema, pero trabajará con código (utilizando el editor que desee) para importar y editar cualquier página o contenido que desee del tema de Bootstrap.

Es improbable que utilice todo un tema de Bootstrap completo con todas sus páginas y contenido. Normalmente, seleccionará las partes del tema que va a utilizar en un tema de Oracle Content Management. Es probable que solo use unas pocas plantillas de página y solo algunas partes de estas. Por ejemplo, un tema de Bootstrap contiene varios bloques en las plantillas, incluyendo una cabecera, un bloque de navegación, un bloque de cuerpo y un bloque de pie de página. Debido al modo en el que se envían los temas de Bootstrap como una recopilación de archivos que se pueden ver directamente desde el sistema de archivos (sin un servidor web), estos contienen numerosas duplicaciones en cada página (las deben tener porque no hay ningún motor de ensamblaje de páginas involucrado). Al utilizar esta información en un tema de Oracle Content Management, debe tomar estas partes y agregarlas a las plantillas de página reutilizables de Oracle Content Management, y utilizar a continuación Oracle Content Management para ensamblar dinámicamente varias páginas de dichas plantillas.

La sección de navegación incluye un ejemplo de adición de información a plantillas reutilizables. La navegación en un tema de Bootstrap típico se duplica en todas las páginas, pero cuando la mueve a un tema de Oracle Content Management, debe utilizar el código JavaScript para recorrer dinámicamente la jerarquía del sitio y generar las estructuras de navegación. A continuación, solo tiene que incluir ese script en todas las páginas para que todas obtengan la navegación y esa navegación se adapta a medida que se agregan o eliminan páginas en el sitio.

Consulte Creación de una plantilla de sitio a partir de Bootstrap o de una plantilla de diseño de sitio web.