Criar um Tema

Copiar um Tema

1. Na home page, clique em Desenvolvedor.

   A página Desenvolvedor é exibida.

2. Clique em Exibir Todos os Temas.

   Uma lista de temas existentes é exibida. Você pode controlar o modo de exibição dos temas, clicando no ícone de view e selecionando uma opção na lista.

3. Selecione um tema e escolha Copiar no menu acionado com o botão direito do mouse ou clique no na barra de ações.

   Todas as pastas e todos os arquivos do tema são copiados, inclusive qualquer página e conteúdo de amostra.

   Nota:

   Quando você copia um tema, as informações de compartilhamento do tema não são copiadas.

4. Digite um nome para o tema copiado. Você não pode usar o nome de outro tema.

   Você pode usar letras, números, hifens (-) e sublinhados (_) no nome. Se você inserir um espaço, ele será automaticamente substituído por um hífen.

   Não use os seguintes nomes para modelos, temas, componentes, sites ou páginas de sites: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Embora você possa usar os seguintes nomes para as páginas do site, não os use para modelos, temas, componentes ou sites: documents, sites.

5. Como opção, digite uma descrição para o tema.

6. Clique em Copiar.

   Uma barra de progresso mostra o nome do novo tema e o status da cópia. Quando o tema é copiado, o nome aparece na lista de temas. Você pode explorar as pastas e arquivos que compõem o tema, clicando no respectivo nome na lista de temas.

7. Use o aplicativo para desktop do Oracle Content Management para sincronizar as pastas e os arquivos do tema com seu sistema local. Isso permite que você procure as pastas locais e trabalhe diretamente com arquivos. As alterações feitas no tema são sincronizadas automaticamente. Você pode fazer alterações usando seu HTML, código ou ferramentas de edição de texto favoritos.

Definir Se Estilos Personalizados Podem Ser Usados em um Site

Um administrador de temas pode especificar estilos que acompanham um tema ou personalizar os estilos.

Uma definição no arquivo components.json de um tema especifica se é possível fazer estilização personalizada no SiteBuilder. Isso serve para controlar se um colaborador do site continua dentro do estilo do site ao criá-lo e não usa, por exemplo, outras fontes e cores.

Para não permitir o uso de estilos personalizados em um site:

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

   No arquivo components.json do tema, adicione o seguinte objeto com outras definições do componente:

   [
       {
           "showStyleClassOnly": "true"
       }
   ]

2. Personalize grupos e botões de barra de ferramentas do CKEditor para remover estilos personalizados:

   No arquivo components.json do tema, você pode especificar as propriedades toolbarGroups e removeButtons do CKEditor para personalizar grupos e botões dentro de grupos para os componentes Título e Parágrafo.

   Por exemplo, adicione os seguintes objetos com outras definições do componente para remover estilos, fontes e cores do grupo Estilos:

   [
       {
           "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. Evite que estilos sejam colados no CKEditor.

   A colagem segue os estilos e botões configurados. Com o exemplo anterior, Fonte é removida dos dados colados.

Ocultar Componentes e Layouts de Seção de um Tema

Você pode ocultar componentes e layouts de seção para impedir que um desenvolvedor de site os use editando o arquivo component.json de um tema. Você pode fazer isso para promover uma aparência consistente. Consulte Ocultar Componentes e Layouts de Seção de um Tema.

Verificar o Tema com um Site

Depois de concluir a edição do tema, verifique se todas as partes funcionam juntas com o site conforme planejado.

1. Certifique-se de ter sincronizado suas pastas e arquivos copiados com o aplicativo para desktop do Oracle Content Management e de que todas as modificações foram salvas.

2. Abra um site (pode ser um teste ou site off-line existente) no Site Builder e alterne o site para usar o novo tema.

3. Teste o site com o tema adicionando páginas e usando definições, exibindo imagens, verificando a navegação e tudo o mais que você alterou no novo tema.

4. Verifique se tudo é renderizado corretamente, inclusive todos os arquivos e links.

5. Publique o tema para que o site implemente as alterações e depois verifique-o em um ambiente de runtime.

Consulte Publique Temas.

Usar um Tema Bootstrap

As semelhanças entre os temas do Oracle Content Management e temas Bootstrap tornam possível converter páginas e conteúdo do tema Bootstrap existente para uso em um tema do Oracle Content Management.

Bootstrap é uma coleção de ferramentas grátis e de código-fonte aberto para a criação de sites e aplicativos web. Ele contém modelos de design baseados em HTML e CSS para componentes de interface e extensões JavaScript.

Você segue as mesmas instruções para criar um tema, mas trabalha com código (usando qualquer editor de sua escolha) para importar e editar qualquer página ou conteúdo desejado do tema Bootstrap.

É improvável que você use tudo do tema Bootstrap com tudo de suas páginas e conteúdo. Normalmente, você selecionará partes do tema para uso em um tema do Oracle Content Management, talvez apenas alguns modelos de página e apenas algumas partes deles. Por exemplo, um tema Bootstrap contém diversos blocos dentro dos modelos, inclusive um cabeçalho, um bloco de navegação, um bloco de corpo e um bloco de rodapé. Como esses temas Bootstrap são enviados como coleção de arquivos que podem ser exibidos diretamente do sistema de arquivos (sem um servidor web), eles são cheios de duplicação em cada página (e precisam ser porque não há mecanismo de montagem de página envolvido). Ao usar essas informações em um tema do Oracle Content Management, você precisa pegar essas partes e adicioná-las a modelos reutilizáveis de páginas do Oracle Content Management e, em seguida, usar o Oracle Content Management para montar dinamicamente diversas páginas usando esses modelos.

Um exemplo de adição de informações a modelos reutilizáveis seria a seção de navegação. A navegação em um tema Bootstrap típico é duplicada em todas as páginas, mas quando você move isso para um tema do Oracle Content Management, deve usar código JavaScript para percorrer dinamicamente a hierarquia do site e gerar as estruturas de navegação. Em seguida, basta incluir esse script em todas as páginas e todas obterão a navegação, e esta se adapta conforme páginas são adicionadas ou removidas do site.

Consulte Criar um Modelo de Site do Zero ou Usando um Modelo de Design de Website.