How to put transparency on elements like header, footer, buttom, inputs?


#1

Also, how do I put color in the texts?


#2

You can do that with CSS. Try:

<style type="text/css">
.your-class {
   opacity: 0.5;
   color: red; 
}
</style>

After that, add your-class to your target element.
<div class="your-class"></div>


#3

Pedro_Rocha

BR:
“opacity” não deixa transparente, ele vai “sumindo” com o objeto.
Veja essa imagem abaixo, com que tipo de background eu estou querendo tirar.

EN:
“Opacity” does not make it transparent, it goes “fading” with the object.
Look at this picture below, what kind of background I’m trying to get at.


#4

Are you trying to change the login and password input boxes to transparent? Sorry, it’s not clear in the image.
Você quer mudar o background da caixa onde tem os inputs de login e senha pra transparente? Desculpa, mas não ficou claro com a foto.

But if that’s the case, you can try ‘background-color: transparent;’ overriding everything that is white. Maybe you’ll need to remove the borders too, using 'border: none;'
Mas se for isso, você coloca background-color: transparent; em tudo que tá branco. Talvez precise remover as bordas depois também, com border: none;


#5

@Pedro_Rocha

Sim, é isto sim.
Eu consegui retirar dos ion-item, porém o ion-toolbar do footer ele não funciona.

page-login {
  ion-content {
    background-image: url('/assets/img/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  ion-img, ion-item, ion-label, ion-toolbar, button, h1 {
    background-color: transparent !important;
    text-shadow: 1px 1px 1px rgb(0,0,0);
  }


  .formItem {
    margin-top: -13%;
  }

  #imgLogo {
    width: 40%;
    position: relative;
    margin-top: 15%;
    margin-left: 30%;
  }
}


#6

I removed the white background of the items like this:
Eu removi o dos items com:

<ion-item class="bg-hidden">
  <ion-label color='primary' floating><ion-icon name='contact'></ion-icon>     Usuário</ion-label>
  <ion-input type='text' clearInput></ion-input>
</ion-item>
<ion-item class="bg-hidden">
  <ion-label color='primary' floating><ion-icon name='key'></ion-icon>     Senha</ion-label>
  <ion-input type='text' clearInput></ion-input>
</ion-item>

  ion-item.bg-hidden {
    background-color: transparent;
  }

and then I changed the footer background adding:
e depois removi o do footer adicionando:

ion-footer ion-toolbar .toolbar-background {
	background-color: transparent;
}

in the src/app/app.scss file
em src/app/app.scss

the result is
o resultado é

Try it out
Testa ai no seu


#7

@Pedro_Rocha

Eu consegui, muito obrigado… Porém eu decidi colocar uma cor para ficar melhor o design, você poderia me explicar algumas coisas referentes ao assunto e outras não referentes? Irei posta-las aqui abaixo:

Curiosidade sobre o Assunto do Post

1) O .toolbar-background é alguma classe especial do ionic2? Pois eu nem a coloquei no footer ou toolbar como classe e funcionou e além de tudo eu deixei só como “.toolbar-background”. Como faço para ver na documentação esses tipos de “Classes especiais” ?

  1. O meu input está como “floating”, assim que clica nele ele aparece de outra cor, como mudar essa cor do “floating” e a cor que digitamos no input ?

3) No input ele tem uma “linha” embaixo para quando você clicar e for digitar algo os “dados” aparecem em cima desta linha, como eu faço para editar essa linha como por exemplo colocar um text-shadow?

Dúvidas Gerais

1) Como Remover o Scroll que vem por padrão e fixar os elementos na tela para eles não rolarem?

2) Como verificar se realmente o meu design está responsivo nos demais smartphones e tablets?

3) Como testar o APP em tempo real e saber que estará funcionando da mesma maneira para todos os dispositivos?

4) Como testar o app diretamente do meu celular enquanto eu programo?

Desculpe as perguntas, sou novato e obrigado!


#8

If you inspect the ‘ion-footer’ element, you’ll notice that it creates a toolbar and other elements inside with some default classes. The ‘toolbar-background’ class is one of them. It can be found in the ‘Sass Variables’ section of the toolbar documentation.
Se você inspecionar o elemento ‘ion-footer’, vai reparar que ele abre uma toolbar e mais alguns elementos dentro com umas classes padrão. A classe está nos elementos de dentro, pode ser encontrada na seção ‘Sass Variables’ da documentação de toolbar.

Question #2, #3 and #4 should be another topic.
As questões número 2,3 e 4 devem ser tratas em outro tópico.

If you use chrome, press ‘ctrl + shift + c’ to open the Developer Tools, you can simulate devices sizes and test responsive designs. More information here.
Se você usa o chrome, aperte ‘ctrl + shift + c’ para abrir o Developer Tools, lá você pode simular vários tamanhos de dispositivos e testar os designs responsivos. Mais informações aqui.

You can try using the ‘ionic run android’ or ‘ionic run ios’ command to install the app on your phone and test it while developing, keep in mind that it’s not a live-reload environment. More info here.
Você pode usar o comando ‘ionic run android’ ou ‘ionic run ios’ para instalar o app no seu celular e testar enquanto programa, mas o ambiente não é live-reload. Mais informações aqui.

I think you should slow down and read documentations and watch tutorials, maybe start with a really basic app to get to know Ionic a little bit more. I’m always wandering around here if you need anything more, good luck!
Cara, acho que você deve ler mais das documentações e procurar uns tutoriais (no youtube tem vários), comece com um app bem básico só para entender essas coisas de variáveis Sass e como o Ionic funciona. Vou estar por ai caso você precise de algo mais, boa sorte!