ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo 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!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Colaborador Actif
Masculino
Idade : 21
PointActif's : 2374
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%
Ver perfil do usuáriohttps://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Trocar por uma imagem

em 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á:


O botão que queria:



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

Apresente-nos imagens do problema (se necessário):
Nenhuma.
avatar
Membro em destaque
Masculino
Idade : 24
PointActif's : 2065
ReputActifs : 11
Mensagens : 140
Inscrição : 02/06/2012

100%
Ver perfil do usuáriohttp://cavaleiros-lendarios.forum-livre.com

Resolvido Re: Trocar por uma imagem

em 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();
    });

        });
avatar
Colaborador Actif
Masculino
Idade : 21
PointActif's : 2374
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%
Ver perfil do usuáriohttps://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

em 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
avatar
Colaborador Actif
Masculino
Idade : 30
PointActif's : 1982
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012

Localização : SA, FDF, SPD, SHD
100%
Ver perfil do usuário

Resolvido Re: Trocar por uma imagem

em 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.
avatar
Colaborador Actif
Masculino
Idade : 21
PointActif's : 2374
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%
Ver perfil do usuáriohttps://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

em Qui 10 Jan - 19:33
Não da para mudar o fundo cinzentado para uma imagem ?
avatar
Membro em destaque
Masculino
Idade : 24
PointActif's : 2065
ReputActifs : 11
Mensagens : 140
Inscrição : 02/06/2012

100%
Ver perfil do usuáriohttp://cavaleiros-lendarios.forum-livre.com

Resolvido Re: Trocar por uma imagem

em Qui 10 Jan - 19:50
Qual fundo que você deseja mudar ? o da popup ou do qual tem o ícone?
avatar
Colaborador Actif
Masculino
Idade : 21
PointActif's : 2374
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%
Ver perfil do usuáriohttps://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

em 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
avatar
Membro em destaque
Masculino
Idade : 24
PointActif's : 2065
ReputActifs : 11
Mensagens : 140
Inscrição : 02/06/2012

100%
Ver perfil do usuáriohttp://cavaleiros-lendarios.forum-livre.com

Resolvido Re: Trocar por uma imagem

em 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.
avatar
Colaborador Actif
Masculino
Idade : 21
PointActif's : 2374
ReputActifs : 6
Mensagens : 450
Inscrição : 28/11/2012

Localização : Portugal
100%
Ver perfil do usuáriohttps://i.servimg.com/u/f19/18/07/03/67/ava10.png

Resolvido Re: Trocar por uma imagem

em Sex 11 Jan - 17:14
Resolvido.
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum