Mudar posição da imagem do quote

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Mudar posição da imagem do quote

Mensagem por pecktovit em 09/08/11, 08:32 pm

Qual é minha questão:
Quero mudar a posição da imagem do meu quote, no meu fórum
Esse tópico foi feito especialmente para mostrar os resultados:
http://transfor-mj.forumeiros.com/t21-teste-12312321#36

Então quero que se entre nele e veja, que no spoiler e no code tem um icone em cima, numa posição meio que de fora mas meio que dentro, quero fazer isso também com o quote...

Imagens do meu problema:

http://img853.imageshack.us/img853/3469/semttulo2zo.png

Endereço do meu fórum:
http://transfor-mj.forumeiros.com

Versão do meu fórum:
PHPBB3

Esqueci de por meu css
Código:

    body {
    background-repeat: repeat-y;
    background-position: center;
    min-height: 101%;
    }
    #wrap {
    padding: 25px;
    margin-top: -35px;
    margin-bottom: -60px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url('http://a.imagehost.org/0164/bg_footer.png');
    width: 911px;
    min-width: 800px;
    }
    /* Header-------------------------------------------------*/
    .headerbar {
    height: 200px;
    background-image: url('http://img847.imageshack.us/img847/9751/bgheaderd.jpg');
    background-position: top right;
    background-repeat: no-repeat;
    margin-top: 1px;
    }
    #page-body {
    margin-left: 20px;
    width: 871px;
    }
    div.navbar  {
    margin-left: 20px;
    width: 851px;
    }




        blockquote {
        border: 1px solid #C9D2D8;
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        }
    .post {
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        }
    .button2, .button3{
        border: 2px solid #000000;
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        }

        cite {
        border-radius: 10px 10px 0px 0px;
        -moz-border-radius: 10px 10px 0px 0px;
        -webkit-border-radius: 10px 10px 0px 0px;
        }

        .spoiler {
        border: 2px solid #000000;
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        }

        .spoiler dt {
        border-radius: 10px 10px 0px 0px;
        -moz-border-radius: 10px 10px 0px 0px;
        -webkit-border-radius: 10px 10px 0px 0px;
        }

    blockquote,blockquote blockquote,blockquote blockquote blockquote{-moz-border-radius:5px;-moz-box-shadow:0 1px 5px rgba(0,0,0,.15);-webkit-border-radius:5px 5px;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.15);background:#fff url(http://server2.iconfinder.com/data/icons/fatcow/32x32/document_quote.png) top right no-repeat;background-color:#F9F9F9;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#F9F9F9), to(#F0F0F0));border:1px solid #DEDEDE;border-radius:-15px -15px;box-shadow:0 5px 5px rgba(0,0,0,.15);padding:10px 20px;}


    .codebox.spoiler dt{background:url(http://i66.servimg.com/u/f66/11/96/49/61/new20d10.png) no-repeat top right}.codebox dd{margin-top:-18px}.codebox.spoiler dd{margin-top:-15px}code{color:#536482!important;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;}.codebox{-moz-border-radius:5px;-webkit-border-radius:5px;background:#FFF!important;border-radius:5px;text-shadow:1px 1px 0 #fff;}

    .codebox dt{background:url(http://i66.servimg.com/u/f66/11/96/49/61/page_w10.png) no-repeat top right;border:0;border-bottom:0px solid RoyalPurple;font-size:1.2em;font-weight:600;height:20px;padding-top:15px;position:relative;top:-15px;}.codebox.hidecode dd{margin-top:-40px;position:relative;z-index:99;}
avatar

pecktovit
Nível 9

Masculino
Inscrito dia : 09/06/2011
Mensagens : 174
Pontos Ativos : 322

Ver perfil do usuário http://transfor-mj.forumeiros.com/forum

Resolvido Re: Mudar posição da imagem do quote

Mensagem por Flavisic em 10/08/11, 12:38 pm

Olá!

A região crítica está na parte assinalada a vermelho:
blockquote,blockquote blockquote,blockquote blockquote blockquote{-moz-border-radius:5px;-moz-box-shadow:0 1px 5px rgba(0,0,0,.15);-webkit-border-radius:5px 5px;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.15);background:#fff url(http://server2.iconfinder.com/data/icons/fatcow/32x32/document_quote.png) top right no-repeat;background-color:#F9F9F9;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#F9F9F9), to(#F0F0F0));border:1px solid #DEDEDE;border-radius:-15px -15px;box-shadow:0 5px 5px rgba(0,0,0,.15);padding:10px 20px;}
Terá de substituir o "right" por "left".

Resultou?!

Piscada
avatar

Flavisic
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 09/11/2007
Mensagens : 6290
Pontos Ativos : 3467

Ver perfil do usuário http://www.webscriptner.com/

Resolvido Re: Mudar posição da imagem do quote

Mensagem por pecktovit em 10/08/11, 12:40 pm

Não é mudar o canto (da direita/right para esquerda/left) mas a posição, na imagem da para ver que o [CODE] E O [SPOILER] tem um icone emcima? tipo meio que fora e meio que dentro, metade a metade, quero fazer isso no quote... :Z
avatar

pecktovit
Nível 9

Masculino
Inscrito dia : 09/06/2011
Mensagens : 174
Pontos Ativos : 322

Ver perfil do usuário http://transfor-mj.forumeiros.com/forum

Resolvido Re: Mudar posição da imagem do quote

Mensagem por pecktovit em 10/08/11, 01:56 pm

Aff niguem responde ...


Última edição por pecktovit em 10/08/11, 06:22 pm, editado 2 vez(es)
avatar

pecktovit
Nível 9

Masculino
Inscrito dia : 09/06/2011
Mensagens : 174
Pontos Ativos : 322

Ver perfil do usuário http://transfor-mj.forumeiros.com/forum

Resolvido Re: Mudar posição da imagem do quote

Mensagem por iTrade em 10/08/11, 02:01 pm

Olhe o Double Post ! Estilo cool

Amigo tente este código:

Spoiler:
blockquote,blockquote blockquote,blockquote blockquote blockquote{-moz-border-radius:5px;-moz-box-shadow:0 1px 5px rgba(0,0,0,.15);-webkit-border-radius:5px 5px;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.15);background:#fff url(http://server2.iconfinder.com/data/icons/fatcow/32x32/document_quote.png) top right no-repeat;background-color:#F9F9F9;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#F9F9F9), to(#F0F0F0));border:1px solid #DEDEDE;border-radius:-15px -15px;box-shadow:0 5px 5px rgba(0,0,0,.15);padding:10px 20px;}
avatar

iTrade
Nível 9

Masculino
Inscrito dia : 23/07/2011
Mensagens : 171
Pontos Ativos : 271

Ver perfil do usuário http://maniac-forum.forumeiros.com/

Resolvido Re: Mudar posição da imagem do quote

Mensagem por pecktovit em 11/08/11, 12:09 pm

Perdi esperança ja D: Niguem responde, vou deixar aberto mas so deus sabe quando vai ter resposta ...
avatar

pecktovit
Nível 9

Masculino
Inscrito dia : 09/06/2011
Mensagens : 174
Pontos Ativos : 322

Ver perfil do usuário http://transfor-mj.forumeiros.com/forum

Resolvido Re: Mudar posição da imagem do quote

Mensagem por Flavisic em 11/08/11, 06:48 pm

Olá!

A resposta não surge por obra divina... ás vezes o que é pedido pode não ter solução ou pode não estar dentro dos conhecimentos dos membros que o podem ajudar! Piscada

Bom, eu tentei arranjar um forma do quote adoptar um estilo semelhante ao spoiler e ao code, o que é difícil, senão impossível, visto que não é a mesma estrutura, que possa provocar esse efeito.

Aldrabando um pouco, consegui obter um efeito semelhante, mas como disse, aldrabado, isto porque o contorno fica sobre a imagem, mas é algo pouco perceptível, visto que a imagem é dum tom semelhante ao contorno.

Experimente então colocar este código no final do código já existente, caso seja o pretendido, elimine o que já possuía, relacionado com o "bloquote".
Código:
blockquote div {
padding: 10px 20px;
background: #fff url(http://i46.servimg.com/u/f46/11/66/91/15/tovitd10.png) 100% -10px no-repeat;
border: 1px solid #C9D2D8;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
box-shadow:0 5px 5px rgba(0,0,0,.15);
}
blockquote,
blockquote blockquote,
blockquote blockquote blockquote {
background: transparent url(http://i46.servimg.com/u/f46/11/66/91/15/tovit10.png) top right no-repeat;
border:1px solid transparent;
border-radius: -15px -15px;
padding: 10px 0px;
}
blockquote blockquote {
margin: 0;
}
Ou para lhe facilitar, pegando no código colocado na sua primeira mensagem, já com a modificação:
Código:
    body {
    background-repeat: repeat-y;
    background-position: center;
    min-height: 101%;
    }
    #wrap {
    padding: 25px;
    margin-top: -35px;
    margin-bottom: -60px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url('http://a.imagehost.org/0164/bg_footer.png');
    width: 911px;
    min-width: 800px;
    }
    /* Header-------------------------------------------------*/
    .headerbar {
    height: 200px;
    background-image: url('http://img847.imageshack.us/img847/9751/bgheaderd.jpg');
    background-position: top right;
    background-repeat: no-repeat;
    margin-top: 1px;
    }
    #page-body {
    margin-left: 20px;
    width: 871px;
    }
    div.navbar  {
    margin-left: 20px;
    width: 851px;
    }


    .post {
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        }
    .button2, .button3{
        border: 2px solid #000000;
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        }

        cite {
        border-radius: 10px 10px 0px 0px;
        -moz-border-radius: 10px 10px 0px 0px;
        -webkit-border-radius: 10px 10px 0px 0px;
        }

        .spoiler {
        border: 2px solid #000000;
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        }

        .spoiler dt {
        border-radius: 10px 10px 0px 0px;
        -moz-border-radius: 10px 10px 0px 0px;
        -webkit-border-radius: 10px 10px 0px 0px;
        }

blockquote div {
padding: 10px 20px;
background: #fff url(http://i46.servimg.com/u/f46/11/66/91/15/tovitd10.png) 100% -10px no-repeat;
border: 1px solid #C9D2D8;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
box-shadow:0 5px 5px rgba(0,0,0,.15);
}
blockquote,
blockquote blockquote,
blockquote blockquote blockquote {
background: transparent url(http://i46.servimg.com/u/f46/11/66/91/15/tovit10.png) top right no-repeat;
border:1px solid transparent;
border-radius: -15px -15px;
padding: 10px 0px;
}
blockquote blockquote {
margin: 0;
}


    .codebox.spoiler dt{background:url(http://i66.servimg.com/u/f66/11/96/49/61/new20d10.png) no-repeat top right}.codebox dd{margin-top:-18px}.codebox.spoiler dd{margin-top:-15px}code{color:#536482!important;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;}.codebox{-moz-border-radius:5px;-webkit-border-radius:5px;background:#FFF!important;border-radius:5px;text-shadow:1px 1px 0 #fff;}

    .codebox dt{background:url(http://i66.servimg.com/u/f66/11/96/49/61/page_w10.png) no-repeat top right;border:0;border-bottom:0px solid RoyalPurple;font-size:1.2em;font-weight:600;height:20px;padding-top:15px;position:relative;top:-15px;}.codebox.hidecode dd{margin-top:-40px;position:relative;z-index:99;}

Resultou?! Ou era isso que pretendia?! Piscada
avatar

Flavisic
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 09/11/2007
Mensagens : 6290
Pontos Ativos : 3467

Ver perfil do usuário http://www.webscriptner.com/

Resolvido Re: Mudar posição da imagem do quote

Mensagem por pecktovit em 12/08/11, 10:51 pm

ALELUUUUUUUUUUUUIA Feliz TE AMOOOO (no-)

pode fechar funcionou exatamente como eu queria! MUUUUUUUITO OBRIGADO, não sei nem como te agradeçer ...
avatar

pecktovit
Nível 9

Masculino
Inscrito dia : 09/06/2011
Mensagens : 174
Pontos Ativos : 322

Ver perfil do usuário http://transfor-mj.forumeiros.com/forum

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum