Ir para o conteúdo

Carregador CSS no Jitterbit App Builder

O App Builder vem com um widget Carregador CSS que pode ser usado para substituir estilos CSS no nível do site, em vez de defini-los manualmente por meio de um tema ou no nível de um aplicativo individual. Para usar o Carregador CSS, baixe uma cópia do Carregador CSS, edite styles.css conforme necessário e adicione-o a um widget CSS recém-criado.

Nota

Ao editar styles.css, você deverá remover ou editar as linhas de exemplo CSS existentes, caso contrário, elas aparecerão quando você ativar o CSS Loader.

Como configurar

Etapa 1: personalize o css

  1. Navegue até IDE > Aparência
  2. Selecione a coleção App Builder no painel Coleções. Se não estiver disponível, clique em Ver tudo.
  3. Clique na aba Widgets
  4. Localize o widget CSS Loader e clique no ícone Abrir registro
  5. Clique no arquivo Widget Path Content para baixar o conteúdo .ZIP do widget

  6. Abra o arquivo .ZIP em um programa editor de código e faça todas as alterações de personalização necessárias em styles.css

    estilos.png

    arquivo styles.css conforme visualizado pelo editor do App Builder. Certifique-se de remover ou editar esses exemplos, ou eles aparecerão quando ativados.

  7. Selecione uma nova Coleção para adicionar o conteúdo modificado do CSS Loader. Observe que esta não pode ser a Coleção do App Builder ou da IDE do App Builder.

  8. Clique em Carregar widget
  9. Confirme a Coleção em que o widget será armazenado
  10. Clique no botão Navegar e localize o conteúdo .ZIP do widget CSS modificado
  11. Clique em Salvar
  12. Atribua um Nome ao widget CSS. Por exemplo: Widget CSS
  13. Revise Objetivo e defina como Campo ou Local, conforme necessário

Etapa 2: Configurar no nível do site (ou seguir a etapa 3)

  1. Navegue até IDE > Configurações Adicionais > Widgets do Site
  2. Clique em + Registro de Widget
  3. Selecione Widget CSS como o Widget
  4. Clique na marca de seleção para salvar
  5. Confirme se a coluna Ativo está marcada/Ligada

Etapa 3: Configurar no nível do aplicativo

  1. Navegue até IDE > Aparência
  2. Selecione a Coleção onde você salvou o widget CSS Loader de cópia, clique na aba Widgets
  3. Localize o CSS Widget, clique no ícone Abrir registro
  4. Defina o valor Objetivo como Site
  5. Clique no botão Salvar
  6. Navegue até IDE > Configurações adicionais > Widgets do site
  7. Clique em + Registro de widget
  8. Selecione CSS Widget no menu suspenso Widget
  9. Clique no ícone marca de seleção para ativar o widget CSS
  10. Navegue de volta para o seu aplicativo, atualize seu navegador e confirme as atualizações