95 resultados encontrados para fff

Imagem circular em últimas mensagens

Olá!

É só adicionar em seu CSS:

Código:: .mini_ava { background: #FFF; border-radius: 100px; border: 2px solid #FFF; }

As cores #FFF representam o Branco em hexadecimal. O border-radius, representa o arredondamento do avatar. O quando maior o valor, mais redondo será.

Até mais!

Tópico movido de 'Questões sobre Códigos' para 'Questões sobre a aparência do fórum'

Modificar local do Aberto/Bloqueado na Visualizaçao dos topicos

apresentou dois erros:

sendo eles, o titulo não aparecendo completo pois foi pro lado... e o outro seria que não aparece ainda os icones no local que pedi;

print de como está:

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 NYkLhNx

Meu codigo CSS:

codigo css:

Número de respostas em balão

Muito bem @Hancki,já alterei pro seu css,aqui está:

topic_list_box:

Modificar fundo do fórum

Detalhes da questão

Endereço do fórum: http://habbol.forumbrasil.net/
Versão do fórum: PunBB

Descrição

Coloquei um blackgroud no .body } gostaria que nass laterais fosse o blackgroud e onde esta em vermelho na imagem fosse na cor #fff

img:

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Ftetmt

https://2img.net/h/oi62.tinypic.com/ftetmt.png

Remover imagem de fundo dos botões da resposta rápida

Folha de CSS:

@Mshas ai está espero que possa me ajudar

Personalizar o menu do fórum

Olá!

Troque a sua folha de estilos por esta:

Código:: /* Neon TAGs */ nwhite { color: #CDC9C9; text-shadow: 0px 1px 0px #000, 0px 0px 4px #FFFFFF; } ngreen { color: #008B00; text-shadow: 0px 1px 0px #000, 0px 0px 4px #9AFF9A; } npurple { color: #8B008B; text-shadow: 0px 1px 0px #000, 0px 0px 4px #D15FEE; } nred { color: #CD0000; text-shadow: 0px 1px 0px #000, 0px 0px 4px #FF3030; } npink { color: #FF1493; text-shadow: 0px 1px 0px #000, 0px 0px 4px #FF69B4; } /* Color Tags */ red {color: #ff0000;} adminred {color: #A30000;} modchefpink {color: #C400BD;} .forumline{ background-color:#; border:2px # solid; } .code div.cont_code { max-height: 100%!important; overflow: hidden!important; } span.chapter_txt { font-size: 12px; position: relative; top: 7px; } .postbody{ font-size:12px; line-height:18px; word-wrap: break-word; max-width: 641px!important; } /* Tìtulo dos Tópicos */ a.topictitle { color:#bbb; } .topictitle { color:#bbb; font-size:14px; font-weight:700; } h1,h2{ color:#705e5a; font-size:12px; font-weight:700; } .signature_div { top: 50px; padding-bottom: 55px; position: relative; } /* Secções */ #sectionData { font-variant: small-caps; font-size: 13px; font-style: normal!important; } #obj_Number { font-size: 16px; } #obj_Text { } portal:hover { transition: all 0.6s; text-shadow: 0 2px 5px #810000; letter-spacing: 1px; } portal { transition: all 0.6s; cursor: pointer; margin-top: 10px; border-bottom: 1px solid #1F0F0F; border-left: 50px solid #1F0F0F; border-right: 50px solid #1F0F0F; display: block; font-size: 22px; font-variant: small-caps; font-weight: 700; padding-bottom: 3px; width: 70%; } /* Nome da Staff */ a[href="/u1"],a[href="/u8"],a[href="/u15"],a[href="/u4"],a[href="/u5"]{ font-size: 12px; font-variant: small-caps; } a[href="/u1"]{ text-shadow: 0 1px 0 #000; } /* Remover link Inferior do Chatbox */ a[href*="/chatbox/index.forum?"]{ display: none; } /* Descrição dos Fóruns */ #catDesc { position: relative; top: -20px; margin-bottom: -10px!important; display: block; } /* Tamanho do Avatar */ a[href^="/u"] img { max-width: 150px; max-height: 300px; padding: 10px; } /* Anúncio: Promoção */ #promo { background: #121312 url(http://s5.postimg.org/6cfob22xz/i_background.jpg) repeat top left; overflow-y: auto; overflow-x: hidden; word-wrap: break-word; border: 1px solid #555; border-radius: 7px 0 7px 0; box-shadow: inset 0 0 5px 1px #000, 0 0 5px 1px #000; color: #eee; margin: 0 10px; max-height: 200px; max-width: 390px; padding: 5px; text-shadow: 1px 1px 0 #000; } /* Menu Principal */ a.mainmenu { position: relative; top: 0px; padding: 0px 5px 0px 5px!important; transition: all 0.8s; } a.mainmenu:hover { position: relative; top: -5px; padding: 0px 15px 0px 15px!important; transition: all 0.8s; } input[type="submit"], [type="button"]{ cursor: pointer!important; } #i_icon_mini_index { position: relative; left: 1px; } /* Barra de Ferramentas do Topo */ #fa_menulist, #fa_welcome, #notif_list, #fa_notifications { text-shadow: none!important; } /* Criação de Tópicos */ .genmed #username { top: 0px!important; position: relative; } .post-options{ text-align:right; padding-top: 5px; } hr{ border-bottom:1px solid #222; } span.gen, a.gen { top: -1px!important; position: relative; } /* Informações do Usuário */ tr .gen.row1 { top: 0; } tr .gen { position: relative; top: 10px; padding: px; } .gen .mainmenu { font-size: 12px!important; padding: 10px!important; margin: 5px!important; position: relative; top: 2px; } /* Alguns links */ a.forumlink{ color: #A2A2A2!important; font-size: 18px!important; text-decoration:none } .gensmall a[href^="/u"] { color=ñ#aaa!important; padding-right: 4px; } #field_id1 textarea, #field_id6 textarea { a.mainmenu, .navbar { background-color:#BF2A45; border-bottom:#BF2A45; } a.mainmenu:hover { background-color:#962439; border-bottom:#962439; padding:5px; } a.mainmenu, .navbar { background-color:#BF2A45; border-bottom:#BF2A45; } a.mainmenu:hover { background-color:#962439; border-bottom:#962439; padding:5px; }

Lista de erros corrigidos no CSS:

Spoiler:

Cumprimentos.
Fraise

Problema com SCEDITOR

Detalhes da questão

Endereço do fórum: http://pokemonchampionxnew.forum-livre.com
Versão do fórum: PunBB

Descrição

Estou com alguns problemas nos tópicos, pois a resposta rápida esta com alguns bugs, no Firefox, Internet Explore, Microsoft Edge seu menu não aparece, no Google Chrome quando se aperta pre-visualizar a menu fica cortado, e também em todos os navegadores, quando se aperta pre-visualiza a parte de baixo do forum vai para em cima da caixa mensagem.

Firefox, Internet Explore, Edge, etc.:

Chrome:

Oque esta dando em todos os navegadores:

Meu CSS:

Tabela BBcode

Olá!

No código que o Fraise passou acima, localize o seguinte:

Código:: background-image: url(http://bit.ly/acLmW9);

Como pode ver a tabela já tem uma imagem de fundo, se quiser trocar procure por http://bit.ly/acLmW9 e troque pelo link da imagem.

Caso queira colocar uma cor sólida como fundo, troque o código do Fraise por este:

Código:: [table style="background: #FFF; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border: 1px solid rgb(195,147,0); margin: 10px auto; padding: 5px; width: 90%; -webkit-box-shadow: rgb(195,147,0) 1px 1px 0px; color: rgb(195,147,0); z-index: 999; min-width: 1px; min-height: 1px; max-height: 2500px; max-width: 2500px; background-position: initial initial; background-repeat: initial initial;" width="100%"][tr][td][img]http://bit.ly/1LwvPKq[/img][/td] [td][color=#000000][b]Alguns tópicos importantes:[/b] Tenha conhecimento do [url=http://bit.ly/1LwvUhi]regulamento do setor de suporte[/url]. Conheça a [url=http://bit.ly/1IfBX2S]equipe staff do FdF[/url]. Leia a [url=http://ajuda.forumeiros.com/-t23.htm]FAQ[/url]. Leia a [url=http://ajuda.forumeiros.com/t6745-]lista de tutoriais, dicas e astúcias[/url].[/color][/td] [/tr] [/table]

Localize o seguinte:

Código:: background: #FFF;

Troque #FFF pela cor desejada em hexadecimal.

Atenciosamente.

[Logo] Médio

Informações técnicas

Tipo de pedido : [Logo]
Dimensões : 1000x90
Cores primátias : #FFFFFF
Cores secundárias : #0EA5F7
Imagens do pedido :

Imagens a serem usadas:

Texto a ser inserido : Lazer
Fonte : Kevin Eleven
Cor da fonte : #FFF
Link do meu fórum : http://lazer.forumeiros.com/
Link do meu último pedido : Não especificado

Informações adicionais

Descrição do que desejo : Boa tarde!

Eu basicamente gostaria de um logótipo com o fundo apresentado e escrito o nome do fórum (Lazer).
É só isso mesmo.

Cumprimentos.
Fraise

Personalizar widgets

Olá!

No primeiro código que lhe passei, localize a propriedade:

Código:: background-color: #fff;

Basta substituir #fff pela cor desejada.

Cumprimentos.
Fraise

Tópico Citação, com cor diferente

Não entendi, é só mudar esses códigos #000 e #fff, que mudam a tonalidade das cores ???

Como eu faço pra ficar cinza por exemplo ??

Tópico Citação, com cor diferente

Olá!

Sim, pode. Basta editar os valores a vermelho:

.postmain cite {
background-color: #000!important;
color: #fff!important;
}

Cumprimentos.
Fraise

mensagem ao colocar o mouse em cima

desculpe,mas o codigo que você me passou , não deu sucesso

verifique meu fórum: http://bplsamp.forumeiro.com/forum

puis esse codigo no css:

tentativa 1:

tentativa 2:

Como Mudar o fundo do forum

Ola, Boa tarde. Estou criando um forum e estou com problema na persolaização.

Ao adicionar uma imagem de fundo, o forum nao aceita a imagem nova.
Pesquisei em vários locais, porem o procedimento informado ja o fiz e nao tem efeito.

Ao acessar a pagina e entrar em modo de depuração do browser fica da seguitne forma:

*****************************************************************************************
body#phpbb {
background-color: #000;
background-image: url("https://i.imgur.com/sEtTk.jpg");
background-position: center top;
background-repeat: no-repeat;
color: #A8A8A8;
}
body {
margin: 0px;
padding: 0px !important;
}
body {
background-attachment: fixed;
background-color: #FFF;
background-image: url("https://i.servimg.com/u/f18/19/28/70/16/img333.jpg");
color: #A8A8A8;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
height: auto;
padding: 10px 0px;
}
*****************************************************************************************

onde esta:
body#phpbb {
...
ckground-image: url("https://i.imgur.com/sEtTk.jpg");
...

Deveria estar com a imagem img333.jpg.

Onde consigo mudar isso manualmente?

INFO:
DARKCHEATS V3
Versão :
Phpbb 3
Css personalizado :

Obrigado.

icons desapareceram

meus icons dos foruns desapareceram http://prntscr.com/7tgwdx
mas na legenda no fundo do forum aparecem
http://prntscr.com/7tgwmc

o que aconteceu?
minha folha de css

css:

barra inferior do forum

css:

Retirar barra especifica nas categorias

css:

Alterações na aparência do menu de navegaçao

aqui estao

css:

Problema da centralização da Imagem Principal (Logo)

body {
background-color: #164269;
color: #5A5A5A;
font-family: tahoma,helvetica,arial,sans-serif;
font-size: 13px;
padding-bottom: 15px;
margin-top: 15px;
}

.pun {
background-color: #fff;
width: 980px;
}

#pun_out {
background:url("https://i.servimg.com/u/f43/14/53/79/27/matti10.png") repeat;background:rgba(0,0,0,0.18);
border:1px solid #0b2337;
border:1px solid rgba(0,0,0,0.35);
-webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
-moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
padding:8px;
position:relative;
width: 990px;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.main .main-head {
background-color: #0c70a3;
background-image: url("https://i.servimg.com/u/f43/14/53/79/27/bg-top10.png");
background-position: 50% 50%;
background-repeat: repeat-x;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
color: #FFFFFF;
font-size: 12px;
font-weight: bold !important;
margin-top: 15px;
padding-bottom: 13px;
padding-left: 13px;
padding-right: 13px;
padding-top: 13px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}

.pun .main-content {
background-color: #FBFBFB;
border: 1px solid #B9C4CD;
}

.pun table.table td {
background: #ffffff url(https://2img.net/i/fa/empty.gif) repeat-x top left;
border-top: 1px solid #FFFFFF;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
line-height: 130%;
padding-bottom: 0.7em;
padding-left: 0;
padding-right: 0;
padding-top: 0.6em;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
background: #FFFFFF url(https://2img.net/i/fa/empty.gif) repeat-x top left;
border-top: 1px solid #FFFFFF;
}

.pun table.table th {
background: #ffffff url() repeat-x 0 50%;
color: #333333;
padding-bottom: 0.5em;
padding-left: 0;
padding-right: 0;
padding-top: 0.5em;
}

#pun-logo {
margin-left: -13px;
margin-top: -22px;
}

