Código CSS

/ * Estilos para todos os links dentro de um flex container * /
cabeçalho a (
display: bloco;
cor: # 212121;
preenchimento: 12px;
decoração de texto: nenhum; / * remover sublinhado * /
tamanho da fonte: 100%;
sombra do texto: 0 1px 0 #fff;
raio da borda: 4px;
}

Aqui indicamos a largura relativa do bloco para o logotipo, o que significa que os 70% restantes serão ocupados pela navegação. Ao especificar porcentagens, você pode distribuir com mais precisão os elementos filho no contêiner pai.

/ * Largura do bloco filho para o logotipo * /
.wrap-logo (
largura: 30%;
}

Ao definir o tamanho da fonte em%, nos preocupamos com super telas grandes porque os pixels são codificados.

/ * Estilo do logotipo * /
.wrap-logo #logo (
família de fontes: "Roboto Slab", serif;
tamanho da fonte: 200%;
intensidade da fonte: Negrito;
}

O logotipo fica mais fresco quando é feito em duas cores.

/ * Verde para uma parte do logotipo * /
.wrap-logo span (
cor: # b2db41;

Ola queridos amigos! Como regra, os iniciantes escolhem um modelo de site simples, mas, mais cedo ou mais tarde, será necessário alterar o cabeçalho. A questão é simples, mas muitos novatos não sabem como alterar o cabeçalho de um site WordPress. Este artigo responde a esta pergunta.

Modelo de site simples, substituição do cabeçalho do site

Na época da criação do site (blog), não havia conhecimento. Portanto, um modelo de site WordPress muito simples foi escolhido, incluindo o cabeçalho do site. Ao mesmo tempo, havia duas fotos na tampa:

• a imagem de cima era um retângulo simples pintado para combinar com a cor do modelo geral;
• a imagem inferior do cabeçalho representava a imagem do relógio e também foi pintada para coincidir com a cor do modelo geral, a chamada "Imagem do cabeçalho".

Outro dia resolvi experimentar o cabeçalho do meu site, remover o amontoado de duas fotos e substituir o cabeçalho do site. Para fazer isso, você apenas tinha que remover a imagem inferior - nada complicado.

Então, depois de trabalhar um pouco na imagem superior do cabeçalho do site, tive um problema. Depois que a imagem modificada foi instalada, descobriu-se que ela também foi instalada no rodapé (parte inferior da página do site) por padrão.

Tentei pesquisar na Internet informações sobre como resolver o problema, mas não consegui encontrar nada. Tive de resolver o problema sozinho por tentativa e erro. Um modelo de site simples acabou não sendo tão simples.

Como mudar o cabeçalho do site? Então, em ordem. Após remover a imagem do cabeçalho, decidiu-se sobrepor a imagem na forma de moedas no cabeçalho do site e fazer uma inscrição. Como isso é feito, não refletirei neste artigo, este é um tópico separado. Mas, para uma compreensão geral do processo, descreverei brevemente.

Antes de começar a substituir o cabeçalho do site, precisamos descobrir o endereço do local da imagem. Se você trabalha em Navegador Mozilla Firefox, você precisa passar o mouse sobre o cabeçalho (imagem) e pressionar o botão direito do mouse, na caixa de diálogo, clicar em "Abrir imagem de fundo".

Uma imagem do cabeçalho do site é aberta em uma nova janela. A barra de endereço do navegador (na parte superior) contém o endereço do cabeçalho do nosso site (fotos). O endereço do meu cabeçalho é assim: copie e salve este endereço.

Agora vemos onde está nossa imagem na hospedagem: pasta wp-content; pasta de temas; pasta zeestyle; a pasta imagis e finalmente o nome da imagem - header_bg.png. Isso será útil para nós no futuro.

EM Navegador Google O Chrome reconhece o endereço da mesma maneira. Passe o mouse sobre o cabeçalho do site, clique com o botão direito, selecione "Copiar URL da imagem" na caixa de diálogo, copie e salve também o link. Existem modelos em que as imagens são abertas de uma forma mais complicada.

A seguir, abra a imagem em uma nova janela e podemos trabalhar com ela. Você pode editá-lo no Photoshop ou outro editor de imagens. O trabalho com o cabeçalho do meu site foi realizado no programa Pixlr (este Photoshop online) Leia mais sobre isso nos artigos "" e "".

Após concluir o trabalho na imagem, ela deve ser salva com a mesma extensão e as mesmas dimensões geométricas da imagem anterior. Para salvar o nome, renomeie a imagem editada (eu faço isso em Comando total) e nomeie-o header_bg.png. Este nome é retirado do link acima (cada um terá seu próprio nome).

A substituição da imagem (cabeçalho) do site pode ser feita tanto via FTP, ou diretamente no servidor, eu fiz diretamente. Para fazer isso, acesse nossa hospedagem, abra nosso site, abra a pasta public_html, a pasta wp-content, themes, zeestyle, images e encontre nosso cabeçalho (imagem) - header_bg.png.

Excluímos a imagem encontrada e, em seu lugar, carregamos uma nova imagem editada. Nós atualizamos e vamos ao site, também o atualizamos e vemos que nosso cabeçalho editado (imagem) está instalado. Tudo é muito simples - o cabeçalho do site foi substituído.

Conforme mencionado no início do artigo, meu cabeçalho foi instalado não apenas no topo da página do site, mas também no rodapé.

A causa foi encontrada e eliminada. O fato é que meu modelo no cabeçalho e rodapé é representado por retângulos, que são simplesmente pintados em azul escuro, para combinar com a cor do modelo principal. Acontece que a origem do cabeçalho e do rodapé era a mesma imagem (veja o link acima), portanto, alterar a imagem do cabeçalho também altera a imagem do rodapé.

Para resolver este problema, é necessário separar os links, fazer uma figura separada para o cabeçalho e separadamente para o rodapé. Para fazer isso, volte ao painel de administração do nosso site, vá para " Aparência"," Editor "e selecione" Estilos "," Folha de estilo "(style.css).

Encontre o rodapé e veja o nome da nossa imagem na linha - background: url (images / header_bg.png) no-repeat # 1d4c82; É melhor salvar o código das folhas de estilo de antemão. Se você cometer um erro, poderá sempre retornar ao estado original.

Lembramos que header_bg.png é o nome de nossa imagem de cabeçalho. Agora, no código, em vez do cabeçalho, escrevemos o rodapé (veja a imagem),

não toque no resto. Atualizamos o arquivo, vamos ao site, atualizamos e verificamos se está tudo em ordem. O cabeçalho editado está no lugar, o rodapé tem a edição antiga. Isso completa o trabalho. Um modelo de site simples está pronto.

Por precaução, coloco a imagem de rodapé no servidor, talvez edite no futuro. Para fazer isso, tiramos uma foto do cabeçalho antes da alteração e o renomeamos para Total Commander - em vez de header_bg.png, escrevemos footer_bg.png e o carregamos na hospedagem. Carregamos a imagem para a pasta de imagens, no mesmo local da imagem do nosso cabeçalho.

Claro, essa situação pode não ocorrer em todos os modelos, mas os modelos que possuem um simples preenchimento no cabeçalho e rodapé (como o meu) terão semelhanças e este método pode ser aplicado. Se você sabe, o trabalho pode ser feito em alguns minutos. Como você pode ver, o modelo do site, embora simples, teve que ser remendado antes de descobrir como alterar o cabeçalho do site.

Atenciosamente, Ivan Kunpan.

P.S. Para criar um blog corretamente, para promovê-lo corretamente, você precisa fazer tudo em uma sequência estrita. Essa sequência é mostrada em meu mapa mental, que desenvolvi por experiência própria. ... Também será útil, você também pode baixar o livro gratuito "Como escrever um artigo para um blog".

Receba novos artigos de blog diretamente em sua caixa de entrada. Preencha o formulário, clique no botão "Inscrever-se"

Vamos começar uma série de tutoriais sobre como editar um template Joomla 2.5. Neste tutorial, veremos

Deve ser dito desde já que este processo irá proceder de forma diferente em diferentes modelos de diferentes desenvolvedores. Portanto, tentarei explicar o próprio princípio de encontrar a localização da posição do cabeçalho, logotipo e edição de CSS. Como sempre, recomendo fazer todas as manipulações com o site em servidor local Denver (Denwer) Para não incomodar, vamos pegar o template instalado neste site.

Primeiro, você precisa determinar em qual posição do módulo nosso cabeçalho está localizado e quais outras posições existem no cabeçalho do site. Para determinar as posições dos módulos no modelo Joomla 2.5 depois do nosso site nós digitamos ? tp = 1... Ou seja, será assim: http: // seu_site /? tp = 1.

Atualizamos a página (F5) e ... não vemos nada. Significa em parte administrativa do site Exibição desativada de posições de site. Vamos para o painel de administração, vamos para as configurações

e habilitar a exibição de posições conforme mostrado na foto abaixo. Não se esqueça de salvar.

Nós atualizamos a página novamente. Tudo. As posições dos módulos apareceram. Vemos que existem vários deles: barra de cabeçalho, logotipo, contador, banner. Ao mesmo tempo, vemos que os tamanhos das posições condicionais estão destacados (contador, banner), mas a barra de cabeçalho e o logotipo não.

Do ponto de vista puramente lógico, entendemos que a posição do módulo da barra de cabeçalho é responsável pelo cabeçalho do site, e a posição do logotipo para o logotipo.

Minha convicção pessoal é que você sempre precisa verificar maneiras simples de resolver um problema e, se não funcionar, vá mais fundo. A coisa mais simples é entrar nas configurações do próprio template Joomla 2.5 e ver quais configurações estão lá. Em qualquer caso, como ao instalar um modelo simples no Joomla 2.5, ou depois de instalar um modelo Joomla 2.5 de um início rápido "QuickStart", a primeira coisa que você precisa fazer é ir para as configurações do modelo e lidar com suas opções de personalização. Ao mesmo tempo, não há necessidade de russificar o Joomla 2.5, já que o modelo em si não será traduzido para o russo de qualquer maneira.

Muitos desenvolvedores do modelo em suas configurações permitem a edição cabeçalhos, bem como o rodapé (rodapé) do site e muitos outros gadgets. No entanto, entre as muitas configurações neste modelo, não havia uma maneira fácil.

E assim, sabendo a posição do cabeçalho, conforme barra de cabeçalho vá em "Extensões - Gerenciador de Módulos" e no menu drop-down "Selecionar posição" procure a posição da barra de cabeçalho. Não está lá, e isso é correto, porque o próprio cabeçalho não está no modelo. Existe apenas um logotipo. O mais correto e Atalho Cabeçalho de saída no site está no "Gerenciador de Módulos" pressione o botão "Criar".

E na escolha do tipo de módulo, selecione "código HTML". Com sua ajuda, poderemos não só retirar parte Código HTML, mas também coloque uma foto de nossos bonés.

Porém, para exibir o cabeçalho na posição do módulo, ele deve ser preparado com antecedência, para isso precisamos saber a largura e o comprimento da posição do módulo. Lembrando do plugin legal Firebug para Firefox e comece a usá-lo. Com esta extensão, examinamos a posição da barra de cabeçalho e vemos

que o arquivo layout.css é responsável por seu posicionamento e sua altura é de 110 pixels. A propósito, você pode alterar a largura para as dimensões de que precisa neste Arquivo CSS... Agora precisamos decidir sobre o comprimento do nosso boné. Na maioria dos modelos, sua largura é definida nas configurações. Vamos ao nosso modelo e nas configurações vemos que o comprimento do nosso modelo é de 1100 pixels. Agora podemos preparar nosso cabeçalho com os parâmetros necessários usando um programa de edição de gráficos (digamos Adobe photoshop) Não vou te dizer como isso é feito. Sites inteiros são dedicados a isso.

Jogue o arquivo preparado com o cabeçalho na pasta "imagens - histórias" do site, mas não o modelo. Agora vamos colocá-lo usando o módulo "código HTML". Esconda o título. Selecione a posição da barra de cabeçalho e salve.

A propósito, isso pode ser feito para que em páginas diferentes site exibiu um cabeçalho diferente. Preparamos vários cabeçalhos, transferimos para a pasta acima e os misturamos com a ajuda de vários módulos "código HTML" com a saída de determinados itens do menu.

Nós lidamos com o hader. Agora vamos editar o logotipo. Sabendo a posição do módulo, nomeadamente o logótipo, fazemos a verificação. Vá para "Extensões - Gerenciador de Módulos" e procure a posição do logotipo no menu suspenso "Gerenciador de Posições". Existe um e ele ainda contém o caminho para a imagem com o nome logo.png. Mas tendo desativado, não vemos nenhuma mudança no site. Isso significa que esta imagem é usada apenas ao lançar um modelo simples em um Joomla 2.5 já instalado. Mas ao instalar o template Joomla 2.5 de começo rápido"QuickStart", pois usamos uma imagem de outra pasta. E naturalmente a partir de um modelo.

Portanto, começamos a procurar outro caminho. Novamente, usando o plugin Firebug para Firefox, examinamos o logotipo do modelo e vemos,

que o mesmo arquivo layout.css é responsável por seu posicionamento e para ver onde ele está (caminho para o arquivo) abra-o em uma nova aba. Pela Programas Notepad ++ abra e procure a linha 259.

Aqui podemos experimentar a largura e o comprimento do logotipo. Não se esqueça de salvar e atualizar a página do site para ver o resultado. Outra grande vantagem do Notepad ++ é que você sempre pode reverter para o estado original do arquivo, mas apenas se não tiver fechado a janela do Notepad ++. Retornamos ao estado inicial usando o botão "Cancelar".

Bem, para alterar o design do logotipo, precisamos do Adobe Photoshop e conhecimentos básicos deste programa.

Assim, consideramos com você como editar (alterar) o cabeçalho em Template Joomla 2.5.

Boa sorte em seus empreendimentos.