Personalizando o widget da ask


Hoje eu tive que acordar cinco da manhã para terminar um trabalho super importante de história. Estou cansada de tanto estudar e fazer esse trabalho. Ele deve ficar perfeito, porque a professora não é muito amigável, ela cobra demais e se tiver um errinho, ela faz um escândalo que até da medo. Eu ia voltar a dormir, mas lembrei que hoje é meu dia de postar, então decidi postar, com o maior sono. Se tiver algum errinho, é que estou morrendo de sono.

Eu estava fazendo uma ask pro Honey Things e vi que realmente o widget da ask padrão não é bonito, então eu coloquei alguns códigos pra ele ficar bem fofo e bonito para a sidebar. Eu adoro enfeitar as coisas e com isso não é diferente. A Bianca me ensinou o básico, então vou usar os códigos dela como base, o.k? Se não conseguirem, me avise. Agora vamos ao post \oo/
Vamos fazer assim: você irá ir na sua ask, configurações, widget. Em baixo do código que você irá colar na sidebar, irá estar escrito ''editar CSS''. Clique lá e altere todos os códigos por esse:

body {
  margin: 0;
  padding: 0;
  background-color: #ffbec9;
box-shadow: inset 0 0 5px #ffa2b2, 0px 0px 2px #ededed;
  overflow: hidden;
  font-family:tahoma, 11px;
}
.askAnywhere-link {
  color: #ffffff;
}
.askAnywhere-username {
background:#cedded;
box-shadow: inset 0 0 5px #b3cfed, 0px 0px 2px #ededed;
  padding-bottom: 3px;
  border-bottom: dotted 1px #fff;
  word-wrap: break-word;
}
.askAnywhere-username-link {
background:cedded;
box-shadow: inset 0 0 5px #b3cfed, 0px 0px 2px #ededed;
  display: block;
  color: #fff;
  text-decoration: none;
}
.askAnywhere-slogan {
  padding-top: 3px;
  font-weight: bold;
  color: #ffffff;
  word-wrap: break-word;
}
.askAnywhere-box {
  padding: 10px;
  font-size: 12px;
}
.askAnywhere-input {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 65px;
  max-height: 160px;
  padding: 0px;
  border: solid 1px #8b636a;
  font-size: 12px;
  text-align: left;
  overflow: auto;
}
.askAnywhere-button {
background: #cedded;
color:#fff;
box-shadow: inset 0 0 5px #b3cfed, 0px 0px 2px #ededed;
  padding: 3px 3px;
  margin-top: 10px;
}
#askAnywhere_question_form {
  margin: 0;
  padding: 0;
}
#askAnywhere_input_layer,
#askAnywhere_captcha_layer {
  padding-top: 3px;
  color: #8b636a;
}
#captcha {
  display: block;
  width: 90px;
  padding: 8px 4px;
  margin-top: 5px;
  border: solid 1px #8b636a;
  font-size: 14px;
}
div.fieldWithErrors input,
div.fieldWithErrors textarea {
  background: #fff;
}


Pronto, depois salve e verá o resultado ^^

10 comentários:

  1. ja conhecia o tuto é muito util.......

    bjos de morango com muita nutella.....e boa tarde!!

    http://louca-por-html.blogspot.com.br/

    ResponderExcluir
  2. Amo esse tuto, mas nunca cheguei a usar <33

    anainstant.blogspot.com.br

    ResponderExcluir
  3. Ótimo Tutorial,já sabia,fica muito lindo.
    Seguindo segue de volta?

    Blog do Math

    ResponderExcluir
  4. gostei que pena que eu nao tenho ask
    quem me seguir no blog sigo de volta
    http://gb-ronaldo.blogspot.com.br/

    ResponderExcluir
  5. Amei o tutorial, pena que não tenho ask, pois deve ficar bem bonito >w<

    ~Bye
    Explosion of Paradise

    ResponderExcluir
  6. Odeio acordar de manhã, odeio trabalhos, odeio história -n Aff' odeio professoras rabugentas, do tipo cobra venenosa ç.ç e o pior é que são o tipo que mais tem -n Tenho uma que é assim, a chata de matemática, odeio ela e.e
    É muito ruim postar com sono, eu não consigo ><

    Acho lindo c:
    Mas, acho que não irei usar esse tuto, porquê já tá tudo nivelado. Se eu colocar qualquer widget a mais ficará tudo fora dos eixos ç.ç


    Beijos ♥
    d-arkclouds.blogspot.com.br

    ResponderExcluir
  7. Adorei o tutorial, fiquei mesmo com vontade de criar ask só para experimentar. s.s

    ~ : http://delusion-sketches.blogspot.pt/

    ResponderExcluir
  8. Oiii! Sou do blog Chizurukin, vc pediu pra eu seguir de volta e aqui estou >-<
    Curtiii, muito fofo seu blog ;)

    Vim pedir pra seguir meu outro blog, digamos, o "original", pode?
    http://bunny-animesespectaculares.blogspot.pt/

    Se for la dar uma passadinha agradeço ~

    Curti o tuto, tbm tenho alguns la no meu blog ;)
    Bj~

    ResponderExcluir