#pun-logo:hover { opacity: 0.8; }

.for_topics {
width: 74px;
height: 33px;
background: url("https://i.servimg.com/u/f43/14/53/79/27/fp10.png") no-repeat left top;
text-align: center;
font-size: 12px;
font-weight: bold;
line-height: normal;
color: #0e2c3e;
padding-top: 3px;
margin-left: 13px;
}

.for_topics span {
display: block;
color: #105289;
font-size: 10px;
}

.for_posts {
width: 74px;
height: 33px;
background: url("https://i.servimg.com/u/f43/14/53/79/27/fp10.png") no-repeat left top;
text-align: center;
font-size: 12px;
font-weight: bold;
line-height: normal;
color: #0e2c3e;
padding-top: 3px;
margin-left: 13px;
}

.for_posts span {
display: block;
color: #105289;
font-size: 10px;
}

.page-title h2, .page-title span {
color: #FFFFFF !important;
font-size: 14px;
font-weight: bold;
}

.pun .paged-head, .pun .paged-foot {
border: 0px solid !important;
background-color: !important;
padding: 0.6em 1.3em 0.3em 1.3em;

}

.pun .frm-form {
background: !important;
border: none;

}

#pun-head #pun-navlinks {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
background-color: #304154;
background-image: url("https://i.imgur.com/AneOCBd.jpg");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
border: 1px solid #1E2831;
height: 28px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

#pun-navlinks ul {
text-align: center;
}
#pun-navlinks li {
display: inline;
font-size: 15px;
line-height: 30px;
}
#pun-navlinks li a {
margin-left: -8px;
margin-right: -8px;
color: #fff;
font-family: tahoma,helvetica,arial,sans-serif
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.;
padding-top: 12px;
padding-left: 14px;
padding-right: 14px;
padding-bottom: 10px;
}
#pun-navlinks a, #pun-navlinks a:visited {
text-decoration: none;
}
#pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
padding-top: 12px;
padding-left: 14px;
padding-right: 14px;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, 0.2);
}

.main .main-foot{
background-color: #fff;
color: #666;
font-weight: 400;
padding-bottom: 0.7em;
padding-left: 1.3em;
padding-right: 1.3em;
padding-top: 0.7em;
}

.pun a:link { color: #205289;text-decoration: none;}
.pun a:visited { color: #105289;}
.pun a:hover { color: #ff6600; text-decoration: none;}
.pun a:active { color: #990000;}

#pun-title {
display: none;
}

.pun .post {
border: 1px solid #CBDAEA;
margin: 10px;
background: #FDFEFF;
}

.postfoot {
border-top: 1px solid #CBDAEA;
clear: both;
margin-left: -17em;
padding-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.5em;
text-align: right;
background: #F4FAFF;
}

.pun .postmain {
background-color: #FDFEFF;
border-left: 1px solid #CBDAEA;
margin-left: 17em;
}
.pun .posthead {
background-color: #F4FAFF;
border-bottom: 1px solid #CBDAEA;
padding-bottom: 0.5em;
padding-left: 1em;
padding-right: 1.3em;
padding-top: 0.5em;
}

.entry-content {
font-family: Verdana,Helvetica,Arial,sans-serif;
font-size: 13px;
}

.user-contact a {
background-color: #2e425a;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #FFFFFF;
display: inline-block;
padding: 3px;
box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
-webkit-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
-moz-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
-khtml-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
}

.codebox {
background-color: #E4EAF2;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
margin-top: 1em;
border: 1px solid #8394B2;
border-left: 4px solid #8394B2;
}
.codebox dt {
border-bottom: 1px solid #8394B2;
padding-bottom: 0.25em;
padding-left: 0.25em;
padding-right: 0.25em;
padding-top: 0.25em;
font-weight: bold;
color: #8394B2;
}
.codebox dd {
background-color: #fff;
color: #435C7A;
margin-bottom: 1px;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
}

.postmain blockquote {
background-color: #FFFFFF;
border: 1px solid #4E6A97;
padding-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.5em;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px;
}

#pun-about {
background-color: #F4F4F4;
border: 1px solid #DDDDDD;
line-height: 150%;
padding-bottom: 0.6em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.6em;
text-align: right;

}
#pun-about ul {
list-style-type: none;
}
#pun-about ul li {
display: inline;
}
#pun-about ul li a {
font-weight: normal;
text-decoration: none;
}
#pun-about #qjump {
display: none;
}

#pun-visit, .main-box {
background-color: #F4F4F4;
border: 1px solid #B9C4CD;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0.6em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.6em;

}

#search_box{display:none}

dl.codebox.spoiler{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}

.post_field {
font-weight: 700;
}

.forumbg {
background-color: black;
background-image: url(https://i.servimg.com/u/f32/17/12/21/41/catego11.png);
background-position: 0 0;
background-repeat: repeat-x;
border: 2px solid #E90B0B;
clear: both;
margin-bottom: 4px;
padding: 0 5px;
}

.main .main-head {
background-color: #0C70A3!important;
background-image: url(https://i.imgur.com/H7eKZk0.jpg)!important;
background-position: 50% 50%;
background-repeat: repeat-x;
border-radius: 4px 4px 0px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.298039) 0px 1px 3px, rgba(255, 255, 255, 0.2) 0px 2px 0px inset;
color: white;
font-size: 12px;
margin-top: 15px;
padding: 8px;
text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px;
font-weight: 700;
}

.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}

.blur {

.pun .post {
background-color: #FAFBFC;
border-bottom-color: #964e4e;
border-bottom-style: solid;
border-bottom-width: 6px;
}

.main .main-foot {
padding: 0.7em 1.3em;
font-weight: normal;
color: #660000;
background-color: transparent;
}

.pun .postmain {
background-color: #fbfbfb;
border-left: 1px solid #DADADA;
margin-left: 17em;
}

a:hover {
color: #4876FF;
text-shadow : 0px 0px 10px #FF0000;
}

Overrall_header Personalizado

Olá @Luis_xD!

Adicione este código CSS a seu fórum:

#pun-navlinks{background-color:#141414;margin-left: -15px;width: 101%;position: center;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);background-repeat:repeat-x;color:#fff;display:block;font-family:Helvetica, Arial, Verdana, sans-serif;font-size:12px;font-weight:400;height:35px;line-height:30px;padding:5px 20px 13px;text-decoration:none}.mainmenu{color:#fff!important}.mainmenu,a.mainmenu:hover{text-decoration:none!important}
#pun-navlinks {border-bottom: 3px solid blue !important ;}

.mainmenu:hover, .mainmenu{color:#00f!important;max-height: 10px !important;padding-bottom:17px !important;padding-top:13px;padding: 10px;}.mainmenu,a.mainmenu:hover{text-decoration:none!important}

#pun-navlinks li {
display: inline;
font-size: 1.15em;
}
#pun-navlinks a, #pun-navlinks a:visited, a.mainmenu {
left: -120px!important;
position: relative;
top: -3px!important;
}
#pun-navlinks a:hover {
border-top: 3px solid blue;
padding: 12px!important;
color: white !important;
}

