Detalhes da questão

Endereço do fórum: http://suportedesign.forumeiros.com/
Versão do fórum: PunBB

Descrição

Olá!

Estou a utilizar os códigos fornecidos pelo @Cepheus nesta dúvida: https://ajuda.forumeiros.com/t106801-avatar-ao-lado-da-mensagem-rapida, resultou mas agora queria colocar uma seta virada para o avatar a sair da caixa de resposta rápida como neste: https://imgur.com/a/LzfPt

O meu está desta forma:

Olá, adicione esse código em sua folha de estilo css:

Código:

#text_editor_textarea, #textarea_content iframe#text_editor_iframe:before {
    border-color: transparent #d6d6d6 transparent transparent;
    border-style: solid;
    border-width: 15px;
    content: '';
    display: block;
    height: 0;
    left: -30px;
    position: absolute;
    top: 15px;
    width: 0;
}


Até mais.

Sem efeito amigo, não apareceu seta nenhuma.

Troque o código css por este:

Código:

.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode:before {
    border-color: transparent #d6d6d6 transparent transparent;
    border-style: solid;
    border-width: 15px;
    content: '';
    display: block;
    height: 0;
    left: -30px;
    position: absolute;
    top: 15px;
    width: 0;
}

Até mais.

Resultou agora queria deixar a seta adaptada com a caixa ou seja deixar o interior da seta e uma borda como a caixa de resposta, onde aponta a seta vermelha:


Use este código pois modiquei algumas coisas:

Código:

.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode:before {
border-color: transparent #d6d6d6 transparent transparent;
    border-style: solid;
    border-width: 13px;
    content: '';
    display: block;
    height: 0;
    left: -27px;
    position: absolute;
    top: 6px;
    width: 0;
}

Troque o código por este:

Código:

.sceditor-container.ltr.wysiwygMode:before , .sceditor-container.ltr.sourceMode:before {
border-color: transparent #d6d6d6 transparent transparent;
    border-style: solid;
    border-width: 13px;
    content: '';
    display: block;
    height: 0;
    left: -27px;
    position: absolute;
    top: 6px;
    width: 0;
}
.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode {margin-left:-10px;margin-top:10px;width:100%!important;}
div.sceditor-group {margin-left:-50px!important;margin-right:65px!important;}

Seria assim?
Até mais.

Não era isso porque e o código mexeu com os botões de BBCode.

O que seria então ? não entendi... pelo que eu vi na sua imagem, parecia que gostarias de deixar os botões BBcode mais pra perto da seta.

A seta vermelha esta apontar para o interior da caixa ou seja aquele meio branco:


E depois à volta da caixa tem aquela borda meio cinza, era assim que queria a seta, percebeu?

Finalmente entendi [...]
Gostarias de trocar a cor fundo da seta né?

E mudar a cor da borda, bom , sobre o fundo dela não há como, só sobre a borda, esse é seu código atual, certo?

.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode:before {
border-color: transparent #d9d9d9 transparent transparent;
border-style: solid;
border-width: 13px;
content: '';
display: block;
height: 0;
left: -27px;
position: absolute;
top: 6px;
width: 0;
}

Repare que destaquei alguns valores em laranja, você pode modifica-los, em #d9d9d9 seria a cor da seta (fundo,borda...), em solid seria o estilo da borda, e por fim em 13px seria o tamanho da borda.

Até mais.

Como é que adiciono uma corda à volta da seta ou seja a borda? É que não estou a conseguir :/

Você se refere a cor da borda? mas expliquei acima...

Veja outro exemplo:

.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode:before {
border-color: transparent #000 transparent transparent;
border-style: dotted;
border-width: 13px;
content: '';
display: block;
height: 0;
left: -27px;
position: absolute;
top: 6px;
width: 0;
}

Onde está #000 é a cor da borda, basta modificar por outra cor.
Até mais.

Sim e mudei mas esta linha:

Código:

border-color: transparent #000 transparent transparent;

Coloriu foi a seta e não fez a borda amigo.

Não há forma, só da para colorir a seta em si, a borda será da mesma cor que a seta.
Entendeu?

Lamento

Até mais.

Ah então fica como está, só duas coisas se possível, queria colocar o avatar mais para cima que aparece na caixa de resposta mas não estou a conseguir. Outra era se possível a seta só aparecer na caixa de resposta rápida porque está aparecer também na normal.

Troque o código por este:

Código:

#textarea_content > div:before {
border-color: transparent #000 transparent transparent;
border-style: dotted;
border-width: 13px;
content: '';
display: block;
height: 0;
left: -27px;
position: absolute;
top: 6px;
width: 0;
}

Sobre subir o avatar, bom, precisa criar um novo tópico, pois são perguntas distintas.

Até mais.

Ficou óptimo obrigado!