Custon Header

As novas versões do WordPress e WordPress MU têm vindo com uma funcionalidade que poucos sabem que existe, que nos serve para criar uma opção extra para nossos temas.

Com ela você pode, trocar a imagem do banner, trocar a cor do título e descrição do site ou até mesmo remover os textos e ficar só com a imagem de banner.
Estas opções são extremamente úteis para quando temos uma logomarca e queremos colocá-la em nosso site.

Dentro da pasta do seu WordPress em wp-admin tem um arquivo chamado custom-header.php e é ele que define as funcionalidades extras que vamos implementar, mas para usarmos essas funcionalidades de forma adequada precisamos definir algumas coisas para que seja adequada ao nosso tema.

Estrutura do header.

Primeiramente veja como está o meu arquivo header.php que é onde meu banner está sendo carregado, a parte onde tem o banner, título do site e descrição foram feitas da seguinte forma.

<div id=”banner”>
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h3><?php bloginfo(‘description’); ?></h3>
</div><!–banner–>

Código CSS.

As demais áreas do meu header.php não importam, desde que nenhum outro código esteja influenciando neste parte do site isso é tudo que importa.
Para personalizar esta área usei o seguinte código em css.

#banner h1{
padding-top: 30px;
padding-left: 50px;
}

#banner h1 a{
font-family: “Trajan Pro”,”Lucida Sans Unicode”,Arial,Helvetica,Sans,FreeSans,Jamrul,Garuda,Kalimati;
font-size: 50px;
color: #C40000;
font-weight:bold;
}

#banner h1 a:hover{color: #FF9900;}

#banner h3{
font-family: “Palatino Linotype”, “Times New Roman”, Georgia, Tahoma, “Century Schoolbook L”, Arial, Helvetica;
padding-left: 90px;
color: #C40000;
}

Código do function.

Agora que já vimos como a minha área de banner foi criada, poderemos reparar como o restante do código precisa ser alterado, então segue o código que precisa ser adicionado em seu arquivo function.php.

Vou colocar o código em partes e com comentários para poder explicar, então vá lendo com calma para entender, pois você terá que mudar algumas partes para que funcione em seu tema.
Se quiser copiar o código inteiro você pode, pois as explicações serão colocadas em comentário entre o código e não irá influenciar no seu arquivo function, mas fiquem atentos as partes que precisam ser alteradas para que tudo funcione bem.

Como já mencionei, adicione o código a seguir em seu arquivo function.php, se ele não existir crie um e coloque na pasta do seu tema.

<?php
/*
Definindo o tamanho da sua imagem do banner, isso será usado quando
você upar uma imagem maior ou menor que o tamanho correto, e com
esta opção você fará um corte em sua imagem para que ela se adapte
corretamente ao seu espaço para o banner.
*/
$content_width = 998;

// Definindo Valores padões.
// Cor padrão do texto.
define(‘HEADER_TEXTCOLOR’, ‘C40000′);
// Nome e caminho da imagem padrão do banner.
define(‘HEADER_IMAGE’, ‘%s/images/banner.jpg’);
// Largura da Imagem do banner que será a largura padrão.
define(‘HEADER_IMAGE_WIDTH’, 998);
// Altura do banner que será a altura padrão.
define(‘HEADER_IMAGE_HEIGHT’, 153);

//Esta função define o estilo para o tema.
//Você precisa alterar esses seletores para corresponder ao seu tema.
//Onde está #banner h1 ou #banner h3 coloque o que usou para definir seu banner no seu css.

//Você pode definir um novo nome para sua função diferente deste.
function myst_header_style() {
?>
<style>
#banner{
background: url(<?php header_image() ?>) no-repeat;
width: 998px;
height: 153px;
margin: 0 0;
padding: 0 0;
}

<?php if ( ‘blank’ == get_header_textcolor() ) { ?>
#banner h1, #banner h3 {
display: none;
}

<?php } else { ?>
#banner h1 a, #banner h3 {
color:#<?php header_textcolor() ?>;
}

#banner h3 {
margin-right: 30px;
}

<?php } ?>
</style>
<?php
}

