Barra de ferramentas estilo fdf
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Barra de ferramentas estilo fdf
Detalhes da questão
Endereço do fórum: http://rhc-forumteste.forumeiros.com
Versão do fórum: PhpBB2
Descrição
Eu gostaria que minha barra de ferramentas ficasse no estilo da barra aqui do FdF, em relação ao design dos ícones e a animação da barra de pesquisa, que ao ter o mouse sobre ela, a barra se expande. E queria também que fosse deixado apenas os ícones do Facebook e Twitter.
Re: Barra de ferramentas estilo fdf
Olá, adicione esse código em sua folha de estilo css:
Até mais.
- Código:
#fa_toolbar {
left: 0px;
height: 30px;
background-color: #FFFFFF!importan;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
z-index: 999;
border-bottom: 3px solid #3091C1;
margin: auto;
}
.fa_toolbar_XL_Sized {
min-width: 980px;
width: 100%;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
color: #3091C1!important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications {
background-color: transparent!important;
border: 1px solid #3091C1!important;
border-radius: 3px!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: all 200ms ease 0;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
display: inline-block !important;
vertical-align: middle;
}
#fa_menu {
display: inline-block;
}
#fa_right {
float: right;
font-size: 14px;
padding-right: 10px;
}
#fa_search #fa_textarea {
background: #3091C1 none repeat scroll 0 0!important;
border: 1px solid #3091C1!important;
border-radius: 3px 0 0 3px!important;
color: #3091C1!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: ease;
transition-duration: 1.5s;
width: 0!important;
margin-top: 3px;
}
#fa_search #fa_magnifier {
background: #3091C1 url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat scroll 50% 50%!important;
border: 1px solid #3091C1;
border-radius: 0 3px 3px 0;
height: 22px!important;
right: 0;
top: 3px;
width: 22px!important;
position: absolute;
background-position: -30px 0px;
}
#fa_toolbar #fa_service {
display: inline-block !important;
visibility: visible !important;
text-decoration: none !important;
}
#fa_icon, #fa_toolbar #fa_service {
color: #3091C1!important;
}
#fa_toolbar a:link, #fa_toolbar a:visited, #fa_toolbar a:hover, #fa_toolbar a:active {
border: 1px solid transparent;
border: none;
}
#fa_service {
font-family: "Trebuchet MS",Arial,Verdana,sans-serif;
font-size: 16px;
font-weight: 700;
}
#fa_search {
margin-left: 20px;
height: 30px;
position: relative;
}
#fa_right a.rightHeaderLink {color:#3091C1!important;}
#fa_hide {display:none!important}
#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;
}
a#fa_gp , #fa_mail, a#fa_rss {display:none!important;}
#fa_menulist {
display: none;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px 10px;
background-color: #FFFFFF;
min-width: 175px;
width: auto;
border: 1px solid #333333;
line-height: 32px;
border-top: 0px solid #FFFFFF;
z-index: 999;
}
#fa_menulist, #fa_toolbar #fa_right #notif_list {
background: #FFF none repeat scroll 0 0!important;
border: 1px solid #DDD!important;
border-radius: 3px;
box-shadow: 0 6px 12px rgba(0,0,0,0.176);
margin-top: 18px!important;
}
#fa_menulist::before, #fa_toolbar #fa_right #notif_list::before {
content: url("http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png");
position: absolute;
right: 10%;
top: -10px;
}
#fa_search #fa_textarea:focus,#fa_search #fa_textarea:hover,#fa_search:hover #fa_textarea{background:#FFF none repeat scroll 0 0!important;color:#444!important;outline:medium none;padding:3px!important;transition:ease;transition-duration:.5s;width:150px!important}
Até mais.
Re: Barra de ferramentas estilo fdf
Tem como alterar os ícones pelos que estão na barra daqui do FdF, os das redes sociais e o da logo do Forumeiros. A logo que está lá é mais antiga. E eu queria que não tivesse o nome "Compartilhe", antes dos ícones das redes sociais.
Re: Barra de ferramentas estilo fdf
Olá, troque por este:
- Código:
#fa_toolbar {
left: 0px;
height: 30px;
background-color: #FFFFFF!importan;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
z-index: 999;
border-bottom: 3px solid #3091C1;
margin: auto;
}
.fa_toolbar_XL_Sized {
min-width: 980px;
width: 100%;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
color: #3091C1!important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications {
background-color: transparent!important;
border: 1px solid #3091C1!important;
border-radius: 3px!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: all 200ms ease 0;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
display: inline-block !important;
vertical-align: middle;
}
#fa_menu {
display: inline-block;
}
#fa_right {
float: right;
font-size: 14px;
padding-right: 10px;
}
#fa_search #fa_textarea {
background: #3091C1 none repeat scroll 0 0!important;
border: 1px solid #3091C1!important;
border-radius: 3px 0 0 3px!important;
color: #3091C1!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: ease;
transition-duration: 1.5s;
width: 0!important;
margin-top: 3px;
}
#fa_search #fa_magnifier {
background: #3091C1 url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat scroll 50% 50%!important;
border: 1px solid #3091C1;
border-radius: 0 3px 3px 0;
height: 22px!important;
right: 0;
top: 3px;
width: 22px!important;
position: absolute;
background-position: -30px 0px;
}
#fa_toolbar #fa_service {
display: inline-block !important;
visibility: visible !important;
text-decoration: none !important;
}
#fa_icon, #fa_toolbar #fa_service {
color: #3091C1!important;
}
#fa_toolbar a:link, #fa_toolbar a:visited, #fa_toolbar a:hover, #fa_toolbar a:active {
border: 1px solid transparent;
border: none;
}
#fa_service {
font-family: "Trebuchet MS",Arial,Verdana,sans-serif;
font-size: 16px;
font-weight: 700;
}
#fa_search {
margin-left: 20px;
height: 30px;
position: relative;
}
#fa_right a.rightHeaderLink {color:#3091C1!important;}
#fa_hide {display:none!important}
#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;
}
a#fa_gp , #fa_mail, a#fa_rss {display:none!important;}
#fa_menulist {
display: none;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px 10px;
background-color: #FFFFFF;
min-width: 175px;
width: auto;
border: 1px solid #333333;
line-height: 32px;
border-top: 0px solid #FFFFFF;
z-index: 999;
}
#fa_menulist, #fa_toolbar #fa_right #notif_list {
background: #FFF none repeat scroll 0 0!important;
border: 1px solid #DDD!important;
border-radius: 3px;
box-shadow: 0 6px 12px rgba(0,0,0,0.176);
margin-top: 18px!important;
}
#fa_share_text {display:none;}
#fa_icon {background-image: url(http://i21.servimg.com/u/f21/18/21/41/30/pa1110.png)!important;}
#fa_share a {
background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_sha10.png) no-repeat 0 0 transparent!important;}
a#fa_fb {
background-position: -50px 0!important;
}
#fa_menulist::before, #fa_toolbar #fa_right #notif_list::before {
content: url("http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png");
position: absolute;
right: 10%;
top: -10px;
}
#fa_search #fa_textarea:focus,#fa_search #fa_textarea:hover,#fa_search:hover #fa_textarea{background:#FFF none repeat scroll 0 0!important;color:#444!important;outline:medium none;padding:3px!important;transition:ease;transition-duration:.5s;width:150px!important}
Re: Barra de ferramentas estilo fdf
Tem como me fornecer o último código que você enviou, mas sem os botões das redes sociais. Sem nenhum mesmo. Essa parte não funcionou como eu desejava, então, prefiro que fique sem os botões. É possível?
Re: Barra de ferramentas estilo fdf
Como desejar... altere o código por este:
Até mais.
- Código:
#fa_toolbar {
left: 0px;
height: 30px;
background-color: #FFFFFF!importan;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
z-index: 999;
border-bottom: 3px solid #3091C1;
margin: auto;
}
.fa_toolbar_XL_Sized {
min-width: 980px;
width: 100%;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
color: #3091C1!important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications {
background-color: transparent!important;
border: 1px solid #3091C1!important;
border-radius: 3px!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: all 200ms ease 0;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
display: inline-block !important;
vertical-align: middle;
}
#fa_menu {
display: inline-block;
}
#fa_right {
float: right;
font-size: 14px;
padding-right: 10px;
}
#fa_search #fa_textarea {
background: #3091C1 none repeat scroll 0 0!important;
border: 1px solid #3091C1!important;
border-radius: 3px 0 0 3px!important;
color: #3091C1!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: ease;
transition-duration: 1.5s;
width: 0!important;
margin-top: 3px;
}
#fa_search #fa_magnifier {
background: #3091C1 url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat scroll 50% 50%!important;
border: 1px solid #3091C1;
border-radius: 0 3px 3px 0;
height: 22px!important;
right: 0;
top: 3px;
width: 22px!important;
position: absolute;
background-position: -30px 0px;
}
#fa_toolbar #fa_service {
display: inline-block !important;
visibility: visible !important;
text-decoration: none !important;
}
#fa_icon, #fa_toolbar #fa_service {
color: #3091C1!important;
}
#fa_toolbar a:link, #fa_toolbar a:visited, #fa_toolbar a:hover, #fa_toolbar a:active {
border: 1px solid transparent;
border: none;
}
#fa_service {
font-family: "Trebuchet MS",Arial,Verdana,sans-serif;
font-size: 16px;
font-weight: 700;
}
#fa_search {
margin-left: 20px;
height: 30px;
position: relative;
}
#fa_right a.rightHeaderLink {color:#3091C1!important;}
#fa_hide {display:none!important}
#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;
}
a#fa_gp , #fa_mail, a#fa_rss {display:none!important;}
#fa_menulist {
display: none;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px 10px;
background-color: #FFFFFF;
min-width: 175px;
width: auto;
border: 1px solid #333333;
line-height: 32px;
border-top: 0px solid #FFFFFF;
z-index: 999;
}
#fa_menulist, #fa_toolbar #fa_right #notif_list {
background: #FFF none repeat scroll 0 0!important;
border: 1px solid #DDD!important;
border-radius: 3px;
box-shadow: 0 6px 12px rgba(0,0,0,0.176);
margin-top: 18px!important;
}
#fa_share_text , #fa_share {display:none;}
#fa_icon {background-image: url(http://i21.servimg.com/u/f21/18/21/41/30/pa1110.png)!important;}
#fa_share a {
background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_sha10.png) no-repeat 0 0 transparent!important;}
a#fa_fb {
background-position: -50px 0!important;
}
#fa_menulist::before, #fa_toolbar #fa_right #notif_list::before {
content: url("http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png");
position: absolute;
right: 10%;
top: -10px;
}
#fa_search #fa_textarea:focus,#fa_search #fa_textarea:hover,#fa_search:hover #fa_textarea{background:#FFF none repeat scroll 0 0!important;color:#444!important;outline:medium none;padding:3px!important;transition:ease;transition-duration:.5s;width:150px!important}
Até mais.
Re: Barra de ferramentas estilo fdf
While, infelizmente, os botões das redes sociais ainda estão aparecendo...
Re: Barra de ferramentas estilo fdf
Boa noite,
troque o código por esse;
Até mais.
troque o código por esse;
- Código:
#fa_toolbar {
left: 0px;
height: 30px;
background-color: #FFFFFF!importan;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
z-index: 999;
border-bottom: 3px solid #3091C1;
margin: auto;
}
.fa_toolbar_XL_Sized {
min-width: 980px;
width: 100%;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
color: #3091C1!important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications {
background-color: transparent!important;
border: 1px solid #3091C1!important;
border-radius: 3px!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: all 200ms ease 0;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
display: inline-block !important;
vertical-align: middle;
}
#fa_menu {
display: inline-block;
}
#fa_right {
float: right;
font-size: 14px;
padding-right: 10px;
}
#fa_search #fa_textarea {
background: #3091C1 none repeat scroll 0 0!important;
border: 1px solid #3091C1!important;
border-radius: 3px 0 0 3px!important;
color: #3091C1!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: ease;
transition-duration: 1.5s;
width: 0!important;
margin-top: 3px;
}
#fa_search #fa_magnifier {
background: #3091C1 url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat scroll 50% 50%!important;
border: 1px solid #3091C1;
border-radius: 0 3px 3px 0;
height: 22px!important;
right: 0;
top: 3px;
width: 22px!important;
position: absolute;
background-position: -30px 0px;
}
#fa_toolbar #fa_service {
display: inline-block !important;
visibility: visible !important;
text-decoration: none !important;
}
#fa_icon, #fa_toolbar #fa_service {
color: #3091C1!important;
}
#fa_toolbar a:link, #fa_toolbar a:visited, #fa_toolbar a:hover, #fa_toolbar a:active {
border: 1px solid transparent;
border: none;
}
#fa_service {
font-family: "Trebuchet MS",Arial,Verdana,sans-serif;
font-size: 16px;
font-weight: 700;
}
#fa_search {
margin-left: 20px;
height: 30px;
position: relative;
}
#fa_right a.rightHeaderLink {color:#3091C1!important;}
#fa_hide {display:none!important}
#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;
}
a#fa_gp , #fa_mail, a#fa_rss {display:none!important;}
#fa_menulist {
display: none;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px 10px;
background-color: #FFFFFF;
min-width: 175px;
width: auto;
border: 1px solid #333333;
line-height: 32px;
border-top: 0px solid #FFFFFF;
z-index: 999;
}
#fa_menulist, #fa_toolbar #fa_right #notif_list {
background: #FFF none repeat scroll 0 0!important;
border: 1px solid #DDD!important;
border-radius: 3px;
box-shadow: 0 6px 12px rgba(0,0,0,0.176);
margin-top: 18px!important;
}
#fa_share_text , #fa_share {display:none;}
#fa_icon {background-image: url(http://i21.servimg.com/u/f21/18/21/41/30/pa1110.png)!important;}
#fa_share a {
background: url() no-repeat 0 0 transparent!important;}
a#fa_fb {
background-position: -50px 0!important;
}
#fa_menulist::before, #fa_toolbar #fa_right #notif_list::before {
content: url("http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png");
position: absolute;
right: 10%;
top: -10px;
}
#fa_search #fa_textarea:focus,#fa_search #fa_textarea:hover,#fa_search:hover #fa_textarea{background:#FFF none repeat scroll 0 0!important;color:#444!important;outline:medium none;padding:3px!important;transition:ease;transition-duration:.5s;width:150px!important}
Até mais.
Re: Barra de ferramentas estilo fdf
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Tópicos semelhantes
» Remover barra de pesquisa da barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos