Estilo de ask: por pedidos eu resolvi fazer o tutorial desse estilo de ask. Ele Ă© bem simples e mega simples de fazer.Â
/******** Ask por HTMLuv! */ /* Estilo de quem fez a pergunta */ .perguntador{background:#b398bd; /* cor do fundo */ padding: 3px; text-align: left; text-transform: uppercase; margin-right: -40px; margin-left:-10px;  /* distùncias da margem, altere como quiser */ border-top-left-radius: 5px; border-bottom-left-radius: 5px; font-family: verdana, sans-serif; font-size: 10.2px;} .perguntador a {text-decoration: none; color:#623e6d; /* cor da fonte */ } /* Estilo da pergunta */ .pergunta {background: #ededd9; /* cor do fundo */ color: #b6b58c; /* cor da fonte */ padding:3px; font: normal 11px 'georgia'; margin-left:-5px; /* distùncia da margem, altere como quiser */ border-bottom-left-radius: 5px; margin-right:-10px;} /*Estilo da resposta */ .resposta {background: #; /* cor do fundo */ color: #888; /* cor da fonte */padding:3px; font: normal 11px 'georgia'; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;} /* Estilo do balão com a imagem */ .goto{background: white; /* cor do fundo */ border-radius: 5px; padding: 3px; padding-bottom:1.5px; width: 30px; /* largura conforme as dimensÔes da imagem */ margin-left:490px; margin-top: -7px; /* distùncia da margem, altere como quiser */ position: absolute;} .goto img{border-radius: 5px; margin-top:1px;} .goto:after {right: 100%; top: 50%; border: solid transparent;content: " ";height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: white; /* cor do fundo*/ border-width: 5px; /* tamanho da setinha */ margin-top: -5px; /* distùncia da margem, altere como quiser */}
O cĂłdigo acima Ă© o CSS. VocĂȘ deve colocĂĄ-lo antes de </style>. No cĂłdigo vocĂȘ vai saber onde mudar a largura, altura, cores, distĂąncias e afins.Â
{block:Answer} <div class="goto"><img src="{AskerPortraitURL-30}"></div> <div class="perguntador"> <img src="https://cdn1.iconfinder.com/data/icons/fugue/icon/user-white.png" width="15" style="margin-top:-25px; margin-bottom:-5px;"> {Asker}</div> <div class="pergunta">{Question}</div> <div class="resposta">{Answer}</div> {/block:Answer}
O cĂłdigo acima Ă© o block da postagem. Lembre-se sempre de que, se mudar as dimensĂ”es da imagem, terĂĄ que alterar tambĂ©m no CSS.Â
E Ă© isso. Beijinhos. "3Â












