Ícones no cabeçalho

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Ícones no cabeçalho

Mensagem por camposrica em 28/05/11, 02:06 pm

Qual é sua questão:
Olá muito Boa Tarde,

Eu gostaria que me ajuda-sse numa pequena coisa ..
Eu tenho este código todo preparado.
Só que agora eu gostaria por aonde esta o arredondamento a vermelho .
Vou mostrar a imagem.

Cumps ;D


<div style="position: absolute; top: 50px; left: 1050px;">
<a href="http://www.facebook.com/pages/F%C3%B3rum-TechSoft/173425006047783" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" alt="" width="40" border="0" height="40"></div><div style="position: absolute; top: 50px; left: 1099px;">
<a href="http://www.myspace.com/techsoft.forumeiros#!/techsoft.forumeiros" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-myspace.png" alt="" width="40" border="0" height="40"></div><div style="position: absolute; top: 50px; left: 1199px;">
<a href="http://twitter.com/#!/TechTechsoft" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png" alt="" width="40" border="0" height="40"></div><div style="position: absolute; top: 50px; left: 1299px;">
<a href="http://techsoftpt.blogspot.com/" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-blogger.png" alt="" width="40" border="0" height="40"></div>





Que medidas você tomou para corrigir o problema:
..

Apresente-nos imagens do problema (se necessário):
avatar

camposrica
Nível 8

Masculino
Inscrito dia : 01/01/2010
Mensagens : 148
Pontos Ativos : 237

Ver perfil do usuário http://techsoft.livreforum.com/

Resolvido Re: Ícones no cabeçalho

Mensagem por Byte em 28/05/11, 09:29 pm

Olá camposrica!

Não sei se entendi direito a sua dúvida...
Você gostaria de juntar todos os ícones e colocar no canto superior direito do fórum?

Até logo camposrica!
Byte
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

Ver perfil do usuário http://gabionicle.forum.st/

Resolvido Re: Ícones no cabeçalho

Mensagem por Luciano98 em 28/05/11, 10:33 pm

Olá!

Codigo:
Código:
;jQuery(document).ready(function(){jQuery("#logo").after("<div style=position:absolute;top:50px;left:1050px><a href=http://facebook.com/pages/F%C3%B3rum-TechSoft/173425006047783 target=_blank><img src=http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png alt= width=40 border=0 height=40></div><div style=position:absolute;top:50px;left:1099px><a href=http://myspace.com/techsoft.forumeiros#!/techsoft.forumeiros target=_blank><img src=http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-myspace.png alt= width=40 border=0 height=40></div><div style=position:absolute;top:50px;left:1199px><a href=http://twitter.com/#!/TechTechsoft target=_blank><img src=http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png alt= width=40 border=0 height=40></div><div style=position:absolute;top:50px;left:1299px><a href=http://techsoftpt.blogspot.com target=_blank><img src=http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-blogger.png alt= width=40 border=0 height=40></div>")});


Não sabe onde utilizar o código?
Spoiler:
1º - Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.


Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).




- Inserir o código para que funcione em todas as páginas do fórum:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.

Para adicionar o código aceda à:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.


O código será:
<script src="ENDERECO-DA-PAGINA-HTML"></script>
Por exemplo, no FdF:
<script src="http://ajuda.forumeiros.com/h1-codigo"></script>

Até mais.
Luciano98
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Ícones no cabeçalho

Mensagem por camposrica em 29/05/11, 06:42 am

@Byte escreveu:Olá camposrica!

Não sei se entendi direito a sua dúvida...
Você gostaria de juntar todos os ícones e colocar no canto superior direito do fórum?

Até logo camposrica!
Byte

Sim é isso mesmo Byte Muito feliz
avatar

camposrica
Nível 8

Masculino
Inscrito dia : 01/01/2010
Mensagens : 148
Pontos Ativos : 237

Ver perfil do usuário http://techsoft.livreforum.com/

Resolvido Re: Ícones no cabeçalho

Mensagem por camposrica em 29/05/11, 06:44 am

@Luciano98 escreveu:Olá!

