Personalizar Barra de Tarefas estilo FdF

3 participantes

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

Tópico resolvido Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 09.06.16 14:56

Endereço do fórum: http://olimpiadaenem.forumeiros.com
Versão do fórum: PhpBB3

Descrição


Olá,
Quero personalizar a barra superior de meu fórum para que ela fique semelhante a do PdF, porém em cor mais escura, para combinar com o tema de meu fórum.
Para isso, a partir do estilo da barra do FdF preciso que sejam feitas as seguintes alterações:

1 - Escurecer a barra, a cor deve ser #2D3134;
2 - Remover botões de redes sociais;
3 - Escrever a palavra Forumeiros com a mesma fonte, porém na cor Branca;
4 - Escrever as informações como "Bem-vindo Usuário" e "Notificações" também com a cor Branca;
5 - As demais funções permanecem iguais.
Obs.: Não precisa se preocupar com a imagem do usuário que aparece nessa barra. Tenho um código funcionando, criado aqui no fdf, que faz essa função de inserir a foto.

Espero que seja possível atender meu pedido, aguardo ajuda!


Última edição por TreiMark em 04.07.16 3:06, editado 1 vez(es)
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro profissional

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por Sennior 09.06.16 16:07

Saudações!

Aceda à tua Folha de Estilo CSS:
Cpainel ->> Visualização ->> Gestão de imagens ->> Cores ->> Folha de Estilo CSS
Código:
#fa_toolbar {background-color: #2D3134!important;}span#fa_share {display: none!important;
}a#fa_service {color: #fff!important;font-family: sans-serif!important;font-size: 16px!important;font-weight: 700!important;text-transform: uppercase!important;}#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_welcome, #fa_right #fa_notifications {color: #FFFFFF!important;font-family: sans-serif!important;font-size: 13px!important;font-weight: 700!important;text-transform: uppercase;}

Resulta?
Até mais.
Sennior
Sennior

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16378
Pontos ativos : 20891

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 09.06.16 16:17

Funcionou parcialmente, o problema é que no meu fórum está a barra do tema padrão:
2D3134 - Personalizar Barra de Tarefas estilo FdF 20k2akg

Então precisaria primeiro modificar ela para ficar igual a do fdf fazendo as alterações solicitadas.

Ou seja, o que tenho é a barra padrão acima e quero chegar em algo igual a barra do fdf com todas aquelas alterações que descrevi no 1º tópico.

Obs.: O itens 1 e 2 estão satisfeito com o uso dessa parte do código:
#fa_toolbar {background-color: #2D3134!important;}span#fa_share {display: none!important;


Última edição por TreiMark em 09.06.16 16:21, editado 1 vez(es)
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por while 09.06.16 16:20

Olá amigo! Troque o código passado pelo Sennior por este:

Código:
#fa_toolbar {background-color:#2D3134!important;}
        #fa_share {display:none!important;}
        #fa_toolbar #fa_service {color: #fff!important;font-family: sans-serif;font-size: 16px;font-weight: 700;text-transform: uppercase;}
        #fa_right {color:#fff!important;}
       

Atenciosamente,
While.
while

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3260
Pontos ativos : 4758

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 09.06.16 16:24

While, leia minha última mensagem. O código não funcionou, é preciso modificar mais coisas...
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro profissional
  • 0

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por Sennior 09.06.16 16:28

Ah sim! Deseja como o FDF, só que com essas modificações né?
Troque por este código e veja como esta ficando:
Código:
#fa_toolbar {background-color: #2D3134!important;}span#fa_share {display: none!important;
}a#fa_service {color: #fff!important;font-family: sans-serif!important;font-size: 16px!important;font-weight: 700!important;text-transform: uppercase!important;}#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_welcome, #fa_right #fa_notifications {color: #FFFFFF!important;font-family: sans-serif!important;font-size: 13px!important;font-weight: 700!important;text-transform: uppercase;}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #fff!important;
    border-radius: 3px!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-left: -11px;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
    margin-right: 18px;
}
a#fa_hide {
    display: none!important;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
#fa_toolbar #fa_magnifier, #fa_toolbar #fa_fb, #fa_toolbar #fa_twitter, #fa_toolbar #fa_gp, #fa_toolbar #fa_mail, #fa_toolbar #fa_rss, #fa_toolbar #fa_hide, #fa_toolbar_hidden #fa_show {
    background-image: url('http://www.illiweb.com/fa/i/toolbar/toolbar.png');
    width: 30px;
    height: 30px;
    cursor: pointer;
}

#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
a#fa_magnifier {
    position: absolute;
    left: 22pc;
}


Até mais.
Sennior

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16378
Pontos ativos : 20891

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 09.06.16 23:26

