Início1 Resultado encontrado para fa_search
- Sex Out 07, 2016 12:04 am
- Procurar em: Dicas e Tutoriais
- Tópico: [Tutorial] Modelos de barras de ferramentas
- Respostas: 0
- Vistos: 484
Autor: Zump, Sennior, Shek
Funcionalidade: Em todas as versões
 | Barra de ferramentas |
Introdução
Personalize a sua barra de ferramentas, atribuindo novas cores e imagens de fundo. Neste tutorial, deixaremos alguns exemplos de barra de ferramenta personalizada para promover e combinar mais com seu fórum de discussão online.--> Tutoriais, dicas e astúcias <--
[b]Modelos de barra de ferramentas[/b]
1º - Folha de estilos CSS do fórum:
CSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2. phpbb3, punbb e invision) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS
Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>
 |  Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso seria a da folha de estilo. |
 | Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente). |
 | Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo. |
 | Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo. |
2º - Modelos prontos de barra:
A personalização da barra de ferramenta pode ser realizada de forma bem prática, usando o CSS. Contudo, é interessante que tenha conhecimento básico no CSS para efetuar as modificações no código.
As partes que estão em Verde, correspondem as indicações que você vai personalizar. Já as de Vermelho, são em específico, as propriedades que vai usar para personalizar. Por exemplo, um background-color ou color: black.div#fa_toolbar {
/*** CORRESPONDE A BARRA NUM TOTAL ***/
propriedade;
}
#fa_toolbar_hidden {
/*** CORRESPONDE A SETA PARA OCULTAR A BARRA ***/
propriedade;
}
/*** MENU DA BARRA DE FERRAMENTAS ***/
#fa_right {
/*** CORRESPONDE A PARTE ESQUERDA DA BARRA (NOTIFICAÇÕES E BEM VINDO) ***/
propriedade;
}
#fa_search {
/*** CORRESPONDE A PARTE DO ESPAÇO PARA PESQUISAR NO FÓRUM ***/
propriedade;
}
#fa_share {
/*** CORRESPONDE A DAS REDES SOCIAIS DA BARRA ***/
propriedade;
}
/*** MENU DA BARRA DE FERRAMENTAS - FIM ***/
 | Atenção! As modificações na barra de ferramentas são sujeitas a análise das equipes contratadas por Forumeiros, a Online Guardian! Você está ciente que a modificação de forma incorreta da barra de ferramentas é contra as condições gerais de uso, como por exemplo, a tentativa de alteração do texto ou link (imagem do ícone) de Forumeiros sem a compra de créditos. |
3º - Personalizações disponíveis:
- Barra de ferramentas CoreDance (By Shek Crowley):
- Código:
/*** BARRA DE FERRAMENTAS COREDANCE - FÓRUM DOS TEMAS HTTP://temas.forumeiros.net ***/
div#fa_toolbar {
background-color: #359AFF;
border-radius: 0 0 30px 45px;
box-shadow: 0 0 4px #000;
margin: auto;
width: 98%;
}
div#fa_toolbar div, div#fa_toolbar span {
margin: 0 15px;
}
#fa_notifications, #fa_welcome {
transition-duration: 1s !important;
-webkit-transition-duration: 1s !important;
}
#fa_notifications:hover, #fa_welcome:hover {
background-color: #FFF;
color: #359AFF !important;
transition-duration: 1s !important;
-webkit-transition-duration: 1s !important;
}
ul#fa_menulist {
border-radius: 4px !important;
border-bottom: 1px solid #359AFF !important;
border-left: 1px solid #359AFF !important;
border-right: 1px solid #359AFF !important;
background-image: url(http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png);
background-position: center bottom;
background-repeat: repeat-x;
background-color: #E7F3FA !important;
}
.see_all {
background-color: #0085FF !important;
}
/*** BARRA DE FERRAMENTAS COREDANCE - FÓRUM DOS TEMAS HTTP://temas.forumeiros.net ***/
- Barra de Ferramentas Prata:
- Código:
/* BARRA DE FERRAMENTAS PRATA */
#fa_toolbar {
left: 0px;
height: 30px;
background-color: #333333;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
z-index: 999;
}
#fa_toolbar {
background-color: rgba(0,0,0,0)!important;
background-image: url(http://i57.servimg.com/u/f57/11/95/30/70/toolba10.png);
color: #000!important;
font-family: Helvetica,Verdana,Arial;
font-size: 16px;
height: 58px!important;
left: 0;
z-index: 999;
}
.fa_fix {
position: fixed !important;
position: absolute;
top: 0;
right: 0;
}
.fa_toolbar_XL_Sized {
min-width: 980px;
width: 100%;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_share_text, #fa_service {
color: black !important;
}
#fa_welcome, #fa_right #fa_notifications {
line-height: 30px;
padding: 0px 5px;
color: black !important;
}
#fa_menulist {
margin-top: 8px !important;
}
/* BARRA DE FERRAMENTAS PRATA FIM */
- Barra de ferramenta Azul escuro (By Sennior):
- Código:
div#fa_toolbar {
-webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.52);
background-color: #3a5795;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAqCAMAAABFoMFOAAAAWlBMV…8/UxBxQDQuFwlpqgBZBq6+P+unVY1GnDgwqbD2zGz5e1lBdwvGGPE6OgAAAABJRU5ErkJggg==);
background-position: 0 0;
background-repeat: repeat-x;
background-size: auto;
border: 0;
border-bottom: 1px solid #133783;
min-width: 981px;
z-index: 300;
padding: 3px;
}
input#fa_textarea {
margin-right: 0!important;
margin-left: 12pc!important;
}
span#fa_share {
display: none!important;
}
a#fa_welcome {
display: none!important;
}
a#fa_notifications {
position: relative;
left: -8pc;
}
#fa_notifications{margin-right: 0px;width: 110px;text-align: right;position: relative;left: -6pc;background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yA/r/k_lAKDHNA3E.png);background-size: auto;background-position: -2px -640px;padding-right: 130px!important;z-index: 999;background-repeat: no-repeat;font-weight: 700;border-right: none!important;font-family:'helvetica neue', helvetica, arial, 'lucida grande', sans-serif!important;-webkit-font-smoothing: antialiased!important;margin-left: 2px!important;font-style: normal!important;text-transform: initial!important;text-decoration: initial!important;}
a#fa_magnifier {
background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yM/r/nD48zLxSt0n.png)!important;
background-position: 0 -354px!important;
background-repeat: no-repeat!important;
background-size: auto!important;
height: 18px!important;
top: 8px!important;
width: 19px!important;
margin-right: 0!important;
margin-left: 0!important;
left: 41pc!important;
right: 0!important;
}
a#fa_hide {
display: none!important;
}
span#fa_left {
position: relative;
left: 12pc;
}
input#fa_textarea {
width: 22pc!important;
padding: 1px!important;
margin-top: 1px!important;
}
- Barra de ferramenta estilo youtube (By Zump):
- Código:
#fa_search #fa_magnifier:hover {
background-color: #EBEBEB!important;
}
#fa_right a.rightHeaderLink {
margin-left: 10px;
vertical-align: top;
line-height: 30px;
color: #FFFFFF;
border: 1px solid #1b7fcc;
padding: 0px 5px 0px 5px;
background: #1b7fcc;
color: #fff;
margin-top: 10px;
font-weight: bold;
font-size: 11px;
}
#fa_right {
float: right;
font-size: 14px;
margin-right: 30px;
}
#fa_toolbar #fa_right #notif_list {
font-size: 11px;
display: none;
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
background: #fff!important;
border: 2px solid #dbdbdb!important;
border-top: 0px solid #FFFFFF !important;
z-index: 999;
margin-top: 8px !important;
}
#fa_toolbar #fa_right #notif_list li.see_all {
color: #666;
background-color: #dbdbdb !important;
padding: 0.7em !important;
text-align: left;
}
#fa_toolbar #fa_right #notif_list li.see_all a {
background-image: url(http://i.imgur.com/q8KOgBu.png);
background-position: 0% 50%;
background-repeat: no-repeat;
padding-left: 10px;
color: #666!important;
width: 140px !important;
}
#fa_toolbar #fa_right #fa_notifications.unread #notif_unread {
background-image: url(http://i.imgur.com/YgXineA.png);
background-position: 15px 0px;
background-repeat: no-repeat;
display: inline;
padding: 7px 20px 7px 0;
color: #666;
}
#fa_menulist {
display: none;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px 10px;
min-width: 175px;
width: auto;
line-height: 32px;
z-index: 999;
margin-top: 8px !important;
border-top: 0px solid #FFFFFF !important;
background: #fff !important;
border: 2px solid #dbdbdb !important;
}
#fa_toolbar #fa_hide {
display: none !important;
}
#fa_icon, #fa_toolbar #fa_service {
color: #666 !important;
}
#fa_search #fa_magnifier {
background: #f0f0f0 !important;
background-image: url(http://i.imgur.com/fC96pEG.png) !important;
background-repeat: no-repeat !important;
background-position: 40% 40% !important;
border: 1px solid #c6c6c6 !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.10) !important;
position: absolute !important;
height: 24px !important;
margin-top: 8px !important;
width: 50px !important;
margin-left: 300px !important;
}
#fa_share {
margin-left: 20px;
font-size: 16px;
line-height: 30px !important;
display: none !important;
}
#fa_right #fa_notifications, #fa_welcome {
background: #f8f8f8;
border: 1px solid #d3d3d3;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
color: #333!important;
margin-top: 10px;
font-size: 11px;
font-weight: 700;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
background: #f8f8f8;
border: 1px solid #d3d3d3;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
color: #333!important;
margin-top: 10px;
background-image: url(http://i.imgur.com/6vtRpv0.png);
background-repeat: no-repeat;
background-position: 100% 40%;
padding-right: 30px;
font-weight: bold;
font-size: 11px;
}
#fa_search #fa_textarea {
text-indent: 10px !important;
border: 1px solid #ccc!important;
box-shadow: inset 0 1px 2px #eee!important;
height: 24px!important;
line-height: 24px!important;
margin-top: 8px!important;
padding: 0!important;
width: 300px!important;
border-radius: 0 !important;
}
#fa_left {
display: inline-block !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
line-height: 30px !important;
margin-top: 10px;
}
#fa_toolbar {
left: 0px;
height: 50px !important;
color: #666 !important;
font-family: Helvetica, Verdana, Arial;
font-size: 16px !important;
z-index: 999;
background: #fff !important;
border-bottom: 2px solid #e8e8e8 !important;
}
- Barra de ferramenta circulada (By Zump):
- Código:
div#fa_toolbar {background-color: transparent !important;}
div#fa_toolbar a {
color:#616161 !important;
display: inline;
list-style-type: none;
width: auto;
}
div#fa_toolbar span#fa_left a#fa_service {color:#000 !important;}
div#fa_toolbar span#fa_left {
margin-right: 0px !important;
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
padding-top: 3px;
}
div#fa_toolbar div#fa_right {
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-bottom-left-radius: 11px;
}
div#fa_toolbar span#fa_share {
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
border-right: 1px solid #333;
border-bottom-right-radius: 11px;
padding-right: 4px;
padding-top: 3px;
margin-left: 0px !important;
}
div#fa_toolbar span#fa_share_text {display: none !important;}
div#fa_toolbar div#fa_search {display: none !important;}
#fa_toolbar #fa_right.notification #notif_list {
margin-left: -50px;
min-width: 200px;
left: auto !important;
right: 0px !important;
margin-right: -1px !important;
}
#fa_right #fa_notifications{
padding-top: 2px !important;
padding-bottom: 1px !important;
}
#fa_usermenu {text-align: left !important;}
#fa_menulist {
margin-left: -1px !important;
min-width: 300px !important;
padding-left: 110px !important;
}
#fa_toolbar #fa_right #notif_list li.see_all {background-color: #fff !important;}
#fa_menulist a:link, #fa_menulist a:visited, #fa_menulist a {
display: block;
height: 26px;
line-height: 26px;
padding: 0px;
color: #616161 !important;
text-decoration: none;
text-shadow: none;
}
#fa_menulist li {padding:0px 10px !important;}
#fa_menulist li:hover {
color:#fff;
text-shadow:0 1px 0 #000;
padding:0 10px;
background-color: rgb(231, 231, 231);}
- Barra de ferramenta personalizada (By Zump):
- Código:
#fa_toolbar {
background-image:url(http://i.imgur.com/dir6Rv9.png);
background-size:100%!important;
}
#fa_share {
display:none!important;
}
#fa_search #fa_textarea {
background:#fff!important;
margin-left:30px!important;
border-radius:0px!important;
}
#fa_search #fa_magnifier {
margin-left:200px!important;
}
#fa_left {
margin-left:40px;
}
#fa_toolbar #fa_service {
margin-left:10px!important;
color: #666!important;
font-family: sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
}
a#fa_welcome {
background-color: #BF6904;
background: linear-gradient(#db8e01,#871e0a);
box-shadow: inset 1px 1px 9px rgba(135,30,10,.8),inset -1px -1px 5px rgba(181,60,2,.8);
color: #FFF;
border: 1px solid #a29361;
border-color: #a29361 #928456 #5f5940 #928456;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
height:28px;
}
#fa_welcome:hover {
border:1px solid #a29361!important;
}
#fa_right.welcome #fa_menu #fa_welcome {
color:#fff!important;
}
#fa_right #fa_notifications {
background-color: #194A4C;
background: linear-gradient(#215f62,#0a2021);
color: #fff!important;
border: 1px solid #a29361;
border-color: #187277 #3a6668 #0e3f41 #3a6668;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
height:28px;
}
#fa_right > a:nth-child(1) {
background-color: #BF6904;
background: linear-gradient(#db8e01,#871e0a);
box-shadow: inset 1px 1px 9px rgba(135,30,10,.8),inset -1px -1px 5px rgba(181,60,2,.8);
color: #FFF;
border: 1px solid #a29361;
border-color: #a29361 #928456 #5f5940 #928456;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
height:28px;
width:50px;
text-align:center;
}
#fa_right > a:nth-child(2) {
background-color: #194A4C;
background: linear-gradient(#215f62,#0a2021);
color: #fff!important;
border: 1px solid #a29361;
border-color: #187277 #3a6668 #0e3f41 #3a6668;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
height:28px;
width:90px;
text-align:center;
}
- Barra de ferramenta estilo pop-up (By Zump):
- Código:
body #fa_toolbar {
background: url(http://i.imgur.com/wOV1CdJ.png) no-repeat 0 0;
background-size: 540px 80px;
height: 80px;
left: initial;
min-width: 550px;
position: absolute;
right: 0;
width: 550px;
}
#fa_share {
display:none!important;
}
#fa_toolbar #fa_hide {
display:none!important;
}
#fa_toolbar #fa_service {
display: inline-block !important;
visibility: visible !important;
text-decoration: none !important;
}
body #fa_right, body #fa_service {
font-size: .8em;
}
body #fa_service {
margin-left: 3px;
}
body #fa_left {
line-height: 52px!important;
margin-left: 6%;
}
#fa_toolbar #fa_icon {
background-position: center!important;
background-size: 20px!important;
}
#fa_right a.rightHeaderLink {
margin-left: 10px;
vertical-align: top;
line-height: 30px;
color: #FFFFFF;
}
body #fa_right {
margin-right: 10.5%;
}
body #fa_search {
background: url(http://i.imgur.com/1yr9uqr.png) no-repeat 0 bottom;
margin-right: 30px;
padding: 84px 40px 0 24px;
position: absolute;
right: 1.5%;
top: 42px;
width: 380px;
}
#fa_search {
margin-left: 20px;
height: 30px;
}
body #fa_toolbar #fa_magnifier {
background: transparent url(http://imgur.com/tUX6wJ6.png) no-repeat 50%!important;
height: 25px;
width: 25px;
}
body #fa_search form {
display: block;
margin-top: -15px;
}
#fa_search form {
margin: 0;
padding: 0;
display: inline;
}
body #fa_search #fa_textarea {
background: transparent;
border-radius: 0;
color: #fff;
font-size: 15px;
height: 25px;
margin: 0 0 0 26px;
outline: 0;
text-indent: 0!important;
width: 280px;
}
- Barra de ferramenta Dragon gladiador:
- Código:
#fa_toolbar {
background-image:url(http://i.imgur.com/L2prkFH.png);
background-size:100%!important;
}
#fa_share {
display:none!important;
}
#fa_search #fa_textarea {
background:#fff!important;
margin-left:30px!important;
border-radius:0px!important;
}
#fa_search #fa_magnifier {
margin-left:200px!important;
}
#fa_left {
margin-left:40px;
}
#fa_toolbar #fa_service {
margin-left:10px!important;
color: #ff7200!important;
font-family: sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
text-shadow:1px 1px 1px #000000;
}
a#fa_welcome {
background-color: #194A4C;
background: linear-gradient(#df9411,#ff6000);
color: #fff!important;
border: 1px solid #a29361;
border-color: #FFF #ff2400 #cf2509 #7b4b25;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
height:28px;
width:150px;
text-align:center;
}
#fa_welcome:hover {
border:1px solid #a29361!important;
}
#fa_right.welcome #fa_menu #fa_welcome {
color:#fff!important;
}
#fa_right > a:nth-child(1) {
background-color: #BF6904;
background: linear-gradient(#db8e01,#871e0a);
box-shadow: inset 1px 1px 9px rgba(135,30,10,.8),inset -1px -1px 5px rgba(181,60,2,.8);
color: #FFF;
border: 1px solid #a29361;
border-color: #a29361 #928456 #5f5940 #928456;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
height:28px;
width:50px;
text-align:center;
}
#fa_right > a:nth-child(2) {
background-color: #194A4C;
background: linear-gradient(#df9411,#ff6000);
color: #fff!important;
border: 1px solid #a29361;
border-color: #FFF #ff2400 #cf2509 #7b4b25;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
height:28px;
width:90px;
text-align:center;
}
- Barra de ferramenta Dark (By Zump):
- Código:
#fa_toolbar {
left: 0px;
height: 30px;
background-color: #2C3033;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
z-index: 999;
background: #3A4752 url(http://i78.servimg.com/u/f78/17/96/03/52/mainti10.png) repeat-x;
border-bottom: 7px solid #232B2B;
border-top: 1px solid #333;
box-shadow: 0 1px black, 0 2px 1px rgba(0,0,0,.4);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
}
#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 {
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
background-color: #213138;
background-image: url(http://i78.servimg.com/u/f78/17/96/03/52/search10.png);
background-position: 4px center;
background-repeat: no-repeat;
border: 1px solid #4A5763;
border-radius: 0!important;
box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
color: #979DA7;
}
#fa_search {
margin-left: 20px;
height: 30px;
}
#fa_hide, #fa_magnifier, #fa_share, #fa_toolbar_hidden {
display: none!important;
}
#fa_right {
float: right;
font-size: 14px;
margin-right: 50px;
}
#fa_welcome, #fa_right #fa_notifications , #fa_right > a:nth-child(1) , #fa_right > a:nth-child(2) { {
background: -moz-linear-gradient(#2b4242,#232B2B);
background-attachment: scroll;
background-image: -webkit-linear-gradient(#2b4242,#232B2B);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 1px 0 #3a4a4a inset;
color: #f0f0f0!important;
padding: 0 5px;
text-shadow: 1px 1px #3a4a4a;
}
#fa_left {
background: -moz-linear-gradient(#2b4242,#232B2B);
background-attachment: scroll;
background-image: -webkit-linear-gradient(#2b4242,#232B2B);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 1px 0 #3a4a4a inset;
color: #f0f0f0!important;
padding: 0 5px;
text-shadow: 1px 1px #3a4a4a;
margin-left:20px;
font-size:14px;
}
#fa_toolbar #fa_icon {
background-position: center!important;
background-size: 24px!important;
}
Imagens das barras (na posição dos códigos fornecidos, ou seja, primeira barra = primeiro resultado):
|
|
|