Ir para o conteúdo

Carregador CSS

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

Nota

Ao editar styles.css, você vai querer remover ou editar as linhas de exemplo CSS existentes ou elas aparecerão quando você ativar o CSS Loader

Como Configurar

Etapa 1: Personalize o Css

  1. Navegue até IDE > Look and Feel
  2. Selecione App Builder Coleção do painel Collections. Se não estiver disponível, clique em View All.
  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 por App Builder do editor. 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 este não pode ser o App Builder ou App Builder coleções IDE.

  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 para o Widget CSS. Por exemplo: Widget CSS
  13. Revise Propósito e defina como Campo ou Site, 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 o 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 e comportamento
  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 Propósito 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 seu aplicativo, atualize seu navegador da web e confirme as atualizações