Vou tentar explicar de modo mais detalhado.
2D3134 - Personalizar Barra de Tarefas estilo FdF Fldloz

Para começar, quero que aquele logo antigo seja substituído por esse em azul do canto esquerdo.
A palavra Forumeiros deve aparecer com esse mesmo estilo porém escrita em branca, pois o fundo será escuro, ao contrário do que acontece no fdf.
Além disso, quando passar o cursor sobre a palavra não deve aparecer o sublinhado, que insiste em aparecer um meu fórum.

A barra de busca deve ficar igual a do fdf apenas com o fundo escuro. Além disso, ela só deve aparecer por completo quando colocado o cursor sobre ela, assim como acontece aqui no fdf.

Em seguida,

Preciso que as informações abaixo estejam com uma "borda" em azul, assim como a figura abaixo, mas as escritas, que estão em azul devem ser brancas por causa do tema escuro.

2D3134 - Personalizar Barra de Tarefas estilo FdF 2ezppqs

Ao passar o cursor sobre esses "botões" eles devem ficar todo em azul, assim como acontece aqui no fdf.

Por fim a seta no canto direito. Ela precisa ficar ao contrário do que acontece aqui no fdf, ou seja, ser branca em condições normais mas ser preta com uma caixa em azul quando o cursos estiver sobre ela.


Com o último código que me passou o resultado é esse:
2D3134 - Personalizar Barra de Tarefas estilo FdF 148nc43

Encontrei um tópico em que o mesmo assunto foi debatido, mas o resultado obtido com o código fornecido lá também foi ruim. Mesmo assim, informo o link abaixo caso queira dar uma verificada. De repente pode ser uma boa maneira de conseguir resolver o meu problema... Não entendo muito de códigos, por isso deixo essa parte para os especialistas.

https://ajuda.forumeiros.com/t105096-barra-de-ferramentas?highlight=Barra+de+Ferramentas
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por while 10.06.16 3:04

Olá, troque o css passado pelo Sennior para este:
Código:
#fa_toolbar {background-color: #2D3134!important;}span#fa_share {display: none!important;
}a#fa_service {color: #fff!important;font-family: sans-serif!important;font-size: 16px!important;font-weight: 700!important;text-transform: uppercase!important;}#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_welcome, #fa_right #fa_notifications {color: #FFFFFF!important;font-family: sans-serif!important;font-size: 13px!important;font-weight: 700!important;text-transform: uppercase;}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-left: -11px;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
    color:#fff!important;
    margin-right: 18px;
}
a#fa_hide {
    display: none!important;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
#fa_toolbar #fa_magnifier, #fa_toolbar #fa_fb, #fa_toolbar #fa_twitter, #fa_toolbar #fa_gp, #fa_toolbar #fa_mail, #fa_toolbar #fa_rss, #fa_toolbar #fa_hide, #fa_toolbar_hidden #fa_show {
    background-image: url('http://www.illiweb.com/fa/i/toolbar/toolbar.png');
    width: 30px;
    height: 30px;
    cursor: pointer;
}
 
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
a#fa_magnifier {
    position: absolute;
    left: 22pc;
}
#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #3091C1!important;
    border-color: #3091C1!important;
    color: #FFF!important;
}
 

Resulta?
Atenciosamente,
While.
while

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3260
Pontos ativos : 4758

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 10.06.16 3:56

While, apenas os botões ficam em azul quando o cursos está sobre eles. O restante permanece sem as alterações que preciso.

2D3134 - Personalizar Barra de Tarefas estilo FdF 2wem6ms
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 12.06.16 4:00

#UP
Por favor, ajudem! Por favor
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 15.06.16 3:04

#UP Pensativo

O que há de errado?
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro profissional
  • 0

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por Sennior 16.06.16 17:29

Boas!

Vamos lá, coloque agora este código.
Depois me diga o que quer mudar:
Código:
#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}
#fa_search #fa_textarea {
    background: #39C!important;
    border: 1px solid #39C!important;
    border-radius: 3px 0 0 3px!important;
    color: #39C!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
        #fa_toolbar #fa_left #fa_service {
    text-decoration: none!important;
}

#fa_toolbar #fa_service {
    display: inline-block !important;
    visibility: visible !important;
    text-decoration: none !important;
}
#fa_icon, #fa_toolbar #fa_service {
    color: #666666;
}
#fa_toolbar a:link, #fa_toolbar a:visited, #fa_toolbar a:hover, #fa_toolbar a:active {
    border: 1px solid transparent;
    border: none;
}
#fa_toolbar :link, #fa_toolbar :visited {
    color: #FFFFFF;
    text-decoration: none;
}
#fa_service {
    color: #666!important;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
    display: inline-block !important;
    vertical-align: middle;
}#fa_share a {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_sha10.png) no-repeat 0 0 transparent!important;
    border-radius: 25px;
    height: 25px!important;
    margin: -2px 3px 0!important;
    width: 25px!important;
}#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
    color: #666666;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #39C!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}a#fa_hide {
    display: none!important;
}
#fa_search #fa_textarea:focus, #fa_search #fa_textarea:hover, #fa_search:hover #fa_textarea {
    background: #FFF!important;
    color: #444!important;
    outline: none;
    padding: 3px!important;
    width: 150px!important;
}

