Criar um Tema

Pode criar um novo tema copiando um tema existente e efetuando as alterações na cópia. Também pode importar e utilizar conteúdo do Bootstrap num novo tema.

Nota:

Quer esteja a criar um novo tema ou a efetuar alterações a um tema existente, faça sempre uma cópia do tema e trabalhe na cópia. Teste-o com um site de exemplo ou uma cópia do seu site real para garantir que funciona corretamente. Tenha em atenção que as alterações efetuadas num tema existente serão implementadas em quaisquer sites que utilizem o tema imediatamente após a publicação do tema revisto.

Copiar um Tema

  1. Na página principal, clique em Programador.

    É apresentada a página Programador.

  2. Clique em Visualizar Todos os Temas.

    É apresentada uma lista dos temas existentes. Pode controlar de que forma os temas são apresentados clicando no ícone de vista e selecionando uma opção da lista.

  3. Selecione um tema e escolha Copiar no menu do botão direito do rato ou clique em ícone Copiar na barra de ações.

    Todas as pastas e ficheiros do tema são copiados, incluindo quaisquer páginas e conteúdo de exemplo.

    Nota:

    Quando copia um tema, as informações de partilha do tema não são copiadas.
  4. Introduza um nome para o tema copiado. Não pode utilizar um nome usado por outro tema.

    Pode utilizar letras, números, caracteres de sublinhado (_) e hífenes (-) no nome. Se introduzir um espaço, este é substituído automaticamente por um hífen.

    Não utilize os seguintes nomes para modelos, temas, componentes, sites ou páginas de site: authsite, conteúdo, páginas, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Embora possa utilizar os seguintes nomes para as páginas de site, não os utilize para modelos, temas, componentes ou sites: documentos, sites.

  5. Opcionalmente, introduza a descrição do tema.

  6. Clique em Copiar.

    Uma barra de progresso mostra o nome do novo tema e o estado da cópia. Uma vez terminada a cópia do tema, o nome é apresentado na lista de temas. Pode explorar as pastas e os ficheiros que compõem o tema ao clicar no nome do tema na lista dos mesmos.

  7. Utilize a aplicação do ambiente de trabalho do Oracle Content Management para sincronizar as pastas e os ficheiros do tema com o seu sistema local. Isto permite-lhe percorrer as pastas locais e trabalhar diretamente com os ficheiros. As alterações que efetuar no tema são sincronizadas automaticamente. Pode efetuar alterações utilizando as suas ferramentas de edição de texto, código ou HTML favoritas.

Definir se os Estilos Customizados Podem Ser Utilizados num Site

Um administrador do tema pode especificar os estilos fornecidos com um tema ou customizar os estilos.

Uma definição num ficheiro components.json de um tema especifica se o estilo customizado pode ser efetuado no Criador de Sites. Isto serve para controlar que um contribuidor do site mantém o estilo do site ao criá-lo e que não utiliza, por exemplo, outros tipos de letra e cores.

Para não permitir a utilização de estilos customizados num site:

  1. Oculte a opção Customizar no painel Definições para os componentes.

    No ficheiro components.json do tema, acrescente o objeto seguinte juntamente com outras definições de componentes:

    [
        {
            "showStyleClassOnly": "true"
        }
    ]
  2. Customize os grupos e os botões da barra de ferramentas do CKEditor para retirar o estilo customizado:

    No ficheiro components.json do tema, pode especificar as propriedades toolbarGroups e removeButtons do CKEditor para customizar os grupos e os botões nos grupos para os componentes Title e Paragraph.

    Por exemplo, acrescente os objetos seguintes juntamente com outras definições de componentes para retirar estilos, tipos de letra e cores do 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"
                    }
                }
            ]
        }
    ]
  3. Impeça a colagem de estilos no CKEditor.

    A colagem segue os estilos e os botões configurados. No exemplo anterior, Font é retirado dos dados colados.

