ShiftActif fórum

Trocar por uma imagem Homepg10
Participe da melhor comunidade sobre fóruns!

Bem vindo Trocar por uma imagem 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! Trocar por uma imagem 1660898911
ShiftActif fórum

Trocar por uma imagem Homepg10
Participe da melhor comunidade sobre fóruns!

Bem vindo Trocar por uma imagem 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! Trocar por uma imagem 1660898911
ShiftActif fórum

ShiftActif é um blog de autoajuda à administradores de comunidades online, que fornece por meio de seus artigos, dicas e astucias para melhorar o desempenho de sites na internet.


Trocar por uma imagem

ShiftActif fórum :: Atendimento & Suporte :: Questões sobre fóruns :: Questões tratadas

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

Resolvido Trocar por uma imagem

Mensagem por IsmaelS. Qui 10 Jan - 14:49

Qual é sua questão:
Olá,

Eu utilizei um efeito de MP Rápida nos tópicos, só queria agora mudar a forma do botão, queria antes colocar uma imagem.

Código CSS:
Código:
 /*www.rmbr.forumeiros.com*/
        /*popup*/
#btn-e-p{
  font-weight:bold;
cursor:pointer;
    transition:all 0.2s;
}
#btn-e-p:hover{
  color:#f0f0f0;
background:#ADADAD;
  transition:all 0.2s;
}
#formulario-mp #username{
font-weight:bold
}
#formulario-mp #username, #formulario-mp input{
min-height:20px;
  border:1px solid #333;
  border-radius:4px;
}
#formulario-mp #text_editor_textarea{
  border:1px solid #333;
  border-radius:4px;
}
    #mp-r:hover{
  color:black;
    transition:all 0.5s;
      background: rgb(96,96,96); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(96,96,96,1) 0%, rgba(214,214,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,96,96,1)), color-stop(100%,rgba(214,214,214,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
 }
    #mp-r{
    padding:6px;
      transition:all 0.5s;
    border:3px solid black;
      border-radius:6px;
      background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(214,214,214,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
color:white;
      font-weight:bold;cursor:pointer;
    }
        #popup{
 
  eft:-100px!Important;
          box-shadow:9px 8px 20px grey;
          border-radius:9px;
          height:auto;
        cursor:pointer;
          width:300px;
          position:absolute;
          right:420px;
          padding:13px;
          border:3px solid black;
          color:#333;font-weight:bold;
      background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(214,214,214,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
  }
        #X{
  color:white;
      background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(214,214,214,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
    border:1px solid #0C5E03;
          cursor:pointer;border-radius:3px;
          width:8px;height:8px;padding-right:3px;
        padding-left:3px;padding-bottom:8.5px;border:1px solid black;color:white;font-weight:bold
        }
        #X:hover{
  color:black;
        background: #a1dbff; /* Old browsers */
    background: rgb(96,96,96); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(96,96,96,1) 0%, rgba(214,214,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,96,96,1)), color-stop(100%,rgba(214,214,214,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
  }


Efeito jS:
Código:
$(document).ready(function(){
    $(".profile-icons:first").append('<span style="position:relative;top:-3px;margin-top:-5px" id="mp-r">MP RÁPIDA</span>');
        $("#mp-r").after("<div id='popup' style=''></div>");
        $("#popup").html('<div id="X" style="color:white">X</div>'+'<center><br><form id="formulario-mp" style="text-align:left" action="/privmsg" method="post" name="post" enctype="multipart/form-data">Enviar MP Para:<br><input id="username" name="username" value="" id="user" type="text"><br><br>Título:<br><input style="width:250px" value="" name="subject" type="text">
    Assunto:<br><textarea style="" id="text_editor_textarea" name="message"></textarea><!--mensagem--><input name="folder" value="inbox" type="hidden"><input name="mode" value="post" type="hidden"><input name="lt" value="" type="hidden"><br><br><input name="post" id="btn-e-p" value="Enviar MP" type="submit"><input type="submit" id="btn-e-p" name="preview" class="" style="margin-left:7px" value="Pré-visualizar" /></form>'+'<br><b style="font-size:8px;opacity:0.6;" />Feito por HenRyqUéè</b></center>');
        $("#X").click(function(){
        $("#popup").fadeOut();
        $(this).fadeOut();
        });
    $("#popup").hide();
    $("#mp-r").click(function(){
    $("#X").fadeToggle();
    $("#popup").fadeToggle();
    });

        });

Como está:
Trocar por uma imagem Imgcj

O botão que queria:
Trocar por uma imagem I_icon_pm


Endereço e versão do meu fórum:
www.master-publicitario.forumeiros.com (phpbb3)

Apresente-nos imagens do problema (se necessário):
Nenhuma.
IsmaelS.

IsmaelS.
Colaborador Actif

Masculino
Idade : 28
PointActif's : 4811
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%

https://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

Mensagem por LucasRPG Qui 10 Jan - 16:32

Olá,Substitua o JS por este

Código:

$(document).ready(function(){
    $(".profile-icons:first").append('<span style="position:relative;top:-3px;margin-top:-5px" id="mp-r"><img src="http://hitskin.com/themes/18/28/66/i_icon_pm.png"></span>');
        $("#mp-r").after("<div id='popup' style=''></div>");
        $("#popup").html('<div id="X" style="color:white">X</div>'+'<center><br><form id="formulario-mp" style="text-align:left" action="/privmsg" method="post" name="post" enctype="multipart/form-data">Enviar MP Para:<br><input id="username" name="username" value="" id="user" type="text"><br><br>Título:<br><input style="width:250px" value="" name="subject" type="text">
    Assunto:<br><textarea style="" id="text_editor_textarea" name="message"></textarea><!--mensagem--><input name="folder" value="inbox" type="hidden"><input name="mode" value="post" type="hidden"><input name="lt" value="" type="hidden"><br><br><input name="post" id="btn-e-p" value="Enviar MP" type="submit"><input type="submit" id="btn-e-p" name="preview" class="" style="margin-left:7px" value="Pré-visualizar" /></form>'+'<br><b style="font-size:8px;opacity:0.6;" />Feito por HenRyqUéè</b></center>');
        $("#X").click(function(){
        $("#popup").fadeOut();
        $(this).fadeOut();
        });
    $("#popup").hide();
    $("#mp-r").click(function(){
    $("#X").fadeToggle();
    $("#popup").fadeToggle();
    });

        });
LucasRPG

LucasRPG
Membro em destaque

Masculino
Idade : 31
PointActif's : 4502
ReputActifs : 11
Mensagens : 140
Inscrição : 02/06/2012

100%

http://cavaleiros-lendarios.forum-livre.com

Resolvido Re: Trocar por uma imagem

Mensagem por IsmaelS. Qui 10 Jan - 16:46

Olá,

Já apareceu o icon, mas ainda ficou com a caixa atrás:
https://i.servimg.com/u/f15/16/43/60/45/1_bmp44.jpg
IsmaelS.

IsmaelS.
Colaborador Actif

Masculino
Idade : 28
PointActif's : 4811
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%

https://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

Mensagem por StyLe® Qui 10 Jan - 18:37

Substitua seu CSS por este:
Código:
 /*www.rmbr.forumeiros.com*/
        /*popup*/
#btn-e-p{
  font-weight:bold;
cursor:pointer;
    transition:all 0.2s;
}
#btn-e-p:hover{
  color:#f0f0f0;
background:#ADADAD;
  transition:all 0.2s;
}
#formulario-mp #username{
font-weight:bold
}
#formulario-mp #username, #formulario-mp input{
min-height:20px;
  border:1px solid #333;
  border-radius:4px;
}
#formulario-mp #text_editor_textarea{
  border:1px solid #333;
  border-radius:4px;
}
#popup{
 
  eft:-100px!Important;
          box-shadow:9px 8px 20px grey;
          border-radius:9px;
          height:auto;
        cursor:pointer;
          width:300px;
          position:absolute;
          right:420px;
          padding:13px;
          border:3px solid black;
          color:#333;font-weight:bold;
      background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(214,214,214,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
  }
        #X{
  color:white;
      background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(214,214,214,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
    border:1px solid #0C5E03;
          cursor:pointer;border-radius:3px;
          width:8px;height:8px;padding-right:3px;
        padding-left:3px;padding-bottom:8.5px;border:1px solid black;color:white;font-weight:bold
        }
        #X:hover{
  color:black;
        background: #a1dbff; /* Old browsers */
    background: rgb(96,96,96); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(96,96,96,1) 0%, rgba(214,214,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,96,96,1)), color-stop(100%,rgba(214,214,214,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
  }

Resulta?


Até mais.
StyLe®

StyLe®
Colaborador Actif

Masculino
Idade : 36
PointActif's : 4419
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012

Localização : SA, FDF, SPD, SHD
100%

Resolvido Re: Trocar por uma imagem

Mensagem por IsmaelS. Qui 10 Jan - 19:33

Não da para mudar o fundo cinzentado para uma imagem ?
IsmaelS.

IsmaelS.
Colaborador Actif

Masculino
Idade : 28
PointActif's : 4811
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%

https://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

Mensagem por LucasRPG Qui 10 Jan - 19:50

Qual fundo que você deseja mudar ? o da popup ou do qual tem o ícone?
LucasRPG

LucasRPG
Membro em destaque

Masculino
Idade : 31
PointActif's : 4502
ReputActifs : 11
Mensagens : 140
Inscrição : 02/06/2012

100%

http://cavaleiros-lendarios.forum-livre.com

Resolvido Re: Trocar por uma imagem

Mensagem por IsmaelS. Qui 10 Jan - 19:51

O icon queria colocar o fundo vermelho.
O pop queria usar esta imagem de fundo:
https://si0.twimg.com/profile_background_images/125555602/bluestrip_bg.png
IsmaelS.

IsmaelS.
Colaborador Actif

Masculino
Idade : 28
PointActif's : 4811
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%

https://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

Mensagem por LucasRPG Qui 10 Jan - 21:46

Substitua o CSS por este.

Código:

 /*www.rmbr.forumeiros.com*/
        /*popup*/
#btn-e-p{
  font-weight:bold;
cursor:pointer;
    transition:all 0.2s;
}
#btn-e-p:hover{
  color:#f0f0f0;