#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}
#fa_search #fa_textarea {
    background: #39C!important;
    border: 1px solid #39C!important;
    border-radius: 3px 0 0 3px!important;
    color: #39C!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}

Até mais.
Sennior
Sennior

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16378
Pontos ativos : 20891

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 17.06.16 0:47

Olá Sennior,
Obrigado por me responder, estava pensando que tinham desistido de meu problema.
A barra não ficou como desejo. Vejo que está sendo difícil solucionar os detalhes.
2D3134 - Personalizar Barra de Tarefas estilo FdF 2sajwwx
Por isso, tenho uma sugestão: Talvez seja melhor deixar a barra de meu fórum igual a do fdf e depois fazer as alterações necessárias.
O que você acha da ideia? Aguardo seus comentários.
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 19.06.16 13:19

#UP

Novidades! Usando o código abaixo obtive o efeito apresentado na imagem:

Código:
span#fa_share {
    display: none!important;
}

#fa_toolbar {background-color: #2D3134!important;}

#fa_icon {
    background-image: url(http://i21.servimg.com/u/f21/18/21/41/30/pa1110.png)!important;
}

#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #FFFFFF!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

a#fa_service {
  color: #fff!important;
  font-family: sans-serif!important;
  font-size: 15px!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
}

#fa_right #fa_menu ul, #fa_right.notification #fa_menu ul {
    display: none;
}

#fa_toolbar #fa_left #fa_service {
    text-decoration: none!important;
}

#fa_search {
    margin-left: 20px;
    height: 30px;
}
#fa_search {
    position: relative;
}
#fa_search form {
    margin: 0;
    padding: 0;
    display: inline;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}

#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}
#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #39C!important;
    border-color: #39C!important;
    color: #FFF!important;
}

#forum-search .inputbox, #search .inputbox, #search_menu .inputbox, .inputbox.desc_search_input {
    background: #FFF;
    border: 1px solid #39C;
    border-radius: 3px 0 0 3px;
    height: 22px;
    margin-right: -2px;
    padding: 3px;
}

2D3134 - Personalizar Barra de Tarefas estilo FdF 6hlxxl

Apenas duas coisas precisam ser feitas ainda:

Deixar a barra de pesquisa com o mesmo efeito da barra do fdf, assim como aquelas setas que aparecem no canto direito para exibir/ocultar a barra de ferramentas.

Aguardo ajuda...
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro profissional
  • 0

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por Sennior 22.06.16 17:10

Boas!

Coloque este código no inicio d eteu CSS:
Código:
#fa_toolbar #fa_magnifier, #fa_toolbar #fa_fb, #fa_toolbar #fa_twitter, #fa_toolbar #fa_gp, #fa_toolbar #fa_mail, #fa_toolbar #fa_rss, #fa_toolbar #fa_hide, #fa_toolbar_hidden #fa_show {
    background-image: url('http://www.illiweb.com/fa/i/toolbar/toolbar.png')!important;
    width: 21px!important;
    height: 23px!important;
    cursor: pointer!important;
    background-position-x: -13pc!important;
    background-position-y: -3px!important;
}

Até mais.
Sennior
Sennior

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16378
Pontos ativos : 20891

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 22.06.16 20:29

Sennior, o código não funcionou. Ficou mais estranho do que já estava...
2D3134 - Personalizar Barra de Tarefas estilo FdF 2di4tpf
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 26.06.16 1:58

#UP

Preciso que esse problema da seta no canto direito seja arrumado, em primeiro lugar.
2D3134 - Personalizar Barra de Tarefas estilo FdF 2dsrcau

Criei uma imagem com as setas adaptadas para o tema de meu fórum, talvez possa ajudar na solução do problema.
2D3134 - Personalizar Barra de Tarefas estilo FdF Qz2m2f

Aguardo ajuda!
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro profissional

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por Sennior 28.06.16 17:04

Mas ué... Essa função já existe em te fórum autor.
Ao clicar sobre a seta ela esconde a barra de notificações.

O que deseja realmente?
Até mais.
Sennior

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16378
Pontos ativos : 20891

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 30.06.16 0:51