//Painel de administração.
//O seletores #headimg h1 e #headimg #desc são utilizados para criar
//o painel de administração, então não mude estes seletores, as únicas coisas que você
//pode mudar é a formatação que você pode deixar mais parecida com o seu banner original.
//Eu usei a mesma formatação do meu banner para que quando o usuário veja o painel de
//cabeçalho personalizado, veja da mesma forma que está vendo no site, se pretende mudar isso
//tome cuidado de não alterar os códigos php, eles são muito importantes para o bom funcionamento.

//Você pode definir um novo nome para sua função diferente deste.
function myst_admin_header_style() {
?>
<style>
#headimg{
background: url(<?php header_image() ?>) no-repeat;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
padding:0 0 0 18px;
}

#headimg h1{
padding-top: 50px;
padding-left: 40px;
}

#headimg h1 a{
color:#<?php echo HEADER_TEXTCOLOR ?>;
font-family: “Trajan Pro”,”Lucida Sans Unicode”,Arial,Helvetica,Sans,FreeSans,Jamrul,Garuda,Kalimati;
font-size: 50px;
font-weight:bold;
text-decoration:none;
}

#headimg #desc{
color:#<?php echo HEADER_TEXTCOLOR ?>;
font-family: “Palatino Linotype”, “Times New Roman”, Georgia, Tahoma, “Century Schoolbook L”, Arial, Helvetica;
padding-left: 80px;
font-size: 18px;
}

<!–Defina aqui os mesmos seletores css usados em seu style.css–>
<!–como pode ver usei novamente aqui o #banner–>
<?php if ( ‘blank’ == get_header_textcolor() ) { ?>
#banner h1, #banner h3 {
display: none;
}

#banner h1 a, #banner h3 {
color:#<?php echo HEADER_TEXTCOLOR ?>;
}

<?php } ?>
</style>
<?php
}

//Se definiu novos nomes para as suas funções redefina aqui eles novamente.
//Como você pode reparar os nomes que usei para as minhas funções são repetidos aqui.
add_custom_image_header(‘myst_header_style’, ‘myst_admin_header_style’);
?>

Salve seu arquivo function.php e entre em seu painel de administração, agora você verá na área aparência um novo campo chamado cabeçalho personalizado e poderá testar a nova funcionalidade do seu tema.

Possíveis erros.

1ª Caso dê algum erro repare se usou os seletores css corretamente, não esqueça que os seletores #headimg h1, #headimg h1 a ou #headimg #desc não pode ser alterados e os #banner, #banner h1, #banner h1 a e #bannr h3 devem ser alterados de acordo com o seu tema.
2ª Se mudou o nome das funções, repare se os repetiu na parte add_custom_image_header corretamente.
3ª Vale reparar também se os códigos php estão todos corretos e com seus devidos espaços.
4ª Não deixe espaços no final do seu arquivo function, isso pode causar erros, sempre depois de ?> aperte delete para eliminar possíveis erros deste tipo.

Esses são os erros mais comuns que podem ocorrer.

Vale ressaltar que, dependendo do estilo visual e se forem usar esta funcionalidade em um tema que será distribuído a terceiros, é importante disponibilizar o banner em arquivo psd (photoshop), ou outro formato que a pessoa possa usar para alterar a imagem a seu gosto, ou as pessoas não terrão como usufruir desta funcionalidade de forma adequada, criando um banner que não se adeque ao restante do visual do site.

Espero que tenham gostado da dica e que venham a usar para criar temas cada vez mais funcionais.

Créditos deste artigo:
Algumas das informações foram obtidas do site www.resources4bloggers.com

Ich denke, es ist mal wieder an der Zeit, einen neuen Ecki-Blog-Header zu besorgen. Der aktuelle ist von meinem guten Senfundkren-Blogger. Er war aber schon lange nicht mehr hier. Leider beherrsche ich das Erstellen eines solchen Kunstwerkes nicht wirklich.
Auch will ich kein Geld für sowas ausgeben. Gibt es jemanden, der es hinbekommt, mir einen animierten Mieder Header zu basteln? 760 x 200 Pixel? Benötigte Bilder werden gerne zur Verfügung gestellt.