background:#ADADAD;
  transition:all 0.2s;
}
#formulario-mp #username{
font-weight:bold
}
#formulario-mp #username, #formulario-mp input{
min-height:20px;
  border:1px solid #333;
  border-radius:4px;
}
#formulario-mp #text_editor_textarea{
  border:1px solid #333;
  border-radius:4px;
}
#popup{
 
  eft:-100px!Important;
          box-shadow:9px 8px 20px grey;
          border-radius:9px;
          height:auto;
        cursor:pointer;
          width:300px;
          position:absolute;
          right:420px;
          padding:13px;
          border:3px solid black;
          color:#333;font-weight:bold;
      background-image:url(https://si0.twimg.com/profile_background_images/125555602/bluestrip_bg.png);
  }
#X{
  color:white;
      background-color:red;
    border:1px solid #0C5E03;
          cursor:pointer;border-radius:3px;
          width:8px;height:8px;padding-right:3px;
        padding-left:3px;padding-bottom:8.5px;border:1px solid black;color:white;font-weight:bold
        }
        #X:hover{
  color:black;
        background-color:red;
  }

Até mais.
LucasRPG

LucasRPG
Membro em destaque

Masculino
Idade : 31
PointActif's : 4502
ReputActifs : 11
Mensagens : 140
Inscrição : 02/06/2012

100%

http://cavaleiros-lendarios.forum-livre.com

Resolvido Re: Trocar por uma imagem

Mensagem por IsmaelS. Sex 11 Jan - 17:14

Resolvido.
IsmaelS.

IsmaelS.
Colaborador Actif

Masculino
Idade : 28
PointActif's : 4811
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%

https://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

ShiftActif fórum :: Atendimento & Suporte :: Questões sobre fóruns :: Questões tratadas

Permissões neste sub-fórum
Não podes responder a tópicos