Olá gente!
Demorei não é?Mas desculpem, é que essa semana foi semana de provas na faculdade, e eu também não estava sabendo como bolar um jeito de como fazer para ensinar a mexer no html do css aqui no blog, que aliás finalmente eu deixei ele com cara nova, por que a preguiça foi passear um pouco!!
Bom vamos começar que essa parte é meio complicadinha então vocês tem que prestar muita atenção!
-x-
A ultima coisa que eu pedi para fazerem foi deixar o css junto com o material que baixamos no SS em uma pasta certo? Bom então vamos abri-la novamente por que eu vou mostrar que de todas essas pastinhas que temos agora, só vamos usar 3:
Que são essas 3 que eu circulei (avá) então vou mostrar para que serve cada uma:
pasta 1- img:
é onde fica as fotos usadas no perfil que vem de amostra para você ir modelando até ficando do seu jeito, ou seja, lá dentro tem o cimaLogo, fundoDegrade, e o FundoBase, e mais umas coisas que nem vamos usar.
Pasta 2- modelo:
É onde fica toda a estrutura html do css que é onde mexemos para mudar a cor, o jeito e tudo mais do css;
E por ultimo:
Pasta 3- perfil
Que é tipo um esboço do perfil do SS que eles mandam que é onde você vai ter a base de como seu css está ficando, ou seja, toda vez que você modificar algo no html você abre esse perfil que você vai notar que houve uma mudança, até o css estiver todo como você deseja;
Bom, agora vamos aos primeiros passos antes de começar a mexer no html, vocês vão aonde está o cimaLogo, o fundoDegrade, e o fundoBase, que você fez e renomeou dessa forma, e você vai ter que mover eles para a primeira pasta a "img" porém substituindo com as que estão lá, dentro, por que se não substituir não dará certo:
Vão fazer isso com essas 3 fotos, deixando a transparencia por ultimo.
Bom agora que estão os três lá dentro, você pode colocar a transparencia lá também, e como ela é algo que você está acrescentando por conta, ela não tem lá dentro, ou seja, é só mover normal, sem substituir por nada:
Bom agora sim vamos começar o tão esperado html, vamos o abrir primeiro, no bloco de notas que fica mais fácil de mexer, vocês vão clicar de leva na pasta "modelo" depois clicar uma outra vez com o botão direito do mouse, ir em abrir, com, com bloco de notas, dai vai abrir aquela pasta cheia de códigos que eu mostrei no começo:
Agora serão necessário abrir dois sites que vamos precisa, um é para tirar o código html das core que a gente vai querer, e o outro é para gerar um link para nossas fotos que fizemos: o primeiro é o da cor, é fácil, vai no google e digite "tabela de cores online", vocês vão escolher essa opção:
Ao clicar nela, vai aparecer uma enorme tabela de cores, na qual usaremos somente as cores que estiverem assim ex; #000000 , caso não consiga abrir ela eu vou deixar o link:
Link: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Deixe essa tabela aberta, e o segundo site que vamos abrir que é o para gerar link para nossas imagens que fizemos na postagem passada é o photobucket.com ele é ótimo para armazenamento de imagens, vá em outra aba do google e jogue " photobucket" ai você vai escolher a opção a seguir:
Ele é um site em inglês, mas é fácil de entender, principalmente o que faremos nele, você vai entrar nele e vai pedir para você se cadastrar, é de graça e simples, e para ser mais rápido recomendo que entre pelo fb é mais fácil.
Depois que sua conta estiver pronta, vamos fazer o upload das imagens para ficar mais fácil, clique nesse botãozinho laranja com o nome upload, depois que carregar vai aparecer um quadro branco com um botão azul no meio, clique nele para abrir suas imagens seu computador, depois espere carregar todas as imagens e clique em uma delas, e ai ela vai aparecer maior, e as outras pequenas em baixo, segue as fotos:
Agora vamos começar com o html, você vai lá no bloco de notas que você abriu o html do css e vamos fazer primeiro por partes, faremos essa primeira parte que vocês estão vendo certo:
Faremos o "Estilo de todo o site" até onde tem o primeiro "####################################################################### "
o que ser isso:
"body {
background: #DFDFDF url(img/fundoSombra.jpg) repeat-Y center center; "
Esse é o fundo que fica atrás do cimaLogo e dos lados que quando você minimiza dá para ver que muitos css é de outra cor e tal.
"#base {
background: url(img/fundoBase.jpg) no-repeat center top;"
Esse é o fundoBase, que é aquele que fica bem grande em baixo que é o que fizemos um desenho e tal.
Isso é o mais importante da primeira parte, agora vamos fazer ela que é assim:
Segue isso:
onde está ali " #a cor que você deseja você vai ir lá na tabela de cores e vai procurar a cor que você deseja, que eu recomendo que seja sempre preto, por que nem aparece e tal, e o código será esse #000000.
Agora onde está entre parenteses você vai ir á no photobucket e vai pegar o link que o site geral do fundoDegrade, que é aquele pretinho que a gente fez e colocar ali no lugar, ainda entre parenteses;
Como pegar o link no photobucket:
Você vai olhar nesse quadro do lado e é sempre no "direct" que você tirar o link, você vai clicar no quadrinho do link e quando ele ficar a amarelinho é por que copiou, você vai lá no htlm onde eu disse entre e parentese no "body" e vai dar um Ctrl- v para colar esse link lá, e nota-se que antes que você abre não tem essa palavra Fixed ali, é só você mesmo escrever, okay, vai depois do parentese, que você colou o link dá um espaço e escrever "Fixed".
Agora ali onde está escrito "o estilo da borda que você quer" no seu deve estar escrito "solid" você vai substituir a palavra solid por "dashed" sem as aspas, essa borda é a pontilhada.
E ali onde tem o "cor da borda que você quer" você vai clocar o código html da cor que você quer, que no meu caso eu usei #000000 que é o preto.
Agora onde tem aquele "color" é para você colocar a cor da letra do titulo de cima do site, que no meu caso eu coloquei branco #4682B4.
e no base você vai fazer como você fez com o fundoDegrade, vai no photobucket e busque o link do fundoDegraded e cole ali entre parenteses e depois do parenteses dê um espaço e escreva Fixed:
Veja como ficou o meu e confira com o seu:
bom toda vez que você for modificando alguma coisa no html você tem que ir salvando, vai ai em cima no lado esquerdo da tela vai em arquivo e salvar, e para você ver como é que está ficando, você vai lá onde tem aquelas pastinhas, clica na pasta "perfil" e abre ela que vai abrir o perfil já com suas modificações, mais ou menos assim:
Nosso style já está ganhando forma!
Agora passaremos para a parte debaixo que é a "Estilos da parte de Cima do Site "
Agora vamos colocar o cimaLogo que no meu já está mas no de vocês não:
"#cima #logo {
height: 120px;
background: url(img/cimaLogo.jpg);"
Ali onde está 120 você vai substituir por 350 que é o tamanho que o site pede e em baixo você vai colocar o link da imagem do nosso cimaLogo, vai lá no photobucket e pega do mesmo jeito que você pegou os outros e cole ai no lugar desse "(img-cimaLogo.png)
"#nav {
background: #FAF7F5;
}
#secaoNav {
background: #FAF7F5;
border:1px solid #EEE8E1;
}
#secaoNav, #secaoNav a {
font-size: 12px;
color: #D7575B;"
Esses "background" são os fundo debaixo das letras sabe esses quadrados, onde optamos por fazê-los transparente ou seja no lugar dessa cor que está ai você vai colocar:
url(img/transparencia.png)
ou seja, vai ficar :
background: url(img/transparencia.png)
mas vamos colocar a transparencia daqui para baixo em todos os "background"
ali em baixo onde está border: no lugar de solid você vai colocar dashed e na frente no lugar daquela cor, você vai colocar a cor que você quer as bordas, que no meu caso é #000000 e em baixo ali onde está o color é a cor da letra, ai você vai colocar o html da cor que eu usei o branco #FFFFFF
então vai ficar mais ou menos assim:
Disso: (que é o normal)
Virou isso: (que foi o que eu modifiquei)
Ps: no cima logo você não coloca a palavra "Fixed"
Agora você pode fechar o photobucket, e vamos abrir o perfil modelo para ver como é que está ficando e o que modificou, você vai abrir e o meu ficou assim, note a diferença:
Agora faremos o "estilo da parte de baixo" que é como se fosse ou é o rodapé do site, que é onde fica aquelas opções e tal:
Ele é assim, nota que eu grifei o que vamos mudar nele:
Ps: nesse a borda tem que ficar normal, ou seja solid mesmo:
Vamos lá essa primeira cor que eu contornei é a cor que vai ser aquela linha divisória ai eu vou trocar essa pela que eu quero que eu usei a #4682B4.
No backgroud que eu risquei ali, faremos como fizemos nos outros acima para colocar atransparencia, ou seja ficará:
background: url(img/transparencia.png)
e nesses color ai, será as cores das letrinhas, eu coloquei branco #FFFFFFF:
agora o meu ficou assim:
lembre-se de ir salvando a cada parte feita, pronto essa parte ta pronta, agora veremos com ficou, abram o perfil e vá lá em baixo e tarã rsrsr:
Agora faremos o !estilos do menu direito do site" que é onde fica os amigos, as observações e os grupos que participamos.
Ele é mais ou menos assim:
Como sempre modificaremos só onde eu grifei:
Esse primeiro color ai é o titulo, eu coloquei Branco #FFFFFF (lembre-se da tebela de cores online lá tem variedades não precisa só ser preto e branco, faça a cor que combinar com seu css)
Esse segundo também é outro titulo, coloquei branco também
Ali no border, você já pode mudar e colocar a pontilhada que é o dashed, coloca no lugar do solid, e depois a cor que você que o contorno dos quadradinhos, que no meu caso usei preto #000000 e em baixo a transparencia de novo, no lugar ali vai colocar background: url(img/transparencia.png) e em baixo a cor das letras, ou seja os nomes e eu coloquei branco de ovo #FFFFFF
então ele ficou assim depois de modificado:
Agora salva e abra o perfil olhe para o lado e quadradinho ficou assim:
Estamos acabando galera, vamos lá é fácil, vamos com calma não se apavore, leia e releia se for preciso!!
Agora faremos a parte "Estilos que pertencem ao conteúdo do site" que é o resto que está em branco ali:
ele é assim, lembre-se vamos modificar o que se pede, ou seja o que está sublinhado:
Vejam que todos tem uma opção igual, ou seja:
Color: letras e quando ele está separado (sozinho) é por que é um titulo: você vai substituir pela cor que você quer que as letras fiquem, lembre-se que não podem ser cor muito ofuscante, por que atrapalha a visualização, eu escolhi a cor, branca para todas a s letras #FFFFFF, então onde tem color você vai colocar acor que tu quer.
Onde tem o backgroud é onde você vai colocar a transparencia, ou seja em todos os background tem que ficar assim : background: url(img/transparencia.png)
E nos border, você substituir os solid por dashed e trocar acor que você quer a barda que no meu caso vai ficar preta #000000
Então modificado vai ficar assim:
Agora você vai salvar e chegar no seu perfil como ficou, vai parecer que está pronto mais, não está, ainda tem uma parte:
E para finalizar faremos esse finalzinho onde tem uma cor para mudar, que é o titulo lá em cima, uns outros detalhes, e as letras das sinopses das fics, no seu perfil que no meu caso eu deixei preto mesmo, mas vocês podem colocar a cor que quiserem: segue:
Salva e meu Deus está pronto, cheque no perfil para ver como ficou e o deixe aberto, o meu ficou assim:
Viram como não foi dificil: agora é só umas dicas para postagem do seu css, depois que estiver tudo pronto salva e pode fechar o bloco de nota, vai na pagina de postar o css no ss e você vai ver no meio isso:
Nesse primeiro você vai colocar um print que você fazer do modelo, que tem que ter esses tamanhos: 600x400 que nem o meu que eu vou mostrar aqui, e em baixo, ai quando você abrir seu pc ai em procurar você vai colocar a pastar modelo, que vai aparecer o código html todo modificado que você fez, e nas descrições do css você diz onde você tirou as imagens, e os sites que você usou para montar o css!!
Bom galera, é isso ai, o nosso css finalmente ficou pronto, e eu vou querer ver como ficou o de vocês ehen gente, caso algum erro ao alguma duvida é s´me procurarem, ma não tem erro, enfim vou deixar aqui onde me encontram e não deixem de curtir nossa pagina para não perder nada:
ps: O próximo assunto de publicação do blog será sobre fanfic ehen, dicas boas aguarde haha!
Contato:
Facebook: https://www.facebook.com/byah.aparecida.5
Page: https://www.facebook.com/pinkfanfictionblog?ref=hl
Socialspirit: http://socialspirit.com.br/bsullivan
email: biagates9@gmail.com
E gente por favor se eu ajudei não deixe de acompanhar e nem comentar okay! E se for copiar algo me dê créditos :3
Bjs no core <3