Hey!
Yoy have probably noticed the new header made by me!!!!! I know, I made it ALL by myself, no turorials or anything. So I downloaded paint.net yesterday and tinkered around with it for about an hour and had no time to post. Today I started a header that I wanted to look like this

But I wanted something for my own. Today I started the header

Layer 1- Graffitti picture I found, Cant really see it

Layer 2- The Green and lighter green, transparent so you can see Layer 1

Layer 3- The Splat, this took me a while to find a site where you can make one, http://jacksonpollock.org/, I used that and put it in and took all the white out and finished with an outline

Layer 4- The name, I just blurred it and gave it an outline

SO YA

-Storm

Se você achava que num futuro próximo todos os navegadores “iriam falar a mesma língua” e a dor de cabeça de construir código compatível com todos eles iria acabar, pode tirar o cavalo da chuva, porque tem coisa revolucionária vindo por aí. Apresentando… o HTML 5!

Principal mudança entre o HTML atual para o 5 já deve ter sido imaginada por alguns desenvolvedores, está na Semântica, no significado da estrutura html do seu site. No momento em que estávamos acostumados a criar um <div id=”rodape”> agora a galera nos ajudou, bastando um <footer> , bem, além disso temos também o seguinte:

• Tags com valore semânticos.  adição de valores semânticos com a criação das geniais tags footer, header, time, nav por exemplo;
• Áudio e Vídeo.  incluir vídeo e áudio era coisa de outro mundo? não mais! Foram criadas as tags <audio> e <video> que fazem com que essas mídias sejam incluídas numa página sem a necessidade de plug-ins extras. Estuda-se até o caso de incluir legenda nesses vídeos, imagina só! Tudo isso totalmente “de grátis”;
• Desenhos dinâmicos. o novíssimo HTML 5 permite que você trabalhe com os arquivos vetoriais baseados em XML e com código aberto, os chamados SVG (Scalable Vetorial Graphics);
• Drag and Drop. sim, agora vai dar para mover objetos e customizar a experiência do usuário na página com apenas algumas poucas linhas de código;
• Geolocation API. você vai poder localizar os dados de um usuário facilmente, sem a necessidade de depender de sites externos para isso;
• Armazene dados no cliente. existirá uma espécie de base dados no computador do cliente, da até pra trabalhar offline! Isso vai dar pra fazer estrago com Javascript.

Essas novidades são o “coração” do novo HTML, mas a página que contém a documentação tem uma rolagem sem fim.

Mas eu já posso usar?

Na minha opinião pessoal eu acho que ainda não é viável cair de cabeça na utilização da liguagem, mas estudá-la já está na hora. A documentação ainda é muito nova, sua aplicação precisaria de uma flexibilidade para mudanças. A documentação final está prevista para 2012, então ainda há tempo.

Pense no seu público-alvo e faça seus testes com prudência. O Internet Explorer 6 e 7 não oferecem suporte ainda, porém existe um Javascript, capaz de fazer estes navegadores interpretarem HTML 5 ,  em todos os artigos que li para elaborar este meu os escritores e blogueiros não aconselham você esperar a empresa do tio Bill Gates para um suporte completo dos IE ao HTML 5, isto duria séculos, mas também não é pra menos né, até hoje não acertaram com o IE8. Já com o Chrome e o Firefox, apartir das versões 3.0,  a história é diferente e você consegue sim ver as mágicas acontecerem. 

E o que mais?

Tá aí…

