Welcome

Welcome

Bem vindo ao Fanfiction World

Bem vindo ao Fanfiction World

quarta-feira, 23 de abril de 2014

Como mudar a barrinha de rolagem e as barrinhas de buscas em um Style

Hello lindas <3


Mil desculpa pela demora, é que na verdade eu estava parada pro que eu estava esperando um tema bom aparecer, e bom, como sou viciada em Style, esse tutorial será sobre isso, bem ensinarei uma coisa nova sobre eles, que muitos ainda não sabem, então acho que isso perdoa minha demora neeh!!



Muita gente ainda não sabe, mas algumas coisas a mais pode ser mudada nos css, e fica bem legal, eu vou ensinar hj, como muda a cor do rolamento do site, digo da barrinha ao lado direito do site, e aquela barrinha que fica mais ou menos assim "adicionar como amigo", "observar usuário" etc, que nos style de antes que eu ensinei fazer ficava branco, certo, vou mostrar  que é:




O procedimento é fácil, primeiro começaremos pela barrinha de rolamento:





É fácil pro que você não vai mudar muita coisa no html do css, você vai acrescentar um código, e o primeiro código que é o de mudar essa barrinha é esse:



/***************************************************** rolagem **/ 
::-webkit-scrollbar { width: 10px; height: 16px/} 
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment { display: block;} 
::-webkit-scrollbar-button:vertical:start:increment, 
::-webkit-scrollbar-button:vertical:end:decrement { display: none;} 
/***************************************************** rolagem penultima **/ 
::-webkit-scrollbar-button:vertical:increment { background-color: #000000; } 
/* Place The scroll up button at the up */ 
::-webkit-scrollbar-button:vertical:decrement { background-color: #000000;} 
/***************************************************** fundo rolagem penultima **/ 
::-webkit-scrollbar-track:vertical {background-color: #000000;} 
/***************************************************** fundo rolagem acima parada **/ 
::-webkit-scrollbar-track-piece {background-color: #000000;} 
::-webkit-scrollbar-track-piece:vertical:start {border: 1px solid #000000;} 
/***************************************************** fundo rolagem parada **/ 
::-webkit-scrollbar-thumb:vertical { height: 50px;background-color: #000000;} 
/***************************************************** fundo rolagem ultima **/ 
::-webkit-scrollbar-corner:vertical { background-color: #000000;}    



Esse codigo será acrescentado bem no comecinho do html, sendo assim embaixo da frase "estilo de todo o site", lembrando que você naum vai apagar nada,  vai só acrescentar, tipo vc vai achar a frase"estilo de todo o site" e vai dar um espaço embaixo dela, seprando ela do "body" e vai acrescentar esse codigo ai, tipo assim:



As cores a ser mudada serão somente essas que estão grifadas de vermelho, mexeremos apenas isso nesse código, visando que eu usei a cor #006400 ai vc coloca a que você quer, mas menos preto. Então você vai salvar e pronto vai mudar:





Agora faremos, as barrinhas ali, que vai ser no mesmo jeito desse da rolagem ai, o codigo usado será esse:

#subnav .btn {
background: #000000 !important;
border-radius: 0px !important;
text-shadow: #000000 1px 1px 1px;
text-align:center;
}

#meio .btn {
background: #000000 !important;
border-radius: 0px !important;
text-shadow: #000000 1px 1px 1px;
text-align:center;


Esse código será acrescentado aonde está a frase "estilo do menu direito do site", você vai na frase e fazer o mesmo do de cima, dar um espaço na frase e o que vem debaixo tipo:



E então vai colocar o código ai, que vai ficar assim:



E novamente você vai substituir apenas onde está grifado de vermelho, ou seja apenas duas cor que eu usei a #006400 use a que vc deseja, mas não o preto, então você vai salvar, lembra que essa barrinha não dá para ver ela no modelo, só dá para ver quando alguem ou você aplica o site, mas eu fiz um print de um que eu já tenho pronto aqui, então ficará assim:



haha e está ai mais uma cisa para personalizar seu style, é fácil e rápido, então o resto do html você faz do jeito normal mesmo que eu já ensinei aqui e creio que vocês já saibam e se não saibam procurei ali na barra de procura do site, por tutorial, enfim é isso gente, espero que novamente eu tenha ajudado!!! 

Até a proxima :*








Bjs no core <3


sábado, 5 de abril de 2014

Como Fazer Frases Em PNG

Hello Dears


Bom, hoje eu venho com um pedido muito especial, da minha linda sobrinha do SS @JessieShadows, que quer saber como se faz frases em png, isso mesmo é o que eu vou ensinar agora, como se faz frases png, e bom como é mais fácil fazer pelo pixlr.com okay!


Bom, vamos lá!

Primeiramente abram o pixlr.com.


Agora cliquem em criar uma nova imagem.


Ai nesse quadro você vai escolher o tamanho e a largura que você vai querer seu png, e clique em transparente e okay.

Agora você vai clicar nesse "A" ali na barra de ferramenta e depois clicar na imagem que abriu, ai vai apareceu um quadro, nele você vai escolher o tamanho da letra, a cor da letra, e a forma da letra, então no quadro branco você digita o que você deseja e aperta okay.


Agora para o png ficar mais bonitinho você vai abrir mais uma aba no google e pesquisar um desenho fofo em png ( mais para frente vou ensinar a fazer imagem png) salva, depois ai em camada ai em cima no pixlr, abrir imagem como camada dai você abrir a imagem que você salvou em png, e vai com a setinha preta ali em cima na barra de ferramenta você vai posicionar ela onde você quer.



Agora vamos assinar, vai no "A" novamente e faz o mesmo processo que você fez para escrever a frase, só que escreve sua assinatura e num tamanho menos, escolha formato , cor e okay.



Agora vamos salvar, e é ai que vamos fazer o png, você vai clicar no "x" da imagem e vai aparecer um pequeno quadro, clique em sim, tipo:


Ai vai aparece rum outro quadro, você vai ir em renomear e clocar  o nome que você quer e em baixo na barra em ta o nome formato, clica nele e vai aparecer várias opções de formatos, você vai clicar em png e depois em okay e salvar a imagem no seu pc.



E está pronta sua frase em png :3


Pronto é isso galerinha espero que tenham gostado e entendido direitinho, caso de duvidas é só comentar okay! 





Bjs no core <3






quarta-feira, 2 de abril de 2014

Fundo Transparente

Oi amores!!



E ai galera, o negocio é o seguinte, hoje eu vim dar uma conclusão no tutorial sobre como fazer um css, mesmo que todos tenham conseguido e isso é ótimo, mas caso alguem não tenha entendido alguma parte é só me avisar, como fiquei sabendo que algumas tiveram dificuldade com a transparencia eu vim explicar novamente como se aplica ela, mas só como se aplica no html por que fazer um transparencia é fácil e eu ensinei já na primeira parte certo!!!

Com  a transparencia pronta e movida para a pasta img, vamos abrir o modelo do css, e vamos olhar a transparencia vai ser aplicada em tudo após se colocar o link do cima logo, dali para baixo tudo onde eu dizer terá que ter tranparencia, vou mostrar:


Desta linha vermelha para baixo até lá no finalzinho do modelo é onde vamos aplicar a transparencia!
Agora reparem nesses trequinhos que eu risquei, é isso que a gente vai substituir, olha bem em todos os backgroud desde a risca vermelha até p final do modelo eles são assim:

background: #FAF7F5;

O que você vai fazer é simples, em vez de colocar cor, você vai deixar eles assim:


background: url(img/transparencia.png)

Simples ai todos os backgroud qued tem ai desde onde eu mostrei você vai tirar a cor e colocar na frente esse (img/transparencia.png) lembrando que tem que ser png no final.


 ai vai ficar mais ou menos assim:



Bom gente é isso ai, espero que tenham entendido agora, e se não é só me avisarem que eu tento explicar mais!! Até a proxima amores!!





Bjs no core <3