Não permitir estilos customizados tem os seguintes efeitos:
  • Em todos os componentes integrados, o separador Estilo oculta a opção (o) Customizar.
  • No CKEditor, os botões da barra de ferramentas para definir os estilos estão ocultos e a especificação da família de tipos de letra, cor do tipo de letra, etc., é substituída.
  • Também no CKEditor, não deverá ser possível definir um estilo com texto colado. O negrito ou o itálico são permitidos.

Ocultar Componentes e Disposições de Secção para um Tema

Pode ocultar componentes e disposições de secções para impedir o programador do site de os utilizar editando o ficheiro component.json de um tema. Poderá fazer este procedimento para promover um aspeto consistente. Consulte Ocultar Componentes e Disposições de Secção para um Tema.

Verificar o Tema com um Site

Quando acabar de editar o tema, é necessário verificar se todos os elementos funcionam em conjunto com o site, conforme planeado.

  1. Certifique-se de que sincronizou as suas pastas e os seus ficheiros copiados com a aplicação do ambiente de trabalho do Oracle Content Management e de que todas as modificações foram gravadas.

  2. Abra um site (pode ser um site de teste ou um site offline existente) no Criador de Sites e mude o site para utilizar o novo tema.

  3. Teste o site com o tema acrescentando páginas e utilizando definições, visualizando imagens, verificando a navegação e tudo o resto que alterou no novo tema.

  4. Verifique se tudo é renderizado corretamente, incluindo todos os ficheiros e ligações.

  5. Publique o tema para que o site implemente as alterações do tema e, em seguida, verifique-o num ambiente de runtime.

Consulte Publicar Temas.

Utilizar um Tema do Bootstrap

As semelhanças entre os temas do Oracle Content Management e os temas do Bootstrap tornam possível converter as páginas e o conteúdo do tema do Bootstrap existentes para utilização num tema do Oracle Content Management.

O Bootstrap é uma coleção de ferramentas livre e de código-fonte aberto para criar sites e aplicações da Web. Contém modelos de design baseados em HTML e CSS para componentes da interface e extensões JavaScript.

Segue as mesmas instruções para criar um tema, mas vai trabalhar com código (utilizando um editor à sua escolha) para importar e editar as páginas ou o conteúdo pretendido do tema do Bootstrap.

É improvável que precise de utilizar a totalidade de um tema do Bootstrap, com todas as respetivas páginas e conteúdo. Normalmente, irá selecionar partes do tema para utilizar num tema do Oracle Content Management, talvez apenas alguns modelos de páginas e apenas partes dos mesmos. Por exemplo, um tema do Bootstrap contém vários blocos nos modelos, incluindo um cabeçalho, um bloco de navegação, um bloco de corpo e um bloco de rodapé. Como os temas do Bootstrap são fornecidos como uma coleção de ficheiros que é possível visualizar diretamente a partir do sistema de ficheiros (sem um servidor da Web), contêm muita duplicação em cada página (o que é necessário visto não existir nenhum mecanismo de junção de páginas envolvido). Quando utiliza estas informações num tema do Oracle Content Management, necessita de obter estas partes e acrescentá-las a modelos de páginas reutilizáveis do Oracle Content Management e, em seguida, utilizar o Oracle Content Management para juntar dinamicamente várias páginas desses modelos.

Um exemplo da adição de informações a modelos reutilizáveis é a secção de navegação. Num tema típico do Bootstrap, a navegação é duplicada em todas as páginas, mas ao passar para um tema do Oracle Content Management, deve utilizar o código JavaScript para percorrer dinamicamente a hierarquia do site e gerar as estruturas de navegação. Depois, basta incluir esse script em todas as páginas para que todas elas obtenham a navegação. Essa navegação é adaptada conforme são acrescentadas ou retiradas páginas do site.

Consulte Criar um Modelo de Site a partir do Bootstrap ou de um Modelo de Design de Sites.