wordpress,modificando a posição da logomarca

Modificando a posição da logomarca

No editor de temas, vamos abrir o cabeçalho pra podermos entender uma coisa antes de modificar o estilo. Vamos procurar onde nós colocamos no vídeo anterior, a nossa a logomarca, que em nosso caso é: <img src=”/juvenal/images/logo.png”>, notem que estamos dentro de uma div, que é a header ou cabeçalho, isso vai ser muito importante na hora de procurar dentro do estilo.

Então nós temos um header e um H1, que é o título do nosso site, em que nós passamos a colocar a imagem.

Vamos procurar na Lista de Estilos, a nossa folha de estilo do site. Dentro do documento vamos procurar a área header, que foi aquela mostrada anteriormente, aquele div dentro do header e nós estamos dentro do header com o H1.

Pelo vídeo você pode perceber que temos um parâmetro chamado padding que indica o deslocamento do cabeçalho dentro do layout do site, usando o primeiro número da esquerda para direita da tela, pode-se fazer o deslocamento vertical e horizontal, como por exemplo eu quero colocar a imagem quase no centro, então chutamos um valor e substituimos a numeração da direita para a esquerda da tela, de 30px, colocamos 450px, porém vai ficar muito próximo do centro então escolhemos mas salvamos as alterações e recarregamos a página do blog.

Exemplos:

– Antes:

padding: 20px 0 0 30px;

– Depois:

padding: 20px 0 0 450px;

Então, podemos observar que quase passamos pro outro lado, mas a imagem está na posição desejada.

Se você modificar o outro número, no caso o 450 que era o primeiro (movemos para a direita) e em seguida diminuirmos o padding de 20 para 0, veremos que a logomarca será movida para cima. Salvamos as alterações e verificamos que a imagem subiu um pouco.

Em nosso caso, voltaremos as posições para seus valores originais, mas você pode modificá-las de acordo com suas necessidades. Então procuramos no código o #header h1 e modificamos o padding novamente para: padding: 20px 0 0 30px; valores já configurados anteriormente como padrão.
Note que o link vai junto, tudo perfeito… É o css agindo em nosso site.

Vamos utilizar a área vazia para fazer nosso banner.

Criando um banner superior

Voltaremos lá para o cabeçalho, no editor de temas e clicaremos na palavra ‘Cabeçalho’, então procuramos o div cabeçalho (veja um exemplo no vídeo), basta ter esse conhecimento básico de html e css ou seguir nosso vídeo e você não erra!

Embaixo do div cabeçalho criaremos um novo div, então tudo que estiver entre as tags:

<div>

</div>

Será uma nova divisão css, então criaremos uma nova classe que será a:

< div class=”banner”>

Você pode colocar o nome que quise, com tanto que lembre o nome da classe. Em seguida, colocamos:

<img src=”/juvenal/imagens/banner.gif”>

Nesse div você pode colocar qualquer código, por exemplo, você faz uma parceria com algum site e ele te dá o código do banner e você coloca entre o <div> e </div>

Salvamos as alterações e verificamos que o banner está no local errado, queremos o bannner flutuando, isso porque não existe a div banner. Para criá-la voltamos ao editor de estilo e abrimos a folha de estilo, procuramos o #header e acima dele criamos uma nova classe, que será:

.banner {

}
Tudo que for escrito entre essas chaves vai fazer parte da formatação do banner. Inserimos a posição assim:

.banner {
position: absolute; (Não se esqueça do ponto e vírgula no final)

}

Usaremos dois parâmetros, o top e o left:

.banner {
position: absolute;
top: 10px;
left: 400px;
}

Chutaremos valores, como como 10pixels no topo, que é a distância entre a barra abaixo da barra de navegação até o topo da imagem. Se eu quiser uma distância maior, em nosso caso colocamos só10px, da esquerda para direita colocamos uns 400px para posicionar o banner.

Então top é a distância da parte de cima até a imagem e left é a distância do lado esquerdo até a imagem. Em seguida, salvamos as alterações e percebemos que o banner vai saltar para a div determinada, mas ele ficou um pouco torto e diminuiremos o tamanho um pouco mais para a esquerda. Determinamos o left para 380px e depois atualizamos a página.

Utilize o css para posicionar o seu banner em qualquer lugar da tela, nós utilizamos um espaço que estava livre para colocar nossa propaganda.

Anúncios

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: