#estiloask

Vou ensinar dois estilos bem simples mesmo que estou usando nos meus últimos themes. São esses:

1. Copie esse código aqui e coloque antes de </style>

2. Troque o block da sua ask por esse:

{block:Answer} <div class="bubble"><img src="{AskerPortraitURL-24}" align="left" class="askborder"> {Asker} whispered: {Question}</div><br><br> {Answer} {/block:Answer}

1. Copie o código abaixo e cole antes de </style>:

.bubble {

position: relative;

background-color:#fbfbfb;

margin-bottom: -20px;

padding:13px;

text-align: justify;

text-shadow: 0px 1px 1px #fff;

width:480px;}

2. Agora troce o block da sua ask por esse:

{block:Answer} <div class="bubble">  ... {Asker} whispered: {Question}</div><br><br> {Answer} {/block:Answer}

Olhem como vai ficar (online)

Bem, para começar, colem o código abaixo em seu css:

.boxicon1 {position:relative; border-radius:50px; left:-63px; top:-5px; -moz-transition:0.2s; -o-transition:0.2s; -ms-transition:0.2s; -webkit-transition:0.2s; z-index:10;} .boxicon2 {position:relative; border-radius:50px; -webkit-filter: grayscale(100%); -moz-transition:0.2s; -o-transition:0.2s; -ms-transition:0.2s; -webkit-transition:0.2s; z-index:10;} .box1:hover .boxicon1{opacity:0} .box1:hover .boxicon2{-webkit-filter: grayscale(0%);} #perg1{position:relative; top:-60px; background:#fff; padding:10px; z-index:1; text-indent: 50px; color:#333} #pergg{background:#ececec; padding:10px; border-radius:10px; margin-left:80px; margin-top:-64px; min-height:40px; color:#444; margin-bottom:40px; font-family: tahoma; } #pergg a{background:#ddd; padding:5px; margin-right:2px; color:#555; text-transform:uppercase; font-size:8px; border-radius:5px; } #pergg a:hover{color:#fff} #arrow{background:url('http://static.tumblr.com/wj18jyf/igMmmnp3v/arrow1.png'); width:22px; height:26px; margin-left:65px; margin-bottom:-50px; position:relative} #respp{text-indent: 10px; margin-top:-30px; color:#888;}

Agora, procurem por {block:Answer} em seu html, e apague tudo que está entre {block:Answer} e {/block:Answer}. Cole o código abaixo no lugar. 

{block:Answer}     <div class="box1"> <div id="arrow"></div>    <img src="{AskerPortraitURL-64}" class="boxicon2" />    <img src="{AskerPortraitURL-64}" width="56px" class="boxicon1" /> <div id="pergg"><ch>{Asker}:</ch> {Question} </div> <div id="respp">{Answer}</div>     </div> {/block:Answer}

O estilo de ask é esse:

Primeiramente, copie em seu CSS (região entre <style> e </style>):

/****ASK STYLE BY DREAMINGLOUD***/ .balaoask {background:#c0c0c0;color:#fff;padding:10px;text-align:center;} .balaoask a {color:#fff;} .borda {border-radius:30px;}

Edite as configurações de background e cores ok? Não é muito elaborado esse estilo, mas fica fofo em themes pra tumblr pessoal.

E antes de </body> coloque o seguinte código:

{block:Answer} <img align="left" class="borda" src="{AskerPortraitURL-40}" /> <div class="balaoask"><span></span>{Asker} disse: {Question}</div> <br> {Answer} {/block:Answer}

Então, mais um estilo de ask. Sei que demorei pra fazer, mas é que fico meio sem inspiração, e é complicado fazer estilo de ask fofo e que você gostem. Espero que usem e mudem as cores certinho, pra não ficar feito no seu theme.

CSS:

/*** Stilo da Ask por tthy ****/ .pergunta  {font-family : calibri; display: block;  padding: 5px; text-align: justify; background: #ffe3ed; color: #d3a5b6; text-shadow: 1px 1px 0px #fdeef3; overflow: hidden; box-shadow: 0 6px 2px -2px rgba(160,160,160,0.1);  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 12px; line-height: 20px;} .fotoperfil {box-shadow: 0 6px 2px -2px rgba(160,160,160,0.1);  -webkit-border-radius: 5px; box-shadow: 0px 0px 11px 0px rgba(160,160,160,0.2); border: 5px solid #c5e0e5; display: block;   position: absolute; } .local { display: block; position: relative;} .perguntou {-webkit-border-radius: 5px; display: block; background: #c5e0e5; margin-left: 36px; height: 24px; padding: 5px; line-height: 24px; font-family : calibri; color: #9ac2c7; font-size: 10px; text-transform: uppercase;} .perguntou a {text-decoration: none; border-bottom: 1px solid #fff; margin-left: 1px; margin-right: 1px; color: #fff; text-shadow: 1px 1px 0px #aeced4; letter-spacing: 0px;} .perguntou g {border-bottom: 1px solid #fff; margin-left: 1px; margin-right: 1px; color: #fff; text-shadow: 1px 1px 0px #aeced4; letter-spacing: 0px;} .oi {margin-top: -3px; border-top: 4px solid rgba(231,195,208,0.5); font-family : calibri; display: block;  padding: 5px; text-align: justify; background: #eee; color: #999; text-shadow: 1px 1px 0px #fff; overflow: hidden; font-size: 12px; line-height: 20px; margin-left: 5px; margin-right: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;} .perme {float: right; margin-right: 10px;} .perme a {border: none; color: #9ac2c7; text-shadow: 0px 0px 0px #fff; text-decoration: none; font-size: 13px;}

Essa é a parte do HTML, vocês devem por no local do block de ask. Dai tem que ver se tem box/caixa e deve deixar da forma certa.

HTML:

{block:Answer} <div class="caixa"> <div class="local"> <img src="{AskerPortraitURL-24}" class="fotoperfil"></div> <div class="perguntou">O que você quer <g><a>{Asker}</a></g>? <span class="perme"><a href="{Permalink}">♥</a></span></div> <img style="margin-left: 8px; margin-top: 4px; margin-bottom: -3px;" src="http://static.tumblr.com/ifqwhnb/8Tkmkp22u/sb.png"> <div class="pergunta"> {Question} </div> <div class="oi"> {Answer}   </div> </div> {/block:Answer}

Exemplo:

Bom, para começar, copie o código abaixo e edite as cores.

/* --- ESTILO DE ASK BY MANDS, CANTINHO HTML --- */ #perg1 {position:absolute; padding:7px 10px 7px 10px; text-align:center; background:cor1; width:90%; margin-bottom:5px; margin-top:-7px; color:#cor2; font-family:georgia; font-style:italic} #perg1 a{color:#cor3} .perg1 n{color:#cor3} #perg2 {background: #cor4; color:#cor5; float:right; width:97%; z-index:2; padding: 13px 10px 10px 10px; margin: 20px -4px 12px 0px; font-family:tahoma;} .anony {position:absolute; margin-top:-10px; -moz-box-shadow: -3px -4px #cor1;-webkit-box-shadow: -3px -4px #cor1; -o-box-shadow: -3px -4px #cor1; -ms-box-shadow: -3px -4px #cor1; box-shadow: -3px -4px #cor1; z-index:3; -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg);} /* --- FIM DO ESTILO DE ASK --- */

Bom, coloque sempre a mesma cor em cores do mesmo número... E para entender melhor as cores:

cor1: É o background marrom, onde há o nome da pessoa que enviou a ask, junto com a cor da borda do icon da pessoa. cor2: É a cor da fonte onde está escrito por quem a ask foi enviada. cor3: É a cor do nome de quem enviou a ask. cor4: É o background da pergunta. cor5: É a cor da fonte da pergunta.

Bom, o css está aí, é só colar antes de </style>... Agora, procure em seu theme por {block:Answer} e {block:Answer} a apague todo o conteúdo que está entre eles, e cole isso no lugar:

<!-- BLOCK DA ASK - CANTINHO-HTML --> {block:Answer} <img src="{AskerPortraitURL-40}" class="anony" align="left"> <div id="perg1">Ask enviada por:</d> <n>{Asker}</n></div> <div id="perg2">{Question}</div>{Answer} {/block:Answer} <!-- FIM DO BLOCK DA ASK -->

Bom, é isso... se gostar/usar dê like e credite :]

Estilo de ask: Faz tempo que não posto estilo de ask né? Resolvi fazer uma, mesmo que ficasse simples, achei interessante postar. Espero que gostem.

Esse é o CSS. Lembre-se de tirar o estilo de ask anterior do seu tema, caso use algum estilo nosso:

/* Ask estilo por tthy */ .pergunta {text-align: justify; background: #c9f3e8; padding: 9px; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;   font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; font-style: italic;font-size: 11pt; color: #8cc0b2; text-shadow: 1px 1px 0px #d3f4eb;} .perguntou {background: #ecd09e; padding: 10px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; margin-top: -10px; font-family: 'Nunito', helvetica; font-size: 8px; font-style: normal; color: #b29562; text-shadow: 0px 0px 0px #d3f4eb; text-transform: uppercase; margin-bottom: 4px; margin-left: -5px; margin-right: -5px; box-shadow: 0 4px 0px -2px rgba(0,0,0,0.1);} .perguntou a {color: #cd1411;} .perguntou g {color: #cd1411;} .iconask {float: left; margin-right: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-top: -9px; margin-left: -11px;} .resposta {background: #f5f4f4; padding: 3px; margin-top: 8px; text-align: justify;line-height: 19px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Esse é o block de ask, lembre-se de colocar o box de caixa caso seu tema tenha:

{block:Answer} <div class="pergunta"> <div class="perguntou"> <img src="{AskerPortraitURL-30}" class="iconask"> <g>{Asker}</g> perguntou à {TimeAgo}</div> {Question}</div> <div class="resposta">{Answer}</div> {/block:Answer}

Cole o código abaixo antes de </style>:

/*** Estilo de ask by: fortunefad3d.tumblr ***/ .forask {background: #eee; /* Cor de fundo da caixinha da pergunta */ color: #a7a7a7; /* Cor da letra */ padding: 3px; font-family: 'Verdana'; /* fonte */ font-size: 11px; /* Tamanho da fonte */ text-align: justify; overflow: hidden; text-shadow: 1px 1px 2px #fff;; } .forask2 {background: #f72; /* Cor da caxinha de quem perguntou */ color: #fff; /* Cor da Letra */ text-align: center; font-family: 'pixel'; /* fonte */ font-size: 8px; /* tamanho da fonte */ padding: 3px; margin-bottom: 10px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;} .forask img {border-radius: 100px; margin: 3px;} .forask2 a {text-decoration: none; color: #000; /* Cor do link */} @font-face {src: url('http://static.tumblr.com/08l8cbl/qLfmfajt6/pf_arma_five.ttf'); font-family: 'pixel';}

Depois procure por {block:Answer} e abaixo dele, cole este outro código:

<div class="forask"> <img src="{AskerPortraitURL-64}" align="right"> {Question} </div> <div class="forask2">Ask by: {Asker}</div> <center>{Answer}</center>

Exemplo --> aqui.

Cole isso entre <style> e </style>

/** ESTILO DE ASK - (gustavomiquelino.tumblrcom) **/ .askeer {background: #292929; padding: 3px; float: left; overflow: hidden; width: 448px; color: #fff; font: 10px 'Calibri'; text-transform: uppercase; margin-top: 3px; height: 13px; text-shadow: 1px 1px 0px #101010; -webkit-border-top-left-radius: 3px; -moz-border-top-left-radius: 3px; border-top-left-radius: 3px;} .askeer a {color: #fff} .question {background: #e0e0e0; color: #888; width: 448px; font: 10px 'Calibri'; padding: 3px; text-align: justify; display: block; overflow: hidden; text-transform: uppercase; -moz-border-radius: 1px; border-radius: 1px; margin-top: -30px; webkit-border-bottom-left-radius: 3px; -moz-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px} .answer {color: #363636; background: #eee; border-left: 3px #101010 solid; margin: 10px; padding: 1px 5px 1px 5px; font: 11px 'Calibri';}

Agora substitua o seu {block:Answer} por isso:

{block:Answer} <div class="askeer">{Asker} disse:</div> <img src="{AskerPortraitURL-40}" align="right" border="3px solid #101010"> <br><br><br><br> <div class="question">{Question}</div> <div class="answer">{Answer}</div> {/block:Answer}