Adicione-o em:
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS

Se desejar alterações no menu, não hesite em pedir.

Cumprimentos!

Estatísticas personalizada

Olá novamente @Holkis!

Para ficar personalizado com o senhor deseja, terá de adicionar este código em sua CSS.

div * {margin: 0;padding: 0;}
.conteneur-menu {font-family: Arial;}
.conteneur-menu .onglets li {float: left;list-style: none;}
li {display: list-item;
text-align: -webkit-match-parent;}
.conteneur-menu .onglets li a {
-moz-text-shadow: 1px 1px 1px #fff;
-webkit-text-shadow: 1px 1px 1px #fff;
background: #E9E9E9 url(IMAGEM-DO-BOTÃO-AQUI) repeat-x bottom;
border-bottom: 1px solid #F3F5F7;
border: 1px solid #EEE;
color: #6B6B6B;
display: block;
font-family: Arial;
font-size: 12px;
font-weight: 700;
padding: 7px 0;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px white;width: 150px;}
.conteneur-menu .onglets li a.active {
background: #D0E1F7 url(IMAGEM-DO-BOTÃO-AQUI) repeat-x bottom;
border: 1px solid white;color: #222;}
.texte_1 {color: #485470;font-family: Arial;font-size: 13px;font-style: italic;}
.titre_4 {color: #24478E;margin-bottom: 5px;
font-family: Arial;font-size: 14px;font-style: italic;font-weight: 700;}

Mantenha a index_body que lhe passei.

Cumprimentos!

Barra de mensagem Flutuante

Meu fórum: http://brazilflylife.forumeiros.com/

Spoiler:

Por favor gostaria de saber tambem, qual é o código que coloca no nome do widgets que não aparece ele no forum.

[Resolvido] Personalizar cores de fundo do Chatbox

Saudações,
Única coisa que você não entendeu que, se não resultar.
Na verdade no meu fórum tá funcionando direito.
É por quê tem um código completo de chatbox.
Com informações procure com essa palavra:
#CHATBOX
Lá baixo tem background: #FFF;
É pra apagar e cole na mesma linha que antes tava.

Código:: #chatbox { background: #EAEAEA; }

Se não resultar, peço-lhos que você está qual versão do fórum?
Até,

Inserir cores nos textos

Bom meu fórum deu um problemas de texto em alguns locais gostaria de pedir um código que ficasse branco (#fff) estas partes que estão circuladas https://i.imgur.com/zkziJcu.png - https://i.imgur.com/VWhchts.png e antes que falem para eu ir nas cores e folha css editar, já fui e e fico 'bugado" em alguns texto do forum...

Widgets não aparecem no index do fórum

esta aqui CSS:

CSS:

Como remover espaço vazio acima da assinatura?

Opa! Saudações Sennior!
Bem não consegui achar.
Aqui está o CSS:

CSS:

Quero diminuir as placas do perfil

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://nacionalteste.forumeiros.com/forum

Descrição do problema

Quero diminuir as placas dos grupos e dos ranks, que é as placas de admin, das organizações, que está no perfil do usuario, pois buga quando aparece o perfil do cara na mensagem.. segue a css

css:

Aumentar as dimensões do avatar

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://nacionalteste.forumeiros.com/

Descrição do problema

Desejo aumentar as dimensões do avatar do fórum, o que está utilizado é apenas um quadrado pequeno, desejo aumentar, deixa-lo maior. Segue o CSS abaixo.

Spoiler:

Colocar imagem no fundo

Aqui está:

Spoiler:

Como tira essa imagem no fundo do Menu?

EuficoLoko escreveu:Bom dia, Panic_xD:

Adicione em seu CSS:
Código:
#page-header .navbar ul.linklist.navlinks, a.mainmenu{color: black !important;background: none !important; border: none !important;border-right: none !important;border-left: none !importanat;}

Agora para mudar a cor do menu, procure em seu CSS:
Código:
a.mainmenu { background: url(http://i42.servimg.com/u/f42/17/32/13/00/nav-di10.png) no-repeat scroll 100% 44% rgba(0,0,0,0); color: #FFF!important;

Terá alguns parâmetros após isso, mas o que queremos editar e a cor #FFF. (Troque pela do menu em Hexadecimal)

Abraços.

O senhor adicionou na CSS?

Como tira essa imagem no fundo do Menu?

Bom dia, Panic_xD:

Adicione em seu CSS:

Código:: #page-header .navbar ul.linklist.navlinks, a.mainmenu{color: black !important;background: none !important; border: none !important;border-right: none !important;border-left: none !importanat;}

Agora para mudar a cor do menu, procure em seu CSS:

Código:: a.mainmenu { background: url(http://i42.servimg.com/u/f42/17/32/13/00/nav-di10.png) no-repeat scroll 100% 44% rgba(0,0,0,0); color: #FFF!important;

Terá alguns parâmetros após isso, mas o que queremos editar e a cor #FFF. (Troque pela do menu em Hexadecimal)

Abraços.

Login em LightBox

Aqui está

Overall_header:

Como colocar legenda?

Olá novamente!

Perdão, eu esqueci de avisa-lo ao senhor que é necessário modificar a cor para a cor do grupo do seu fórum.

No código:

a[href*="/u"] span[style="color:COR_DO_SEU_GRUPO"] strong{position:relative}a[href*="/u"] span[style="color:COR_DO_SEU_GRUPO"] strong:hover:after{background-color:rgba(0,0,0,0.5);border-radius:5px;bottom:15px;color:#fff;content:"Suporte no atendimento aos usuários";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-70px;padding:2px;position:absolute;white-space:nowrap;z-index:1}

Modifique o que destaquei para a cor do grupo do teu fórum em hexadecimal, penso eu que seja por hexadecimais assim como os demais são.

Até!

Retirar tamanho padrão dos avatares

Olá @'Ripper,

Peço que procure por este código em sua folha de estilo CSS.

.pun .user .user-basic-info a img {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2);
background: #fff;
border: 1px solid #d5d5d5;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
max-height: 150px;
max-width: 300px;
padding: 1px;
}

O que está em negrito peço que remova.

Atenciosamente.

Criar menu personalizado

Para arrumar a questão do texto hover, troque por:

Código:: body{overflow-x: hidden !important} #pun-navlinks{background-color:#141414;margin-left: -15px;width: 101%;position: relative; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);background-repeat:repeat-x;color:#fff;display:block;font-family:Helvetica, Arial, Verdana, sans-serif;font-size:12px;font-weight:400;height:35px;line-height:30px;padding:5px 20px 13px;text-decoration:none}.mainmenu{color:#fff!important}.mainmenu,a.mainmenu:hover{text-decoration:none!important} #pun-navlinks {border-bottom: 3px solid red !important ;} .mainmenu:hover, .mainmenu{color:#fff!important;max-height: 10px !important;padding-bottom:17px !important;padding-top:13px;padding: 10px;}.mainmenu,a.mainmenu:hover{text-decoration:none!important} li .mainmenu:hover {background:#fff;color:#000!important;}

Quanto ao efeito do hover, deseja como?
Na última linha:

Código:: li .mainmenu:hover {background:#fff;color:#000!important;}

E a linha do hover, podendo trocar a cor do background de #fff para a que o senhor desejar. A cor do texto de #000 para a que desejar. Etc..

Hover sobre grupo e nick

Olá,

Senhor, eu já postei o código... mais vamos reformular para você entender, certo?

Hover sobre o nick

a[href*="/u"] span[style="color:#CC66CC"] strong:hover:after {
background-color: rgba(150,13,150,0.5);
border-radius: 5px;
bottom: 83px;
color: #fff;
content: "Suporte gráfico para os usuários";
display: inline-block;
font-size: 10px;
font-style: normal;
font-weight: 700;
left: 288px;
padding: 2px;
position: absolute;
white-space: nowrap;
z-index: 1;
}

#CC66CC -> Coloca a cor do grupo que deseja aplicar tal efeito.

Hover sobre o grupo

a[class="gensmall"][href="/g15-artmeiros"]:hover:after {
background-color: rgba(150,13,150,0.5);
border-radius: 5px;
bottom: 15px;
color: #fff;
content: "Suporte gráfico para os usuários";
display: inline-block;
font-size: 10px;
font-style: normal;
font-weight: 700;
left: -60px;
padding: 2px;
position: absolute;
white-space: nowrap;
z-index: 1;
}

15: Coloca o ID do grupo que deseja aplicar o efeito.
artmeiros: Coloca o nome do grupo em letras "minusculas".

Estes códigos devem ser aplicado na sua folha de estilo CSS, para isso peço que acede à:
Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Resulta?

Atenciosamente!

Duvida ao Widget Flutuante

Saudações!

Substitua o teu código por este:

<div id="fdf_float" align="center">
<script type="text/javascript">
$(function(){
var horario = new Date();
var hora = horario.getMinutes();
if ((hora >= 50)){
$('#fdf_float:eq(1)').hide()
};
if ((hora >= 4)){
$('#closedfstc:eq(1)').show()
};
});
</script>
<style type="text/css">
#fdf_float a {
position: fixed;
bottom: 80px;
text-decoration: none;
right: 20px;
z-index: 3000;
}
a#caixflofstc {
position: fixed;
bottom: 10px;
line-height: 16px;
text-align: left;
right: 10px;
z-index: 1;
opacity: 0.8;
width: 360px;
height: 120px;
background: #cf3737;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
padding: 10px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma;
border: 1px solid #771b1b;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #f66c6c 0px 1px 0px;
border-radius: 3px;
}
a#caixflofstc:hover {
opacity: 1;
}
#caixflofstc strong {
font-family: "Trebuchet MS";
display: block;
font-size: 14px;
padding-bottom: 5px;
}
</style>
<a href="#" id="caixflofstc"><span id="closedfstc" style="float: right;">x</span>Conteúdo</a>
</div>

Veja os números "50" e "4" que destaquei em negrito. Aos 4 ele aparecerá, aos 50 desaparecerá. Assim sucessivamente e vice-versa!

Peguei de um outro código, prevejo que funcione! Vale lembra-lo que, ele é controlado por minutos, nos 4 ele aparece e nos 50 desaparece.

Até!

Dúvida sobre o código postado por luciano 98

Detalhes da dúvida

Versão do fórum : phpBB2
Nível de acesso : Membro
Navegador usado : Mozilla Firefox
Imagem :

Imagem da minha dúvida:

Membros afetados : Vários usuários, uns sim e outros não
Problema começou : Desde que tentei copiar o código
Endereço do fórum : https://ajuda.forumeiros.com/t44427-imagem-flutuante

Descrição do problema

[Resolvido] Categoria diferente

Não resultou, porem descobri aonde que ta o problema

Código:: .main .main-foot, .main .main-head { background-color: #fff;

Nesta parte do #fff eu teria que mudar pra cor desejada, eu fiz isso aqui pra outra cor e deu certo.
Grato á todos, reputei todos.

@Resolvido
@Closed

Editar as estatísticas do fórum

Meu index_body

Spoiler:

Minha Folha CSS

Spoiler:

Sombra nos Perfis

StaaL escreveu:Ola: Saudações

tenho um modo muito mais facil de alterar as cores do seu efeito

1° Passo
Vai em.
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript
e crie um novo JavaScript Utilize o sequinte code

Código:
$(function(){$('div.post:has("Administrador"), div.postmain:has(".admincriando")').css('box-shadow','-80px -70px 200px rgba(249, 68, 9, 0.45) inset')});

Preste muita atenção
Onde esta Administrador Coloque o nome do rank
Onde esta admincriando Coloca nome do rank (utilize o mesmo nome do code abaixo)
Onde esta 249, 68, 9, 0.45 São as Cores que pode ser modificada um Exemplo Poderia ser #fff

2° Passo
Vai em.
Painel de controle Usuarios e Grupos administração dos ranks
Crie ou edita um rank
No Nome do rank Utilize esse code abaixo

Código:
<span class="admincriando">Administrador</span>

Preste muita atenção
Onde esta admincriando Use o mesmo nome colocado no rank a cima
Onde esta Administrador Use um nome pra seu rank

e Salva

Alteração? Aguardo até by StaaL

Valeu pela ajuda ai de todos .
Consegui

Sombra nos Perfis

Ola: Saudações

tenho um modo muito mais facil de alterar as cores do seu efeito

1° Passo
Vai em.
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript
e crie um novo JavaScript Utilize o sequinte code

Código:: $(function(){$('div.post:has("Administrador"), div.postmain:has(".admincriando")').css('box-shadow','-80px -70px 200px rgba(249, 68, 9, 0.45) inset')});

Preste muita atenção
Onde esta Administrador Coloque o nome do rank
Onde esta admincriando Coloca nome do rank (utilize o mesmo nome do code abaixo)
Onde esta 249, 68, 9, 0.45 São as Cores que pode ser modificada um Exemplo Poderia ser #fff

2° Passo
Vai em.
Painel de controle Usuarios e Grupos administração dos ranks
Crie ou edita um rank

No Nome do rank Utilize esse code abaixo

Código:: <span class="admincriando">Administrador</span>

Preste muita atenção
Onde esta admincriando Use o mesmo nome colocado no rank a cima
Onde esta Administrador Use um nome pra seu rank

e Salva

Alteração? Aguardo até by StaaL

Elaborar um código CSS3 - Vol. 1 Efeitos

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Sem_t123

CSS3 Efeitos

O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento. CSS3 é a mais nova versão da famosa da linguagem utilizada para personalização do layout de páginas da web, CSS, onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas.

Border Radius

1. Estrutura das propriedades:

Classe {
Propriedades;
}

No local de vermelho é de extrema importância o preenchimento, este local implica em dizer a todo o código que será num determinado local que todas as propriedades serão aplicadas. Para mais informações sobre elaboração de novos códigos, consulte o tutorial: Elaborar um código CSS

Código
Propriedades para cada navegador
Mozilla, Gecko	-moz-border-radius-topleft: Xpx;
Safari, Chrome, Android, Internet 9+	-webkit-border-top-left-radius: Xpx;

Vermelho -> Aonde irá ser definido se será modificado a parte de cima (top) ou a parte de baixo (bottom) da div ou de outros códigos html que definam uma classe css.
Verde -> Poderá ser o valor left (Esquerda) ou right (Direita), este será aonde a borda será modificado, no caso acima será modificada a parte de cima da borda (top) no lado esquerdo.
Laranja -> Local aonde terá de adicionar a quantidade que a borda ficará redonda, quanto maior o valor, maior será o arredondamento.

Box Shadow

Código
Propriedades para cada navegador
Mozilla, Gecko	-moz-box-shadow: Xpx Xpx Xpx #000000;
Safari, Chrome, Android, Internet 9+	-webkit-box-shadow: Xpx Xpx Xpx #000000;
Comum a todos	box-shadow: Xpx Xpx Xpx #000000;

Vermelho -> Local aonde irá definir o valor do comprimento horizontal, quanto maior o valor mais a sombra da classe irá para a direita e quanto menor for o valor mais a sombra irá para a esquerda.
Verde -> Local aonde irá definir o valor do comprimento vertical, quanto maior o valor mais a sombra da classe irá para baixo e quanto menor for o valor mais a sombra irá para cima.
Laranja -> Definirá neste local o desfoque da sombra, quanto maior for o valor maior desfoque a sombra terá, sendo assim, se espalhando mais, obviamente, quanto menor for o valor menos desfoque a sombra terá.
Violeta -> Local aonde irá definir a cor de fundo da sombra (em hexadecimal).

Text Shadow

Código
Propriedades para cada navegador
Comum a todos	text-shadow: Xpx Xpx Xpx #000000;

Vermelho -> Local aonde irá definir o valor do comprimento horizontal, quanto maior o valor mais a sombra da classe irá para a direita e quanto menor for o valor mais a sombra irá para a esquerda.
Verde -> Local aonde irá definir o valor do comprimento vertical, quanto maior o valor mais a sombra da classe irá para baixo e quanto menor for o valor mais a sombra irá para cima.
Laranja -> Definirá neste local o desfoque da sombra, quanto maior for o valor maior desfoque a sombra terá, sendo assim, se espalhando mais, obviamente, quanto menor for o valor menos desfoque a sombra terá.
Violeta -> Local aonde irá definir a cor de fundo da sombra (em hexadecimal).

Text Rotation

Código
Propriedades para cada navegador
Mozilla, Gecko	-moz-transform: rotate(Xdeg); writing-mode: lr-tb;
Safari, Chrome, Android, Internet 9+	-webkit-transform: rotate(Xdeg); writing-mode: lr-tb;
Comum a todos	-o-transform: rotate(Xdeg); writing-mode: lr-tb;

Background RBGA

Antes de aprendermos sobre o código, há algo interessante a se adquirir como conhecimento, o título RBG já dá o nome do que iremos trabalhar no código, observe: R -> red, G -> Green e B -> Blue.

Código
Propriedades para cada navegador
Comum a todos	background-color: rgba(X, X, X, X); background: rgba(X, X, X, X); color: rgba(X, X, X, X);

Vermelho -> Será definido um número de 0 a 255 que estará relacionado com a intensidade da cor vermelha.
Verde -> Será definido um número de 0 a 255 que estará relacionado com a intensidade da cor verde.
Azul -> Será definido um número de 0 a 255 que estará relacionado com a intensidade da cor azul.
Laranja -> Será definido um número de 0 a 1 (passando por 0.1, enfim...) que estará relacionado com a opacidade do fundo da classe.

@Fonte Face

Este código não precisa ser adicionado no lugar de propriedades como foi dito no começo do tópico, ele por si só em uma folha estilo CSS já fará o efeito.

Código
Propriedades para cada navegador
Comum a todos	@font-face { font-family: Nome da fonte; src: url(Endereço-da-fonte); }

Laranja -> Neste local irá adicionar simplesmente o nome da fonte que irá utilizar.
Vermelho -> Modifique adicionando o link da onde a fonte estará hospedada. Lembre-se, não é para colocar o link para download da fonte e sim ela já baixada e extraída, normalmente em um formato .otf.

Outline Offset

Código
Propriedades para cada navegador
Comum a todos	outline-style: solid; outline-width: Xpx; outline-color: #000000; outline-offset: Xpx;

Vermelho -> Será a textura da borda, pode ser substituído por dotted, dashed, solid, double, groove, ridge,inset, hidden (Oculta), outset, none (Sem definição), inherit (Este valor será o valor herdado de seu elemento pai), cada uma com estilos diferentes.

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Cssbor10

Laranja -> Quanto maior o valor maior será o valor da grossura da borda.
Violeta -> Neste local irá definir a cor da borda, lembre-se sempre que o valor a ser definido será um valor hexadecimal.
Verde -> Quanto maior for o valor maior será o espaço da borda em relação a classe escolhida.

Transitions

Código
Propriedades para cada navegador
Mozilla, Gecko	Classe { -moz-transition:All 0.001s linear; -moz-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Safari, Chrome, Android, Internet 9+	Classe { -webkit-transition:All 0.001s linear; -webkit-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Navegador MS IE 8	Classe { -ms-transition:All 0.001s linear; -ms-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Comum a todos	Classe { -o-transition:All 0.001s linear; -o-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }

Estes serão os atributos em modo normal, este tipo de efeito se relaciona com o seletor :hover, ou seja a propriedade transition diz como a classe irá passar para o modo hover.

Modo hover

Código
Propriedades para cada navegador
Mozilla, Gecko	Classe:hover { -moz-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Safari, Chrome, Android, Internet 9+	Classe:hover { -webkit-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Navegador MS IE 8	Classe:hover { -ms-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Comum a todos	Classe:hover { -o-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }

Vermelho -> Estará literalmente relacionado a velocidade e o modo como será executado a animação, poderá ser trocado por: linear, ease, ease-in, ease-out, ease-in-out, veja mais abaixo para que serve qualquer uma.
Negrito -> Rotate: O quanto a classe irá rodar, Scale: O tamanho da classe, Skew: O quanto a classe irá se distorcer, Translate: Localização da classe - quanto maior for o valor mais para a direita ela irá, quanto menor mais para a esquerda.
Laranja -> Valor do cúbico-bezier, entenda mais...

Linear	Especifica um efeito de transição com a mesma velocidade do início ao fim (equivalente ao cúbico-bezier(0,0,1,1))
Ease	Especifica um efeito de transição com um início lento, em seguida, rapidamente, em seguida, acabar lentamente (equivalente a cúbico-bezier(0.25,0.1,0.25,1))
Ease-in	Especifica um efeito de transição com um início lento (equivalente a cúbico-bezier(0.42,0,1,1))
Ease-out	Especifica um efeito de transição com uma extremidade lenta (equivalente a cúbic-bezier(0,0,0.58,1))
Ease-in-out	Especifica um efeito de transição com um início lento e no final (equivalente ao cúbico bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)	O cúbico bezier defini seus próprios valores, que são valores numéricos possíveis de 0 a 1.

CSS Gradient

Este código não precisa ser adicionado no lugar de propriedades como foi dito no começo do tópico, ele por si só em uma folha estilo CSS já fará o efeito.

Código
Propriedades para cada navegador
Comum a todos	background:-moz-linear-gradient(0% 20% 359deg, #000, #FFF 40%)

Vermelho -> Local aonde a cor primária irá começar, quanto menor for o valor mais para esquerda e quanto maior mais para a direita.
Verde -> Local aonde a cor secundária irá começar, este valor só fará diferença caso a cor primária esteja em 98%, dai caso o valor de verde for diminuído prevalecerá a cor secundária.
Laranja -> Será o angulo que o efeito será reproduzido.
Rosa -> Cor primária.
Preto -> Cor secundária.
Azeitona -> O quanto a cor secundária ficará esfumassada.

O local em negrito irá definir se o fundo será reproduzido com o efeito radial ou linear, veja a imagem para entender melhor:

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Exempl10

CSS Transform

Código
Propriedades para cada navegador
Mozilla, Gecko	Classe { -moz-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Safari, Chrome, Android, Internet 9+	Classe { -webkit-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Navegador MS IE 8	Classe { -ms-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Comum a todos	Classe { -o-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }

Negrito -> Rotate: O quanto a classe irá rodar, Scale: O tamanho da classe, Skew: O quanto a classe irá se distorcer, Translate: Localização da classe - quanto maior for o valor mais para a direita ela irá, quanto menor mais para a esquerda.

Considerações finais: É importante ressaltar que é imprescindível que tenha plenos conhecimentos sobre a estrutura de códigos css, veja o tutorial: Elaborar um código CSS.

Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Apostila CSS3 - Vol. 1

[TUTORIAL] Redes sociais flutuantes

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Gestio10

Botões de redes sociais flutuantes

É possível adicionar ao widget um pequeno código, ao qual será possível ver os botões "Facebook Connect, +1 e Twitter". Neste tutorial vamos fazê-los flutuar no fórum de maneira prática, e só modificando pequenos valores.

--> Tutoriais, dicas e astúcias <--
Botões de rede sociais flutuantes

1º - Adicionar e modificar o CSS:
Esse código CSS pode ser aplicado tanto na folha de estilo CSS do fórum, como também em um widget, mensagem da home page, páginas HTML ou Javascripts se você desejar, mas é claro que há diferença entre os locais. Vamos aplicar de preferencia esse código na folha CSS.

Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>

(clique na imagem para aumentar)

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Css11

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 110111

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 serial a da folha de estilo.

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 110210

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).

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 110310

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.

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 110410

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.

Vamos adicionar o seguinte código:

/* CSS das redes sociais flutuantes */
#pageshare
{position:fixed; bottom:87%; margin-left:-35px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

Azul: Altura dos botões de rede sociais.
Vermelho: Possibilita escolher o lado em que se posicione os botões, esquerdo ou direito. Lembre-se que, é possível adicionar valores negativos. Como no código CSS acima, o valor destacado em vermlho tem o valor negativo, sendo assim o quando mais o número for aumentado mais ele se posicionará na página.

2º - Adicionar código no widget:

Painel de controle ->> Módulos ->> Portal e Widgets ->> Gestão dos widgets do fórum ->>
Clique no botão "Criar um widget personalizado".

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Wf310

No campo "Fonte do widget" vamos adicionar o seguinte código:

<div id='pageshare'><div class='sbutton' id='fb'>
<a name="ttw_share" type="box_count" <iframe src="https://www.facebook.com/plugins/like.php?locale=pt_BR&href=ENDEREÇO_DO_FORUM%2F&send=false&layout=box_count&width=60&show_faces=false&action=like&colorscheme=light&font&height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:60px;" allowtransparency="true"></iframe>

<iframe src="http://platform0.twitter.com/widgets/tweet_button.html?_=1311006182541&count=vertical&id=twitter_tweet_button_0&lang=en&original_referer=ENDEREÇO_DO_FORUM%2F&text=TÍTULO_DA_PAGINA&url=ENDEREÇO_DO_FORUM%2F" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-vertical" style="width: 55px; height: 62px; " title="Twitter For Websites: Tweet Button"></iframe>

<iframe src="https://www.facebook.com/plugins/like.php?locale=pt_BR&ENDEREÇO_DO_FORUM%2F&send=false&layout=box_count&width=60&show_faces=false&action=like&colorscheme=light&font&height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:60px;" allowtransparency="true"></iframe>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script><g:plusone size="tall"></g:plusone>
</a></div></div>

Logo quando adicionar, clique em Salvar.

Vamos arrastar o novo widget para coluna onde estão os outros widgtes do fórum. Para isso, segure com botão direito do mouse e leve-o até onde deseja.

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Untitl10

Logo depois, salve as configurações da mudança e veja o resultado na página inicial do fórum.

O que seria os valores negativos no CSS?
Diariamente em nossa vida, presenciamos contas de adição e subtração, nos códigos isso não é diferente. Para atrivuir-mos uma posição neste CSS, é necessário dar um valor númerico e isso pode levar a ferranenta que estamos montando para um local ou para outro. No caso do CSS apresentado acima, está com o valor negativo, pois assim o código vai reconhecer até aonde queremos que os botões sejam posicionados. Quando negativos, eles são movidos para o direita, e quando positivos são movidos para esquerda, isto é, quando atribuido o valor "position".
Como é que CSS reconheceu o código que adicionei?
Em um formulário de postagens existe os campos de nome. Ou seja, "name=Z", isso quer dizer que o nome do código será "Z", logo se colocar-mos um CSS chamando o valor "Z" ele será modificado. No nosso do widget temos o código "<div id='pageshare'>" que determina o valor do CSS. No CSS temos o "#pageshare", quando existe algum código no fórum com o nome do ID de "pageshare" ele será modificado pelo CSS que aplicamos.
Onde posso ver o resultado?
Existe um vídeo tutorial?

Melhor visualização no site do Youtube: https://youtu.be/Keb6dlnMsAA

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Botões de rede sociais flutuantes

Adicionar lista de seções na mensagem da home-page

A lista de seções é um sistema que destaca as seções que o fórum possui na mensagem da home-page, fazendo com que todos os usuários que acessarem poderão ver o que existe no fórum e, ao passar o mouse sobre a imagem de cada uma das seções ver uma breve descrição dela.

Resultado final do tutorial:

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Untitl19

--> Tutoriais e astúcias <--
Adicionar lista de seções na mensagem da home-page

1º - Inserindo o código CSS
Para a mensagem funcionar correctamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:
Painel administrativo -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 1114

Onde terá de adicionar o seguinte código:

.img_list_hp {
border: 1px solid #0372BE;
padding: 0;
float: left;
color: #FFF !important;
width: auto;
font-size: 11px;
text-align: center;
margin: auto 10px auto auto;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.img_list_hp:hover {
background-color: #DCEAF5;
}

.img_list_hp img {
padding: 8px 15px;
}

.img_list_hp span {
background-color: #0372BE;
color #FFF;
display: block;
padding: 0 10px;
}
.img_list_hp a {
color: #FFF !important;
text-decoration: none;
}
#img_list_alt {
background-image: url(https://i.servimg.com/u/f21/11/81/27/88/arrow_10.png);
background-repeat: no-repeat;
background-position: 20px 0;
padding-top: 13px;
padding-left: 55px;
}

O que deverá ser modificado de acordo com o estilo do seu fórum:
Vermelho -> Será a cor da borda da caixa e do fundo do título da seção.
Verde -> Cor do link que leva para a seção.
Violeta -> Cor do fundo da caixa quando o mouse estiver sobre ela.
Azul -> Endereço da imagem da seta.

2º - A elaboração do código da home-page:
O código que será dado a seguir deverá ser editado e colocado em:
Painel administrativo -> Visualização -> Homepage -> Geral

(carregue na imagem para aumentar)

Tópicos com a tag fff em Fórum dos Fóruns - Página 2 Untitl22

Agora vamos ao código, que será dividido em três partes diferentes:

A parte inicial:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!');
});
});
</script>

Para cada seção deverá copiar e colar este código:

<div class="img_list_hp"><a href="Enedereço da seção"><img height="59" src="Endereço da imagem" alt="Descrição"><span>Título da seção</span></a></div>

Parte final:

<div style="clear: both" id="img_list_alt">Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!</div>

Altere o que está colorido conforme indicado. Se fez tudo certo o resultado provavelmente será algo parecido com este, que é o usado no Fórum dos Fóruns atualmente:

Código:: <script> jQuery(function() { jQuery('.img_list_hp img').mouseover(function() { jQuery('#img_list_alt').html(jQuery(this).attr('alt')); }).mouseout(function() { jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!'); }); }); </script><div class="img_list_hp"><a href="/portal.forum?pid=2"><img height="59" src="http://2img.net/i/fa/fdf/questions.png" alt="Uma vasta gama de tutoriais para compreender das funções do fórum e também deixá-lo cada vez melhor e com a sua cara."><span>Tutoriais e astúcias</span></a></div><div class="img_list_hp"><a href="/-c2/"><img height="59" src="http://2img.net/i/fa/fdf/nuage.png" alt="Temos um ótimo serviço de suporte, com equipe capacitada para lhe atender da melhor forma."><span>Ajuda e suporte</span></a></div><div class="img_list_hp"><a href="/-f71/"><img height="59" src="http://2img.net/i/fa/fdf/peindre.png" alt="Gostaria de ter um tema mais personalizado mas não leva jeito com design? Temos uma equipe pronta para ajudar-lhe!"><span>Criações gráficas</span></a></div><div class="img_list_hp"><a href="/-f24/"><img height="59" src="http://i30.servimg.com/u/f30/11/14/55/92/images10.png" alt="O <a href='http://pt.hitskin.com'>Hitskin</a> é um serviço para compartilhar temas Forumeiros."><span>Hitskin</span></a></div><div class="img_list_hp"><a href="/-c9/"><img height="59" src="http://i62.servimg.com/u/f62/12/62/55/38/voix1010.png" alt="Gostaria de tornar seu fórum mais conhecido, encontrar novos membros para a equipe ou fazer parcerias?"><span>Publicidade</span></a></div><div class="img_list_hp"><a href="/-f50/"><img height="59" src="http://i60.servimg.com/u/f60/11/40/70/67/review10.png" alt="Gostaria de saber o que pensamos do seu fórum e o que nele achamos que pode ser melhor?"><span>Análises</span></a></div><div class="img_list_hp"><a href="/-f15/"><img height="59" src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="Criou um blog Criarumblog? Não fique perdido, também ofeceremos suporte!"><span>Criarumblog</span></a></div><div style="clear: both" id="img_list_alt">Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!</div>

:copyright: Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Adicionar lista de seções na mensagem da home-page