Codigo:
Código:
;jQuery(document).ready(function(){jQuery("#logo").after("<div style=position:absolute;top:50px;left:1050px><a href=http://facebook.com/pages/F%C3%B3rum-TechSoft/173425006047783 target=_blank><img src=http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png alt= width=40 border=0 height=40></div><div style=position:absolute;top:50px;left:1099px><a href=http://myspace.com/techsoft.forumeiros#!/techsoft.forumeiros target=_blank><img src=http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-myspace.png alt= width=40 border=0 height=40></div><div style=position:absolute;top:50px;left:1199px><a href=http://twitter.com/#!/TechTechsoft target=_blank><img src=http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png alt= width=40 border=0 height=40></div><div style=position:absolute;top:50px;left:1299px><a href=http://techsoftpt.blogspot.com target=_blank><img src=http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-blogger.png alt= width=40 border=0 height=40></div>")});


Não sabe onde utilizar o código?
Spoiler:
1º - Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.


Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).




- Inserir o código para que funcione em todas as páginas do fórum:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.

Para adicionar o código aceda à:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.


O código será:
<script src="ENDERECO-DA-PAGINA-HTML"></script>
Por exemplo, no FdF:
<script src="http://ajuda.forumeiros.com/h1-codigo"></script>

Até mais.
Luciano98

Olá Luciano98
Fiz tudo direitinho e ficou igual os icons separados,e não ficam como quero no cantinho como mostrei no arredondamento vermelho daquele print do fórum.
Fica aqui o link se precisar para ver alguma coisa: http://techsoft.livreforum.com/

Cumps zen
avatar

camposrica
Nível 8

Masculino
Inscrito dia : 01/01/2010
Mensagens : 148
Pontos Ativos : 237

Ver perfil do usuário http://techsoft.livreforum.com/

Resolvido Re: Ícones no cabeçalho

Mensagem por Byte em 29/05/11, 05:16 pm

Olá Camposrica!

Evite o DoublePost nos tópicos de ajuda, sempre edite a última mensagem e coloque no final o conteúdo da outra mensagem. Piscada

Você gostaria de todos os espaços entre os ícones fossem como os que estão dentro do retângulo que fez?

Só mais uma coisa... O código que fez está posicionando os elementos da esquerda para a direita, sendo que recomendaria você posicionar da direita para a esquerda, pois assim, independente de resolução da tela do internauta, os ícones ficariam no canto direito do fórum.

Se for isso que queria, aqui está o código com os erros HTML corrigidos, a posição da direita para a esquerda, e os espaços entre os ícones os mesmos.

O código ajeitado, e organizado(Somente irá usar este em caso de modificações futuras):
Spoiler:
Código:
<div style="position:absolute;top:50px;right:310px">
    <a href="http://facebook.com/pages/F%C3%B3rum-TechSoft/173425006047783" target="_blank">
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" alt="" width="40" border="0" height="40" />
    </a>
</div>
       
<div style="position:absolute;top:50px;right:210px">
    <a href="http://myspace.com/techsoft.forumeiros#!/techsoft.forumeiros" target="_blank">
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-myspace.png" alt="" width="40" border="0" height="40" />
    </a>
</div>


<div style="position:absolute;top:50px;right:110px">
    <a href="http://twitter.com/#!/TechTechsoft" target="_blank">
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png" alt="" width="40" border="0" height="40" />
    </a>
</div>


<div style="position:absolute;top:50px;right:10px">
    <a href="http://techsoftpt.blogspot.com" target="_blank">
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-blogger.png" alt="" width="40" border="0" height="40">
    </a>
</div>

O código pronto para pôr aonde foi especificado pelo nosso amigo Luciano98 ^^ :
Código:
jQuery(document).ready(function(){
    jQuery("#logo").after('<div style="position:absolute;top:50px;right:310px"><a href="http://facebook.com/pages/F%C3%B3rum-TechSoft/173425006047783" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" alt="" width="40" border="0" height="40" /></a></div><div style="position:absolute;top:50px;right:210px"><a href="http://myspace.com/techsoft.forumeiros#!/techsoft.forumeiros" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-myspace.png" alt="" width="40" border="0" height="40" /></a></div><div style="position:absolute;top:50px;right:110px"><a href="http://twitter.com/#!/TechTechsoft" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png" alt="" width="40" border="0" height="40" /></a></div><div style="position:absolute;top:50px;right:10px"><a href="http://techsoftpt.blogspot.com" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-blogger.png" alt="" width="40" border="0" height="40"></a></div>')
});

