Icones flutuantes na lateral do fórum

[IsmaelS.]

Detalhes da questão

Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá!

Não sei se tem problema em pedir isto, mas queria uns botões como este fórum:


Mas apenas queria o de voltar ao topo,ao fundo da página,dar refresh, fórum em que vi:^
http://hilfe.forumieren.com/

[Luiz]

Olá, use este código com investimento em todas as páginas:

Código:

$(function () {

  $('head').append('<style>.fa-buttons-german {position:fixed;bottom:100px;font-size:20px;right:5px;}.fa-buttons-german a {display:block;margin:10px 0px;color:#444;}</style>');

  $('body').append('<div class="fa-buttons-german"><a href="javascript:void(0)" id="fa-top-btn" class="fa-btn-german"><i class="fa fa-arrow-up" aria-hidden="true"></i></a><a href="javascript:location.reload()" id="fa-ref-btn" class="fa-btn-german"><i class="fa fa-refresh" aria-hidden="true"></i></a><a href="#bottom-forum" id="fa-bottom-btn" class="fa-btn-german"><i class="fa fa-arrow-down" aria-hidden="true"></i></a></div><div id="bottom-forum"></div>');

  $('#fa-top-btn').on('click', function () {
      $('html, body').stop().animate({ scrollTop: 0 }, 'slow');
  });

});

Até.

[IsmaelS.]

Não resultou.

[while]

Olá autor, boa noite.

Coloque na mensagem da pagina inicial isto ou num widget:

Código:

<div class="lateral_navigation">
   <a href="#top" title="Subir ao topo"></a><br /><a href="http://master-publicitario.forumeiros.com/forum" title="Ir para a pagina principal"></a><br /><a href="javascript:location.reload()" title="Refresh"></a>
</div>
<style>
.lateral_navigation a {
    color: #666666;
    display: inline-block;
    height: 24px;
    margin-bottom: 3px;
    padding: 2px;
    width: 24px;
}
.lateral_navigation {
    bottom: 10%;
    font-family: FontAwesome;
    font-size: 22px;
    font-weight: 400;
    position: fixed;
    right: 3px;
    text-align: center;
    z-index: 100;
}
</style>

Só não consegui o de ir ao final do fórum [...]

Até mais.

[IsmaelS.]

Não consegue mesmo o de ir ao final do fórum dava jeito :/

[while]

Vamo ver né, troque o código por este:

Código:

<div class="lateral_navigation">
  <a href="#top" title="Subir ao topo"></a><br /><a href="http://master-publicitario.forumeiros.com/forum" title="Ir para a pagina principal"></a><br /><a href="javascript:location.reload()" title="Refresh"></a><a title="Descer ao fim" href="#bottom"></a>
</div>
<style>
.lateral_navigation a {
    color: #666666;
    display: inline-block;
    height: 24px;
    margin-bottom: 3px;
    padding: 2px;
    width: 24px;
}
.lateral_navigation {
    bottom: 10%;
    font-family: FontAwesome;
    font-size: 22px;
    font-weight: 400;
    position: fixed;
    right: 3px;
    text-align: center;
    z-index: 100;
}
</style>

[IsmaelS.]

Resultou mas ficou ao lado do botão "F5" queria também remover a casa, só deixar a seta para cima/baixo e o refresh.

[while]

Foi total falha minha, enfim, troque por este e estará perfeito:

Código:

<div class="lateral_navigation">
  <a href="#top" title="Subir ao topo"></a><br /><a href="javascript:location.reload()" title="Refresh"></a><br /><a title="Descer ao fim" href="#bottom"></a>
</div>
<style>
.lateral_navigation a {
    color: #666666;
    display: inline-block;
    height: 24px;
    margin-bottom: 3px;
    padding: 2px;
    width: 24px;
}
.lateral_navigation {
    bottom: 10%;
    font-family: FontAwesome;
    font-size: 22px;
    font-weight: 400;
    position: fixed;
    right: 3px;
    text-align: center;
    z-index: 100;
}
</style>

[IsmaelS.]

Resultou, poderia só agora deixar um efeito hover ao passar o mouse nos botões?

[while]

Claro, adicione esse código em sua folha de estilo css:

Código:

.lateral_navigation a:hover {-webkit-transition: all 3s ease-in-out;-moz-transition: all 3s ease-in-out;-o-transition: all 3s ease-in-out;-webkit-transform: rotate(1800deg) scale(2);-moz-transform: rotate(1800deg) scale(2);-o-transform: rotate(1800deg) scale(2);}

Que tal? qualquer coisa basta você adicionar novas propriedades.

Até mais.

[IsmaelS.]

Não era efeito queria antes ao passar o mouse fica-se de outra cor, desculpe não ter especificado :/

[while]

Ok, troque o código por este:

Código:

.lateral_navigation a:hover {color: red;}

Até mais.

[IsmaelS.]

Resolvido obrigado.

[while]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".