<article>: Define um artigo.
<aside>: Define algum conteúdo relacionado ao artigo.
<audio>: Define um streaming de áudio em um documento HTML
<canvas>: Define a criação de gráficos em uma página web
<command>: Define um botão de comando, como um radiobutton, uma caixa de seleção ou um botão.
<datagrid>: Define uma lista de dados selecionáveis. O datagrid é exibido como uma árvore.
<datalist>: Define uma lista de dados selecionáveis. Utilize esse elemento juntamente com o elemento input, para fazer uma lista suspensa para um valor de entrada.
<datatemplate>: Define um recipiente para o modelo de dados. Deve conter elementos filho que são <rule> para definir um modelo.
<details>: define os detalhes de um elemento, no qual o usuário pode ver, e clicar para ocultar.
<embed>: Utilizado para incorporar conteúdo no HTML, atuando como um plugin.
<eventsource>: Define um destino para eventos enviados por um servidor.
<figure>: Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
<footer>: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
<header>: Define o cabeçalho de uma seção ou documento.
<mark>: Define texto marcado. Utilize a tag <mark> se você quiser destacar partes do seu texto
<meter>: Define uma medição. Usado apenas para medições com conhecimento de um valor mínimo e um valor máximo.
<nav>: Define uma seção de links de navegação.
<nest>: Define o ponto de incício para criação de elementos em um <datatemplate>, utilizado em conjunto com o elemento <rule>.
<output>: Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script.
<progress>: Define o progresso de uma tarefa de qualquer tipo.
<rule>: Define as regras para atualização de um datatemplate. Usado em conjunto com os elementos <datatemplate> e <nest>.
<section>: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
<source>: Define recursos para elementos de mídia, como <audio> e <video>.
<time>: Define tempo ou data, ou ambos.
<video>: Define vídeo, como um clipe de filme ou vídeo de outros fluxos.

(fonte: pinceladas da web)

A W3C liberou a documentação oficial no meio do ano de 2009 mas ainda é passível de alterações portanto não é definitiva. Ela é a mais completa e confiável fonte de informações sobre a linguagem e você encontra aqui neste link. (inglês).

Existem exemplos?

 Haram… olha aí:

http://bit.ly/1Hw1ED (resize & drag and drop de fotos)
http://bit.ly/HkYnp (post-its que são arrastados e armazenados offline)
http://www.html5gallery.com (galeria de sites em html5)
http://bit.ly/fPMxn (resize & drag and drop de videos)
http://bit.ly/2F3i1K (desenho escalável de um tigre em SVG)
http://bit.ly/1Hw1ED (resize & drag and drop de fotos)

(fonte: Luiz Tiago)

E afinal?

É uma questão sem solução atualmente adequada. Se por um lado existe um suporte à navegadores desatualizados o que cria a disponibilidade à todos os seus usuários, por que não usar?  Por outro lado, se ainda não existe uma documentação finalizada e consistente, para que começar?

Fica com você!

Vamos discutir sobre o assunto?

Sitter sömnlös och relativt pigg och fixar ny header och profilbild. Vad tycks? Men nu ska det försöka sovas. Jobb imorgon. Som vanligt. Peace.

Well, no, not really.  Just a bad Simpsons reference.

I went to the dealer.  I said, “SuperTrapp SE pipes are so quiet, I …” and then they ignored me because they already had all my money.  True story.

Since I happened to be at a dealer, I ended up admiring a nice Road King Classic with some V&H pipes.  I approached a trio of gray-haired men and asked if one knew the owner of that ride.  One guy told me it was his wife’s.

So this nice, elderly woman named Cathy, officer of the Jersey Shore HOG club, comes out and starts up the bike happily and I nod and tell them I have made an awful mistake.  I say, “would any of you like to have a laugh today? Because I have SuperTrapps!” and they followed me over to my ride and I started the bike up.

This kind, elderly woman handed me her card and told me to join HOG.  She told me to write a paragraph on the pipes and they’d put the ad in their flyer, and someone would surely buy them, since they’re so new and all.  One guy told me he really liked them, since they were so quiet.

D’OH!

I went into the dealership and overheard a salesguy tell some dude “I actually have a pair of rinehart slipons on a touring bike in the back, if you want to listen…”

Then I instinctively blurted out, “can I come?” and looked at the dude, and he shrugged because he doesn’t give a shit if I go into the shop in the back.  And that’s what I did.

He was telling the salesman he wanted V&H pipes, but the sales guy was saying rineharts are louder.  He started the bike and that nice growl was there, but it was too aggressive — these engines run fast, being fuel injected, and that’ll never be the same (obviously) as what we hear in our heads.  Still, the sound quality was there, and I would have been happy with those pipes.  $500 ish.

Later, I told my parts guy that the SuperTrapps were keeping me up at night.  He said to get V&H duals.  They’re $700, plus the fishtail endcaps are another $170, PLUS I’d have to get an EFI manager for another …. $400?  Shit yeah, that’s some cold cash just for a sound.

If I can sell the SuperTrapps and get any fair value (they’re brand new! under 600 miles!), that at least would cover part of the expense in upgrading.

On the other hand … I could swap the header and keep the SuperTrapps alright, fishtails and all.  The cat in the header is generally (asked the dealer too) the 2nd muffler which kills the noise.  A new header would cost maybe $300?

Then, of course, there’s buying an EFI manager that auto-tunes and just modifying the SuperTrapps until the sound is right.  Maybe remove some of the fiberglass wrap?  Not sure, but the cartridge-style glasspack is crazy restrictive.  Baffles out, the engine is louder than a jet plane.  Baffles in, it makes a purr.  I don’t think the header is the issue.  I think it’s the mufflers.

That’s where I’m at.  Saturday I had a good 2 hours of riding and another hour of chatting to some fine folks.  I’ll get there someday.

I rode the volusia on sunday.  Got to ride every week or two otherwise she’ll degrade, right?  What a fun, fun ride.  Feels more like a toy every week.  Makes me wonder how anyone could be afraid of it.

Attention to our regular readers (yes, all 2 of you…hopefully). We have a new header, handcrafted from the very depth of time and space using the best tools known to man, forged by only the most skilled crafters.

Ok, ok, I made it last night on Photoshop. Dont beleive me? You’re right (whoever you are). I made it on paint. I’ve never been good with graphics, but its a slight improvement of my old one. For those people who havent seen the old one, dont worry, you’re not missing out. At all. In fact, one day I might post it and we can all laugh (All 3 of us), but for now it brings ack memories of a too recent past (3 Days ago maybe?)

Tell Me what you think. I wouldnt change it in a million years. It might not be perfect but that is exactly what the site is about.

If you are any good with any picture tool PLEASE contact me!!!!

-Working For Beer-

I’m working on getting my header uploaded but am having some trouble . But once up it will be (in my opinion) one of the best headers I have ever made! Here is just a LITTLE SNEEK PEAK.

feeling somewhat happier with this design – I tend to writ smaller notes so having a narrower column seems to make sense. Graphically , I like the split image header (I’ve used one of my shots from Bristol). I’m getting to grips with WordPress too. not too happy about the way flickr is a) working b)displaying – I might get rid of it and put in a text box with an image in that.

After a long time of deciding whether to have my header made by someone I know or by me, I finally chose the latter. Since I wanted to have polariod effects on the subjects which will be included in this blog, I wanted to have full responsibility on how my blog will look like. But without any working experience with Photoshop, I strongly decided against it.

However, I made an online search [out of boredom] for some guides on how I can create a polariod effect to my photos using Photoshop. But this, led me to something MUCH better.

With Picnik.com, I no longer have to work from scratch since I only need to upload a photo and click a Polariod frame. That’s it. They don’t charge anything and will not even require you to register. Yey! No spam emails!

So here it is guys: finally my new header which will be up in a few minutes.

Am schimbat headerul si am sa postez si cantecul saptamanii The winner is Lady Gaga – Bad Romance

Introduction to Lamco Forest Products: the building material of a greener future!

For additional information, please contact Melanie Cauchon , US Sales Manager, Lamco Forest Products.

Kan i huske jeg havde det header-problem hvor jeg ville skifte header og i syntes den var fierce og jeg skulle skifte til den? Well jeg blev virkeligt glad for at se hvor mange engagerede læsere jeg faktisk har, men alligevel var der en masse ting ved den jeg ikke helt kunne sætte en finger på, og derfor blev den altså hemmeligt skrottet i mellemtiden .

Dog har jeg leget lidt med en ny header og jeg er kommet frem til den i ser ovenfor .. Det der er ved den header ovenfor er at den har bloggens navn i, så der ikke er nogen forvirring om hvad bloggen hedder, og så er der et billede af mig, så der ikke er nogen tvivl om hvem der sidder og skriver om killer heels og rå tasker, Dette hjælper også lidt i vejen af den renovation jeg har i gang, hvor jeg skal lære at være mere personlig ..

Jeg vil super gerne have at i siger jeres mening om den . Dvs. er det en keeper eller er det direkte tilbage til den gode gamle med skriften “Boohyouwhore” ..

Bloggens gamle header

Glæder mig til at høre fra jer, og endnu en 1000 tak fordi i sagde jeres mening sidst, i skal nemlig vide at jeg lytter til mine læsere og sætter pris på det hver eneste gang de kommentere .

Here are a few headers/logos for AJ Scrapbook Essentials

Original Design Header (Used at AJ Scrapbook Essentials BLOG)

Header Designed to match their colors at [AJ Scrapbook Essentials DOT Com]

Logo for their participation in the Reindeer Roundup (which you can learn about by visiting their BLOG)

Har laget ny header  i kveld – hva synes dere? Brukte Picasa - nokså artig i grunnen..

Formen på Hjemmefruen er fortiden bobbob, tror ikke jeg har fått ROSA krøllete hale men er ikke i form. Ingen i Hjemmefruens residens er i grunnen 100% for tida, eller jo…Lisa Sofie er det. Og Sebastian..ellers er vi slik på halv tolv resten av oss.

Så mens jeg pleier meg selv, pleier og blir pleiet kan jo dere gi meg innspill på ting  jeg kan blogge om Som Sebastian ville sagt det – det var en god plan!

Hello Poptropicans,

So, every day I’ve looked at the front page of my blog, and thought to myself, “Man, this blog would look a lot nicer with a header on top of it.” Well, I’ve decided to act. Well, kind of. I don’t really have the time to make my blog a header. So, internet slaves, do my work for me! (That was a joke, by the way.)

Fierce Sky’s Poptropica Blog is having a contest for YOU to design a header for the blog. Yes, YOU. Here are the rules and restrictions:

1. Your header must be YOUR OWN. This means that you can not, shall not, and will not copy a header from someone else. I am fine with you working with a friend on the header, but if you are, make sure to mention both of your names.

2. Header design: The header must contain the words “Fierce Sky’s Poptropica Blog” in it, along with a picture of my head. Because, I wouldn’t want my blog header to not have my own face on it. A picture of Fierce Sky is available on the right hand side of this blog. If you need a higher-res photo, or if you want me to change how I look for the header, please shoot me off an email. Email will be discussed later in detail.

3. Please follow WordPress’s guidelines for blog headers. This means no inappropriate images, bad words, or things like this. WordPress has a good article here for guidelines, and help designing it.

4. Once you complete your header, email the picture as an attachment to fiercesky@yahoo.com . The attached picture must be either a JPEG or PNG save file. In the email, please put “Header Contest” in the subject line, so I’ll know you’re entering the contest. Make sure in the actual email to include your name. This helps me to give credit to you making the picture. I strongly recommend it isn’t your real name. I would prefer that it would be your Poptropica name. (Fierce Sky, Popular Thunder, etc.)

5. All entries must be emailed to fiercesky@yahoo.com by December 31st, 2009, at 11:59 pm. Yes, this is a long time. I want to give you as much time as possible to make this the best header ever. That means that I expect your absolute best work, and nothing less. Keep in mind that this is going on a blog  that the whole internet can see, so please make it the best you can.

6. If you have any questions, comments, concerns, or inquiries, please email to fiercesky@yahoo.com whatever it is, just as long as “Contest Question” is in the subject line.

Remember, email fiercesky@yahoo.com for anything you need about the contest, or anything else you’d like to know from me.

Good luck on the headers, and I expect your best work! You are also free to post comments on this post, just please don’t share your work on here, I don’t want any copying.

-Fierce Sky

subject:  hi check out my new e mail

To check out the rest of my headers or request one, go here!

Black Grass Header

Black Grass Button

I’m not sure if I like the new header. What do you think? Here’s another option:

Option A

And another, ever-so-slightly different one:

Option B