Espero ter lhe ajudado Camposrica!
Byte
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

Ver perfil do usuário http://gabionicle.forum.st/

Resolvido Re: Ícones no cabeçalho

Mensagem por camposrica em 29/05/11, 05:31 pm

Olá ,
os icons já estão no sitio aonde quero , como pode ver :
http://techsoft.livreforum.com/
Mas só queria juntar mais os icons uns aos outros , para não ficar com muita distância.
Cumps zen
avatar

camposrica
Nível 8

Masculino
Inscrito dia : 01/01/2010
Mensagens : 148
Pontos Ativos : 237

Ver perfil do usuário http://techsoft.livreforum.com/

Resolvido Re: Ícones no cabeçalho

Mensagem por Byte em 29/05/11, 06:08 pm

Olá Camposrica!

@camposrica escreveu:[...]Mas só queria juntar mais os icons uns aos outros , para não ficar com muita distância.

Um problema é que eu não sei essa distância para poder colocar no código..
Eu tentei dar um chute na distância, e aproximei os ícones agora para que fiquem com distância de 12px em 12px.

Aqui o código organizado(Para futuras modificações):
Spoiler:
Código:
<div style="position:absolute;top:50px;right:190px">
    <a href="http://facebook.com/pages/F%C3%B3rum-TechSoft/173425006047783" target="_blank">
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" alt="" width="40" border="0" height="40" />
    </a>
</div>
       
<div style="position:absolute;top:50px;right:130px">
    <a href="http://myspace.com/techsoft.forumeiros#!/techsoft.forumeiros" target="_blank">
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-myspace.png" alt="" width="40" border="0" height="40" />
    </a>
</div>


<div style="position:absolute;top:50px;right:70px">
    <a href="http://twitter.com/#!/TechTechsoft" target="_blank">
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png" alt="" width="40" border="0" height="40" />
    </a>
</div>


<div style="position:absolute;top:50px;right:10px">
    <a href="http://techsoftpt.blogspot.com" target="_blank">
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-blogger.png" alt="" width="40" border="0" height="40">
    </a>
</div>


Aqui o código final a ser colocado no lugar indicado pelo Luciano98:
Código:
jQuery(document).ready(function(){
    jQuery("#logo").after('<div style="position:absolute;top:50px;right:190px"><a href="http://facebook.com/pages/F%C3%B3rum-TechSoft/173425006047783" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" alt="" width="40" border="0" height="40" /></a></div><div style="position:absolute;top:50px;right:130px"><a href="http://myspace.com/techsoft.forumeiros#!/techsoft.forumeiros" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-myspace.png" alt="" width="40" border="0" height="40" /></a></div><div style="position:absolute;top:50px;right:70px"><a href="http://twitter.com/#!/TechTechsoft" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png" alt="" width="40" border="0" height="40" /></a></div><div style="position:absolute;top:50px;right:10px"><a href="http://techsoftpt.blogspot.com" target="_blank"><img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-blogger.png" alt="" width="40" border="0" height="40"></a></div>')
});

Veja se ficou como queria ^^

Espero estar lhe ajudando Camposrica!
Byte
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

Ver perfil do usuário http://gabionicle.forum.st/

Resolvido Re: Ícones no cabeçalho

Mensagem por camposrica em 29/05/11, 06:11 pm

Agora sim , ficou como queria ..

Só lhe pesso se me pode ajudar nos seguintes tópicos ..

http://ajuda.forumeiros.com/t41681-avatares-etc

http://ajuda.forumeiros.com/t41679-caixa-do-menu-buscar


Obrigado ..
avatar

camposrica
Nível 8

Masculino
Inscrito dia : 01/01/2010
Mensagens : 148
Pontos Ativos : 237

Ver perfil do usuário http://techsoft.livreforum.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum