Data/hora atual: 18.03.19 18:01

2 Resultados encontrados para chatbox_main_options

Largura do fórum

Olá!
Spoiler:
a.hover,#at16eatdr a:hover{background:#e0eefa;color:#333;text-decoration:none}#at_promo{display:none;font-size:12px}#at_promo button{background:#ee6a44;border-bottom:1px solid #d4522c;border-left:1px solid #ffa389;border-right:1px solid #d4522c;border-top:1px solid #ffa389;color:#fff}#at_promo .at-promo-content{margin-top:12px}#at_promo .at-promo-btn{padding-top:10px}#at_promo .at-promo-top{background:url(https://illiweb.com/fa/addthis/60x60_atn_logo.jpg) no-repeat 0 0;padding:10px 0 5px 70px}#at_promo h4{font-size:14px;font-weight:700;margin:0 0 4px}#at_promo h4 sup{color:#ee6a44;font-size:11px}#at_promo span{display:block}#at_promo .at-promo-btm-ffx{background:url(https://illiweb.com/fa/addthis/60x60_at_firefox_toolbar.jpg) no-repeat 0 0;padding:6px 0 0 70px}#at_promo .at-promo-btm-ie{background:url(https://illiweb.com/fa/addthis/60x60_at_ie_toolbar.png) no-repeat 0 0;padding:6px 0 0 70px}#left .module-advert{background-color:#fff;color:#222;margin-bottom:4px;overflow:hidden;padding:0}#left .module-advert span.corners-bottom,#left .module-advert span.corners-top{margin:0}#main .module-advert{background-color:#fff;color:#222;margin-bottom:4px;overflow:hidden;padding:0 10px}#main .module-advert span.corners-bottom,#main .module-advert span.corners-top{margin:0 -10px}#forum_rules table{border-collapse:separate;border-spacing:5px 5px;table-layout:fixed;width:100%}#forum_rules .logo{overflow:hidden;vertical-align:top;width:100px}#forum_rules .logo img{max-width:100px}div.navbar ul.linklist li.rightside strong a{font-weight:400}@media print{*{background-color:#fff;background-image:none;color:#000}body{font-size:10pt;margin:0;padding:0}body#phpbb div#wrap{margin:0;width:85%}span.corners-bottom,span.corners-top{display:none}#wrap #logo-desc img,#wrap #logo-desc p,div#page-header div.navbar,div#page-header div.navbar ul.linklist{display:none!important}#wrap div.headerbar{border-bottom:1px solid #ccc;margin:0}#wrap div#page-body h2{border-bottom:1px solid #ccc;font-weight:bolder;margin-bottom:1em}#wrap div#page-body .left-box,#wrap div#page-body .pagination,#wrap div#page-body div.topic-actions,#wrap div.post .right,#wrap div.postbody div.signature,#wrap div.postbody img,#wrap div.postbody ul.profile-icons,#wrap dl.postprofile{display:none!important;float:none}#wrap dl.postprofile{float:none}#wrap div.postbody .online{background-image:none}#wrap div.postbody{width:auto}#wrap div.postbody h3{font-size:10pt}#wrap div.postbody p.author{border-bottom:1px dashed #ccc;width:100%}#wrap div#page-body div.post{border-top:3px double #ccc;padding:0 0 2em}div.postbody{float:none;width:100%}#wrap div#page-body div.post .content{overflow:visible}div.noprint{display:none}}a[href="/u1"]{display:none}a[href="/u30922"]{text-shadow:0 0 7px #d4d6d5}#main-content{margin-left:15px}div.profile1.dl.dt.a.img{top:50px!important}li.row{-moz-border-radius:8px;-webkit-border-radius:8px;border-bottom:none;border-left:none;border-radius:8px;border-top:none}li.row:hover{-moz-border-radius:8px;-webkit-border-radius:8px;border-left:none;border-radius:8px}ul.topiclist.forums{-moz-border-radius:8px;-webkit-border-radius:8px;border-left:none;border-radius:8px}ul.topiclist dd{border-left:none}dl.icon{border:none!important}div.forumbg.announcement{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}#divbold,#divcolor,#divitalic,#divsmilies,#divstrike,#divunderline,#main-content a.cgu-buttons,#message,button.button2,input#submit_button,input.button1,input.button2,input.liteoption,input.mainoption{-moz-border-radius:3px;-webkit-border-radius:3px;background:#f4f5f4 url(https://i.servimg.com/u/f66/11/96/49/61/tabbg10.png) no-repeat;border:solid 1px #d4d6d5;border-radius:3px;padding:2px}ul.topiclist.topics.bg_none{-moz-border-radius:8px;-webkit-border-radius:8px;background-color:#fff;border-left:none;border-radius:8px}div.vote.gensmall{border-top:solid 1px #d4d6d5;position:relative!important;right:-3px!important;top:-20px!important}div.panel.row3,div.post.row1,div.post.row1.online,div.post.row2,div.post.row2.online{-moz-border-radius:7px;-webkit-border-radius:7px;background-color:#fff;border:solid 1px #d4d6d5;border-radius:7px;padding:2px}div#tabs li a{-moz-border-radius-topright:3px;background-color:#eaeaea;border:solid 1px #d4d6d5;border-bottom:solid 1px #eaeaea;border-top-left-radius:3px;border-top-right-radius:3px}div.postprofile{-moz-border-radius:7px;-webkit-border-radius:7px;background-color:#eaeaea;border:solid 1px #d4d6d5;border-radius:7px;left:2px;padding:2px}ul.profile-icons{-moz-border-radius-bottomleft:10px;-moz-border-radius-topright:3px;background-color:#eaeaea;border:solid 1px #d4d6d5;border-bottom-left-radius:10px;border-top-right-radius:3px;height:25px;padding:5px 5px 10px 10px !important;position:relative;right:-48px;top:-18px}div.postprofile:hover,img.i_post:hover,img.i_reply:hover,ul.profile-icons li:hover{-moz-opacity:.9;filter:alpha(opacity=90);opacity:.9}#divbold:hover,#divcolor,#divitalic:hover,#divsmilies:hover,#divstrike:hover,#divunderline:hover,#main-content a.cgu-buttons:hover,#message:hover,button.button2:hover,input#submit_button:hover,input.button1:hover,input.button2:hover,input.liteoption:hover,input.mainoption:hover{background-position:0 100%;border:1px solid #363636;color:#363636}#chatbox_main_options li:hover,ul.online-users li:hover{font-size:12px}#chatbox_contextmenu{-moz-border-radius:3px;-webkit-border-radius:3px;background:#f4f5f4 url(https://i.servimg.com/u/f66/11/96/49/61/tabbg10.png);border:solid 1px #696969;border-radius:3px;padding:2px;z-index:99999999999!important}#chatbox_contextmenu p.close{color:#000}#chatbox_contextmenu p{border-bottom:solid 1px #696969}#chatbox_contextmenu p:hover{font-size:12px}#divbold,#divcolor,#divitalic,#divsmilies,#divstrike,#divunderline,#main-content a.cgu-buttons,#message,.spoiler dt,button.button2,input#submit_button,input.button1,input.button2,input.liteoption,input.mainoption{-moz-border-radius:3px;-webkit-border-radius:3px;background:#f4f5f4 url(https://i.servimg.com/u/f66/11/96/49/61/tabbg10.png);border:solid 1px #DDD;border-radius:3px;padding:2px}.spoiler{-moz-border-radius:3px;-webkit-border-radius:3px;background:#f4f5f4 url(https://i.servimg.com/u/f66/11/96/49/61/tabbg10.png) repaeat-y;border:solid 1px #DDD;border-radius:3px;padding:2px}#chatbox_footer,#chatbox_header,#chatbox_header,#chatbox_members,#chatbox_row_ clearfix,#chatbox_row_2 clearfix{background-color:#fff!important;cursor:pointer!important;z-index:9999999999!important}#savec{position:relative}.save-bloc{background:#efefef url(https://illiweb.com/fa/prosilver/bg_button.gif) repeat-x;border:1px solid #BCBCBC;color:#555!important;cursor:point;dispay:none;display:none;left:0;padding:5px;position:absolute;top:20px;white-space:nowrap;z-index:999}.save-bloc div:hover{color:#050505!important}.save-bloc div{cursor:pointer}.save-bloc select{background:#ccc;border:1px solid #aaa;margin-bottom:5px}#wrap{-moz-border-radius:10px;-webkit-border-radius:10px;width:997px!important}#page-header .navbar ul.navlinks{background:url(https://i.servimg.com/u/f49/15/29/79/25/meniu111.png) no-repeat 50% 0;height:50px;left:-64px;position:relative;width:1040px}#page-footer .navbar,#page-header .navbar{background:none;margin-left:32px;width:900px}#page-footer,div.navbar,div.navbar ul.linklist{display:block!important}.navbar{background-color:#FFF!important;clear:both;padding:0 10px}#page-header .navbar ul.navlinks li a:hover{color:#efefef;text-shadow:#000 -1px -1px 1px}#page-header .navbar ul.navlinks li a{bottom:-20px;color:#fff;font-family:arial;font-size:17px;margin:5px;position:relative;text-shadow:#000 1px 1px 1px}.table-title,div.module div.inner div.h3{color:#fff;font-family:arial;font-size:14px;text-shadow:#000 -1px 1px 1px}.icon .dterm .lastpost,.icon .dterm .posts,.icon .dterm .topics{color:#fff;font-family:arial;text-shadow:#000 -1px 1px 1px}.chatbox-title{color:#fff;float:left;font-family:arial;margin:0;padding:2px 5px 0;text-shadow:#000 1px 1px 1px;width:15em}.module{-moz-border-radius:10px;-webkit-border-radius:10px;border:2px solid #5fadd4;padding:0}.post{border:3px solid #5fadd4}div.newslink{-moz-border-radius:15px;-webkit-border-radius:15px;border:1px solid #000}.forabg,.forumbg announcement{-moz-border-radius:10px;-webkit-border-radius:10px;border:1px solid #5fadd4;border-radius:10px}.module .h3{background-image:url(https://i.servimg.com/u/f49/15/29/79/25/cat10.png);margin:-5px -5px auto;padding:10px;text-align:center;width:155px center}.post .h3{background-image:url(https://i.servimg.com/u/f49/15/29/79/25/cat10.png)}.input.button1,button.button2,input.button2{-moz-border-radius:3px;-webkit-border-radius:3px}#search-box{display:none!important}.viewonline{-moz-border-radius:10px;-webkit-border-radius:10px;background-color:#549ABD}.mainmenu:hover{border-bottom:1px solid #fff!important}.postprofile{-moz-border-radius:10px;-webkit-border-radius:10px;border:1px solid #efefef;padding:15px 10px 10px 0;text-align:center}.vote .vote-button,.vote-no-bar{display:none}.vote .vote-button:first-child{display:block}.vote{-moz-border-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;background-color:#eaeaea;border:1px solid #d4d6d5;padding:4px 1px;text-align:center;width:20px}.vote .vote-no-bar{display:none}.vote .vote-bar{border-bottom:1px solid #d4d6d5;border-left:0;border-right:0;border-top:1px solid #fff;font-size:0;height:50px;margin:0;padding:3px 0;width:20px}.vote .vote-bar-plus{margin-left:7px;width:6px}.vote .vote-bar-minus{margin-left:7px;width:6px}.vote .vote-button a[href $="plus"]{background:url(https://i.servimg.com/u/f46/16/56/73/62/12.png);background-repeat:no-repeat;color:transparent;display:block;height:21px;width:22px}.vote .vote-button a[href $="minus"]{background-image:url(https://i.servimg.com/u/f46/16/56/73/62/-11.png);background-repeat:no-repeat;color:transparent;display:block;height:21px;width:22px}#page-footer{border:3px solid #efefef}.h3,h3{border-bottom:1px solid #efefef}.inputbox:hover{border:1px solid #efefef}ul.navlinks{border-bottom:0 solid #FFF}ul.linklist li a img{-moz-opacity:.5;filter:alpha(opacity=50);opacity:.5}ul.linklist li a img:hover{-moz-opacity:1;cursor:allowed;filter:alpha(opacity=100);opacity:1}
.fade {
display:inline-block;
background: -moz-linear-gradient(left, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgb(255,255,255)), color-stop(1.00, rgba(255,255,255,0)));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#00ffffff, GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#00ffffff, GradientType=1)";
}
.blur {
display:inline-block;
color:#ddd;
text-shadow: 0 0 2px #aaaaaa;
text-shadow: 0 0 4px #aaaaaa;
text-shadow: 0 0 6px #aaaaaa;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=2)";
filter:
progid:DXImageTransform.Microsoft.MotionBlur(strength=1,direction=310)
progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}
.flipH {
display:inline-block;
-moz-transform:scale(-1,1);
-o-transform:scale(-1,1);
-webkit-transform:scale(-1,1);
transform:scale(-1,1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-1,
M12=0,
M21=0,
M22=1,
SizingMethod="auto expand");
}
.flipV {
display:inline-block;
-moz-transform:scale(1,-1);
-o-transform:scale(1,-1);
-webkit-transform:scale(1,-1);
transform:scale(1,-1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=-1, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=0,
M21=0,
M22=-1,
SizingMethod="auto expand");
}

zen
por Hyouki
em 11.02.16 16:59
 
Buscar em: Questões resolvidas sobre a aparência do fórum
Tópico: Largura do fórum
Respostas: 6
Visto: 819

[TUTORIAL] Personalizar o Chatbox

Muitos fóruns possuem seus chatbox ativados e fazem dele um ponto de passagem de todos os usuários do fórum, seja para jogar conversa fora ou mesmo para debater assuntos importantes. Visto tal importância, este tutorial lhe ajudará a personaliza-lo, deixando- mais atrativo para os usuários do fórum.



--> Tutoriais, Dicas e Astúcias <--
Personalizar o Chatbox




- Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar o Chatbox do Fórum, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder à:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)

/!\ Como o chatbox funciona de mesma forma para todas as versões, não é necessário dividir o nosso estudo para cada uma, uma vez que as propriedades e classes de uma também correspondem às outras.



- Ter uma noção de CSS em relação ao que pode ser personalizado:
Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois não basta adicionar o link da imagem, melhor dizendo, temos de saber trabalhar a aparência.
O que podemos utilizar para personalizar o chatbox:

  • background-color:
    Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor, existe outros tipos, mas para não complicar, analisaremos desta forma.
    @EXEMPLO escreveu:background-color: #FF0000;

  • background-image:
    Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
    @EXEMPLO escreveu:background-image: url(https://illiweb.com/bl/logo.png);

  • background-repeat:
    Definirá se haverá repetição da imagem ou não (no-repeat), podendo esta repetição fazer-se somente na horizontal (repeat-x), na vertical (repeat-y) ou também nos dois planos (repeat).
    @EXEMPLO escreveu:background-repeat: no-repeat;

  • background-attachment:
    Permitirá definir se a imagem toma uma posição de rolagem (scroll), sendo que estará sempre na mesma posição, independentemente do tamanho da caixa de texto, ou de fixagem (fixed), que fará com que a imagem fique na posição definida, mesmo que a caixa de texto aumente.
    @EXEMPLO escreveu:background-attachment: scroll;

  • background-position:
    Para definir a posição da imagem, se no topo (top), em baixo (bottom), à esquerda (left), à direita (right) ao centro (center), ou então por definição de valores em percentagem (%) ou em píxeis (px).
    @EXEMPLO escreveu:background-position: bottom right;
    background-position: 2px 10px;
    Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.

  • color:
    Poderá definir a cor da letra do campo de texto. Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor,
    @EXEMPLO escreveu:color: #FF0000;

  • font-size:
    Caso queira um tamanho de letra diferente. Nesta propriedade apenas teremos de adicionar o tamanho da letra, podendo ser em várias medias,
    @EXEMPLO escreveu:color: 10pt;

  • font-family:
    Se pretender uma diferente. Nesta propriedade apenas teremos de adicionar o o nome das fontes, podendo serem separados por vérgulas caso tenha uma ordem de prioridade,
    @EXEMPLO escreveu:font-family Verdana, Geneva, sans-serif;


Algumas propriedades que formos aplicar podem não funcionar devido às alterações que existem no código CSS de base dos nossos fóruns, sendo assim teremos de utilizar um meio de fazer as nossas modificações serem mais "poderosas" que o CSS de base. Para isso, nas propriedades que em primeira vista não funcionarem, antes do ponto-e-vírgula, adicione a palavra !important, como neste exemplo:
color: #FF0000 !important;




- Agora vamos compreender como funcionam as classes CSS para cada área:
Vamos avaliar o que cada classe CSS modifica, agora que vimos as propriedades que podemos aplicar em cada uma, temos de compreender muito bem isso para que possamos criar um código que tenha os resultados desejados!

(carregue na imagem para aumentar)
Parte suporior Parte superior do chatbox, onde encontra-se o título e os botões de conexão, ao lado direito.
h2.chatbox-title a.chat-title
(carregue na imagem para aumentar)
Texto 'Chatbox' Parte superior do chatbox onde encontra-se escrito o título "Chatbox". Não aplicável para a versão PhpBB 2 devido à estrutura característica da versão!
(carregue na imagem para aumentar)
Botões de conexão Aplica-se à todos os botões situados na parte superior do chatbox, como conectar-se, sair, atualização automática...
(carregue na imagem para aumentar)
Usuários conectados Região onde encontram-se todos os usuários conectados e ausentes, esta classe aplica-se mais especificamente ao fundo.
(carregue na imagem para aumentar)
Chat Região onde encontram-se as mensagens postadas. Esta classe aplica-se também mais para o fundo da caixa.
.chatbox_row_1
(imagem não disponível)
Fundo 1 Fundo que é aplicado às mensagens ímpares (primiera, terceira), de modo intercalado. Esta classe também serve somente para personalizar o fundo, não tendo efeito sobre os textos.

.chatbox_row_2
(imagem não disponível)
Fundo 2 Fundo que é aplicado às mensagens pares (segunda, quarta), de modo intercalado. Esta classe também serve somente para personalizar o fundo, não tendo efeito sobre os textos.
.chatbox_row_3
(imagem não disponível)
Fundo 3 Fundo que é aplicado raramente e não está presente em todas as versões.
(carregue na imagem para aumentar)
Parte inferior Região onde ficam as opções de postagem, BBCodes e a caixa de mensagens. Esta classe aplica-se também para a região do fundo.



- Vejamos um exemplo:
Neste exemplo, iremos personalizar a caixa de mensagens do chatbox num Fórum com versão PhpBB 3.

Código:
#chatbox {
background-image: url(https://illiweb.com/fa/admin/icones/help_pt.png);
background-repeat: no-repeat;
background-position: bottom right;
}




--> Tutoriais, dicas e astúcias <--
Personalizar o Chatbox




  • Existem outras possibilidades de personalização mais expecíficas?
    Existem! Para que possa ter uma noção, pode-se personalizar cada botão BBCode! Isso somente não foi explicado neste tutorial pois era algo muito direcionado, coisa que para nós não seria necessário estar explicando. Caso queira personalizar uma certa região de forma mais específica, poderá nos perguntar ou ser você mesmo a encontra-la, para isso leia este tutorial!





© Fórum dos Fóruns



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Personalizar o Chatbox
por Solkis
em 22.12.09 23:00
 
Buscar em: Widgets e módulos personalizados
Tópico: [TUTORIAL] Personalizar o Chatbox
Respostas: 0
Visto: 13824

Voltar ao Topo

Ir para: