Com este código você vai poder trocar a cor que aparece assim que o botão é clicado. Aplique o código deste artigo seguindo as instruções abaixo para este efeito:

1 – Abra o Construtor de Apps

2 – Entre na sessão CORES.

3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA.

4 – Cole o código abaixo (exatamente como esta) no campo em branco.

Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.  

 

.button.button-custom:hover,.button.button-custom:active {

color: #fff;
background-color: #123456;

}  

 

Para mudar para uma cor desejada, altere o valor da cor de “123456” para o código da cor que desejar. Este código só tem efeito nos “Botões de Ação”. Por exemplo: Telefone, Link e E-mail.

 

5 – Salve.

6 – Verifique o resultado no simulador ao lado. Obs. Se caso não houver mudança imediata, por favor clique em F5 ou Ctrl+F5 para atualizar a página e verifique novamente. Se mesmo assim o efeito não estiver ocorrendo verifique o código novamente e salve.   Pronto. 😉  

20 de fevereiro de 2018

Alterar a cor de um botão ao ser clicado

Com este código você vai poder trocar a cor que aparece assim que o botão é clicado. Aplique o código deste artigo seguindo as instruções abaixo para este efeito: 1 – Abra o Construtor de Apps 2 – Entre na sessão CORES. 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.     .button.button-custom:hover,.button.button-custom:active { color: #fff; background-color: #123456; }     Para mudar para uma cor desejada, altere o valor da cor de “123456” para o código da cor que desejar. Este código só tem efeito nos “Botões de […]
13 de fevereiro de 2018

Inserir bordas com pontas arredondadas nos botões na homepage

Para as bordas dos botões (ícones) da página inicial (homepage) ficarem arredondados ou até mesmo redondas, aplique o código deste artigo seguindo as instruções abaixo: 1 – Abra o Construtor de Apps 2 – Entre na sessão CORES. 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.   .homepage-custom .border-custom { border-radius: 10%; }   Para mudar a intensidade da curva do raio é só mudar o valor de “10%;” para o valor que desejar, maior ou menor. Se desejar ser redondo deixe em “50%”. Este código pode ser aplicado […]
6 de fevereiro de 2018

CSS para inserir uma imagem personalizada de fundo em todos os recursos

Para inserir a imagem personalizada de fundo (inclusive que inclua o fundo do cabeçalho) de todos os recursos do seu aplicativo, aplique o código deste artigo seguindo as instruções abaixo: 1 – Abra o Construtor de Apps Importante: Vá na seção DESIGN, deixe desmarcado a caixa de seleção “Use a imagem da Homepage como plano de fundo em todos os recursos”.  Em seguida, vá na seção CORES e defina como “0” (zero) a opacidade do “GERAL – Plano de fundo” e CABEÇALHO – Plano de fundo e Borda (com exceção de Texto). 2 – Continue na sessão CORES. 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule […]
30 de janeiro de 2018

CSS para inserir uma imagem personalizada de fundo no cabeçalho dos recursos

Para inserir uma imagem personalizada de fundo no cabeçalho de todos os recursos do seu aplicativo, aplique o código deste artigo seguindo as instruções abaixo: 1 – Abra o Construtor de Apps 2 – Vá para a sessão CORES 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.   .bar.bar-custom { background-image: url(https://link-da-image); background-color: transparent; background-size: 100% 100%; }   Como criar uma imagem: a – Basta criar uma imagem de fundo no tamanho 640x128px. b – Hospedar esta imagem na Internet (em seu blog ou site) c – Cole […]
23 de janeiro de 2018

Ocultar os títulos de todos os recursos

Para ocultar os títulos de todas os recursos do seu aplicativo, aplique o código deste artigo seguindo as instruções abaixo: 1 – Abra o Construtor de Apps 2 – Vá para a sessão CORES 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.   .title.header-item { display: none; }   5 – Salve. 6 – Verifique o resultado no simulador ao lado. Obs. Se caso não houver mudança imediata, por favor clique em F5 ou Ctrl+F5 para atualizar a página e verifique novamente. Se mesmo assim o efeito não estiver […]
16 de janeiro de 2018

Redimensiona a galeria de imagens na Página Personalizada, Lugares e Inbox

Se você estiver adicionando 3 ou menos imagens no Recurso Página personalizada, Lugares ou Inbox e deseja diminuir os espaço que fica em branco, você deve aplicar o código deste artigo seguindo as instruções abaixo: 1 – Abra o Construtor de Apps 2 – Vá para a sessão CORES 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.   .item.item-image-gallery { height: inherit; }   5 – Salve. 6 – Verifique o resultado no simulador ao lado. Obs. Se caso não houver mudança imediata, por favor clique em F5 ou […]
9 de janeiro de 2018

CSS para mudar a fonte do seu aplicativo

Para personalizar a fonte do seu aplicativo, aplique o código deste artigo seguindo as instruções abaixo: 1 – Abra o Construtor de Apps 2 – Vá para a sessão CORES 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.   @import url('https://fonts.googleapis.com/css?family=Ewert'); .view { *{ font-family: 'Ewert'; } }   Para alterar a fonte para uma a sua escolha, você deverá mudar os valores da 1ª e 4ª linha do código CSS acima. Entre em “https://fonts.google.com/”, escolha sua fonte na biblioteca, selecione uma fonte clicando no simbolo de “+”, abra […]
3 de janeiro de 2018

CSS para alterar o tamanho da fonte na Home page

Para personalizar o tamanho da fonte na Home page do aplicativo, aplique o código deste artigo seguindo as instruções abaixo:   1 – Abra o Construtor de Apps 2 – Vá para a sessão CORES 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.   .layout { *{ font-size: 30px !important; } }   Para diminuir ou aumentar o tamanho do texto, basta alterar os valores dos pixels, que neste exemplo esta em 30px. Altere, salve e visualize para verificar o melhor tamanho para seu projeto.   5 – Salve. […]