A seta existe sim. Mas quero que quando o cursor fique sobre essa seta ela fique com uma borda azul, como na imagem da postagem anterior.
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro profissional
  • 0

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por Sennior 30.06.16 13:29

Boas!

Assim?
Código:
a#fa_hide:hover {
    background: url(http://i35.servimg.com/u/f35/19/24/82/70/th/positi10.png) no-repeat -31px 0 transparent!important;
    color: #FFF!important;
}

Até mais.
Sennior

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16378
Pontos ativos : 20891

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 01.07.16 14:49

Sennior, funcionou parcialmente:

2D3134 - Personalizar Barra de Tarefas estilo FdF Ieh0tl

Quando a barra não está exibida não aparece a borda quando o cursor está sobre a seta.

O código que estou usando no momento é o seguinte:

Código:
span#fa_share {
    display: none!important;
}

#fa_toolbar {background-color: #2D3134!important;}

#fa_icon {
    background-image: url(http://i21.servimg.com/u/f21/18/21/41/30/pa1110.png)!important;
}

#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.leftHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #FFFFFF!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

a#fa_service {
  color: #fff!important;
  font-family: sans-serif!important;
  font-size: 15px!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
}

#fa_right #fa_menu ul, #fa_right.notification #fa_menu ul {
    display: none;
}

#fa_toolbar #fa_left #fa_service {
    text-decoration: none!important;
}

#fa_search {
    margin-left: 20px;
    height: 30px;
}
#fa_search {
    position: relative;
}
#fa_search form {
    margin: 0;
    padding: 0;
    display: inline;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}

#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}
#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #39C!important;
    border-color: #39C!important;
    color: #FFF!important;
}
a#fa_hide:hover {
    background: url(http://i35.servimg.com/u/f35/19/24/82/70/th/positi10.png) no-repeat -31px 0 transparent!important;
    color: #FFF!important;
}
#fa_search #fa_textarea {
    background: #39C!important;
    border: 1px solid #39C!important;
    border-radius: 3px 0 0 3px!important;
    color: #39C!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
#fa_search #fa_textarea:focus, #fa_search #fa_textarea:hover, #fa_search:hover #fa_textarea {
    background: #FFF!important;
    color: #444!important;
    outline: none;
    padding: 3px!important;
    width: 150px!important;
}

#fa_toolbar a:hover {
    text-decoration: underline;
}
#fa_toolbar_hidden {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    margin-top: -60px;
    background-color: #FFFFFF;
    border-radius: 0px 0px 5px 5px;
    z-index: 999;
}
#fa_toolbar_hidden {
    border: 1px solid #CCC;
    border-radius: 0!important;
    border-right: 0;
    border-top: 0;
}
.fa_fix {
    position: fixed !important;
    position: absolute;
    top: 0;
    right: 0;
}
#fa_hide, #fa_show {
    background: url(http://i35.servimg.com/u/f35/19/24/82/70/th/positi10.png) no-repeat 0 0 transparent!important;
}
#fa_show {
    background-position: -60px 0!important;
}

Um outro problema que tenho observado é que quando um visitante acessa o fórum os botões "login" e "registre-se" deveriam ficar no mesmo estilo dos botões "bem-vindo user" e "notificações".

2D3134 - Personalizar Barra de Tarefas estilo FdF Wiuars

Teria como você fazer uma verificação disso também, por favor? Muito feliz
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por while 02.07.16 13:31

Olá, adicione mais esse código em sua folha de estilo css:
Código:
 a#fa_show:hover {
              background: url(http://i35.servimg.com/u/f35/19/24/82/70/th/positi10.png) no-repeat -90px 0 transparent!important;
    color: #FFF!important;
        }
            a.rightHeaderLink {
                    background-color: transparent!important;
                    border: 1px solid #39C!important;
                    border-radius: 3px!important;
                    color: #fff!important;
                    font-size: 11px!important;
                    font-weight: 700!important;
                    line-height: 22px!important;
                    margin-top: 3px!important;
                    padding: 0 6px!important;
                    text-decoration: none!important;
                    transition: 200ms;
            }
a#fa_hide.rightHeaderLink {border:none!important;line-height:0px!important;padding:0px!important;margin-top:0px!important;transition:none!important;}

Até mais.
while

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3260
Pontos ativos : 4758

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por TreiMark 04.07.16 3:05

Obrigado while! Problema resolvido, pode encerrar o tópico.
Sennior, agradeço pela ajuda que me deu.
Ambos foram muito importantes para a obtenção desse resultado.
Novamente estou muito satisfeito com o obtido. Venerar
TreiMark

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos ativos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar Barra de Tarefas estilo FdF

Mensagem por while 04.07.16 4:19

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

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3260
Pontos ativos : 4758

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


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