Fórum iBlue
[TUTORIAL] Toolbar personalizada Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Fórum iBlue
[TUTORIAL] Toolbar personalizada Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Somos ÚNICOS, somos o SEU fórum


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

T-Lord

1[TUTORIAL] Toolbar personalizada Empty [TUTORIAL] Toolbar personalizada Sex 18 Jan 2013 - 8:48

T-Lord
Administrador
[TUTORIAL] Toolbar personalizada Magic Toolbar personalizada


Neste
tutorial será ensinada a forma de colocar uma toolbar totalmente
personalizada no seu fórum. Assim não terá de recorrer a websites
externos para colocar algo deste tipo no seu fórum, poderá fazê-lo você
mesmo(a).



--> Lista de Tutoriais, Dicas e Astúcias <--
Toolbar personalizada



1º - Adicionar o código na folha CSS:
Nesta etapa apenas copie o código abaixo para a seguinte localização:

Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


(clique na imagem para aumentar)
[TUTORIAL] Toolbar personalizada 1114

Adicione o seguinte código:

#myfooter{
background-image: url(URL DA IMAGEM DA TOOLBAR);
background-repeat: no-repeat;
}
#myfooter img{
border: 0px;
margin-top: -12px;
padding-right: 20px;
}

Laranja: Aqui deverá colocar o link da imagem que deseja colocar como toolbar.
Verde: Neste local deverá definir se deseja que esse mesmo fundo se repita ou não (é aconselhável que não se repita)
Azul: Aqui poderá definir o valor da borda das imagens da sua toolbar. Coloque "0px" caso não deseje colocar nenhuma.
Indigo:
Esta propriedade serve para alterar a posição das imagens. Se estiverem
demasiadamente em baixo poderá colocá-las mais para cima através do
aumento do número desta propriedade.
Castanho:
Em vez de adicionar espaços manualmente entre cada imagem poderá
fazê-lo de uma só vez através duma só propriedade. Neste caso será
adicionada automaticamente uma distância de 20px entre as imagens.

[TUTORIAL] Toolbar personalizada Logo Disponível para versões Phpbb3 e Invision
2º - Configurar a toolbar
Para
que possamos visualizar a toolbar temos ainda que seguir um último
passo: colocar uma divisão específica para que a toolbar apareça sempre
ao fundo do fórum.

Em primeiro lugar devemos aceder à seguinte localização:Painel de Controle -> Visualização -> Homepage -> Geral.


(carregue na imagem para aumentar)
[TUTORIAL] Toolbar personalizada Img128
[TUTORIAL] Toolbar personalizada 110111[TUTORIAL] Toolbar personalizada 398853 Assunto da mensagem -
Representa o título da mensagem da home page, ele será sempre em maior
destaque do que os outros textos É permitido o uso de códigos HTML neste
campo.
[TUTORIAL] Toolbar personalizada 110210[TUTORIAL] Toolbar personalizada 398853 Conteúdo da mensagem -
Aqui fica a mensagem propriamente dita. Poderá utilizar códigos HTML e
BBCode. É importante lembrar também que esta mensagem será visível para
todos.

Depois de ter seguido o caminho indicado deverá colar o seguinte código:

40px; position: fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;" >



Informação sobre os ícones aqui

Vermelho: Nesta parte poderá alterar a altura da toolbar. Quanto maior forem os seus ícones maior deverá ser o valor desta propriedade.
Verde: Já nesta propriedade poderá definir a largura da sua toolbar.

Nota:
Estes são os únicos valores que deverá alterar no código fornecido
acima. Caso altere outros valores poderá comprometer o funcionamento
desta aplicação.

[TUTORIAL] Toolbar personalizada Logo Disponível para versão Phpbb2 e Punbb
3º - Configurar a toolbar nas versões PhpBB2 e PunBB (alteração de templates)
Para
que possamos visualizar a toolbar nas versões discriminadas em cima,
teremos forçosamente de alterar os templates das mesmas. No entanto o
processo é bastante simples. Terá de aceder a;
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


(clique na imagem para aumentar)
[TUTORIAL] Toolbar personalizada 1114

E adicionar o seguinte código:

#myfooter{
background-image: url(URL DA IMAGEM DA TOOLBAR);
background-repeat: no-repeat;
}
#myfooter img{
border: 0px;
margin-top: -12px;
padding-right: 20px;
}
Laranja: Aqui deverá colocar o link da imagem que deseja colocar como toolbar.
Verde: Neste local deverá definir se deseja que esse mesmo fundo se repita ou não (é aconselhável que não se repita)
Azul: Aqui poderá definir o valor da borda das imagens da sua toolbar. Coloque "0px" caso não deseje colocar nenhuma.
Indigo:
Esta propriedade serve para alterar a posição das imagens. Se estiverem
demasiadamente em baixo poderá colocá-las mais para cima através do
aumento do número desta propriedade.
Castanho:
Em vez de adicionar espaços manualmente entre cada imagem poderá
fazê-lo de uma só vez através duma só propriedade. Neste caso será
adicionada automaticamente uma distância de 20px entre as imagens.

Depois
de colocarmos este código teremos de proceder à modificação dos
templates. Para isso começamos por dirigir-nos à seguinte localização:

Painel de controle [TUTORIAL] Toolbar personalizada 633772 Visualização [TUTORIAL] Toolbar personalizada 633772 Templates [TUTORIAL] Toolbar personalizada 633772 Geral [TUTORIAL] Toolbar personalizada 337884 overall_footer


Expandir esta imagem Ver em tamanho real
[TUTORIAL] Toolbar personalizada Templa10

Comece por clicar em [TUTORIAL] Toolbar personalizada Editer(modificar) e entrará na parte de edição desse mesmo template.
[TUTORIAL] Toolbar personalizada 110111[TUTORIAL] Toolbar personalizada 398853

Deverá procurar esta parte do template. Encontra-se mesmo no fundo de
tudo, ou seja, basta mover completamente o scroll para baixo.
[TUTORIAL] Toolbar personalizada 110210[TUTORIAL] Toolbar personalizada 398853 Salvar Deverá carregar neste botão depois de alterar o conteúdo do template.

Como foi referido em cima deverá procurar a parte "
"
. Assim que a encontrar deverá colar acima dessas duas tags o seguinte:


40px; position: fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;" >



Informação sobre os ícones aqui


Vermelho: Nesta parte poderá alterar a altura da toolbar. Quanto maior forem os seus ícones maior deverá ser o valor desta propriedade.
Verde: Já nesta propriedade poderá definir a largura da sua toolbar.

Nota:
Estes são os únicos valores que deverá alterar no código fornecido
acima. Caso altere outros valores poderá comprometer o funcionamento
desta aplicação. Além do mais não se preocupe caso fique com algo
semelhante a "


"
, é normal. Se colou o código acima de "" fez tudo bem.

Por fim, depois de salvar, irá voltar à parte dos templates. Clique em [TUTORIAL] Toolbar personalizada Ajouter
para publicar o template. Caso tenha seguido todos os passos acima
descritos a sua toolbar deverá estar a funcionar corretamente.

4º - Informações e ajudas suplementares

Para ajudá-lo com a sua toolbar fornecemos-lhe ainda algumas imagens que poderá utilizar. Veja os links abaixo:


[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


  • Pode ser outras imagens?:
    Caso deseje uma imagem diferente e não saiba como fazê-la poderá pedir-nos auxílio na área de Criações gráficas sendo que este tipo de trabalho está submetido à categoria de "outros"
  • Resultado:


    [TUTORIAL] Toolbar personalizada Result13

http://www.zonetoony.net/
MakyBory

2[TUTORIAL] Toolbar personalizada Empty Re: [TUTORIAL] Toolbar personalizada Dom 24 Fev 2013 - 13:04

MakyBory
Membro Lendário
Excelente Tutorial!

http://toon.forumfacil.net/
T-Lord

3[TUTORIAL] Toolbar personalizada Empty Re: [TUTORIAL] Toolbar personalizada Sex 3 maio 2013 - 13:27

T-Lord
Administrador
Obrigada por comentar(em)!

http://www.zonetoony.net/
Conteúdo patrocinado

4[TUTORIAL] Toolbar personalizada Empty Re: [TUTORIAL] Toolbar personalizada


Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos