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.

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

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.

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.

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}

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?

Como desejar... altere o código 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 , #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.

While, infelizmente, os botões das redes sociais ainda estão aparecendo...

Boa noite,
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.

Deu certo Luig, vlw. Obrigado While, também