Also, how do I put color in the texts?
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>
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.
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;
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%;
}
}
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
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â ?
- 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!
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!