Estilo Code por linhas

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

Resolvido Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 11:32 am

Qual é minha questão:
Hello,

Como deixo o code igual o de vocês:


Tipo deixar o code colorido igual /\ e por aquela numeração de linhas.

Endereço do meu fórum:
http://progaweb.forumeiros.com

Versão do fórum:
PUNBB
avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

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

Resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. em 12/07/13, 11:47 am

avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com

Resolvido Re: Estilo Code por linhas

Mensagem por Hizu em 12/07/13, 12:44 pm

Saudações!

Queira checar os seguintes tutoriais:

Atenciosamente,
Hizu. Piscada

Hizu
Nível 9

Masculino
Inscrito dia : 08/07/2013
Mensagens : 249
Pontos Ativos : 360

Ver perfil do usuário

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 02:33 pm

Funcionou não.
avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

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

Resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. em 12/07/13, 02:42 pm

Olá amigo, pelo os tutoriais que lhe passei funcionou corretamente em meu fórum de testes.

Me passe seu código CSS por gentileza.

Atenciosamente,
luizdedezao.
avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com

Resolvido Re: Estilo Code por linhas

Mensagem por Hizu em 12/07/13, 02:44 pm

Olá novamente!

Aceda à sua "Folha de estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS


Lembre-se de habilitar o gerenciamento dos códigos JavaScripts. Visto que você já seguiu os dois tutoriais, adicione este CSS:
Código:
dl.codebox{background-color:#FFF;border:1px solid #C9D2D8;font-size:1em;padding:3px}dl.codebox dt{border-bottom:1px solid #CCC;display:block;font-size:.8em;font-weight:700;margin-bottom:3px;text-transform:uppercase}blockquote dl.codebox{margin-left:0}dl.codebox code{color:#2E8B57;display:block;font-family:Courier,CourierNew,sans-serif;font-size:.9em;font-style:normal;font-variant:normal;font-weight:normal;height:auto;line-height:1.3em;margin:2px 0;max-height:200px;overflow:auto;padding-top:5px;white-space:normal}
.blog .codebox dt{width:92%}* html .blog .codebox dt,*+html .blog .codebox dt{width:100%}
.codebox{display:block}
dl.codebox dt{background:url(http://i45.servimg.com/u/f45/12/05/75/97/script10.png) no-repeat scroll 0 0 transparent;border:0 none;color:#0372BE;font-size:.9em;padding-left:22px;text-transform:none}
.post .postbody dl.codebox dd code{cursor:text}
Flecha ajudeiros Salve!

Atenciosamente,
Hizu. Piscada

Hizu
Nível 9

Masculino
Inscrito dia : 08/07/2013
Mensagens : 249
Pontos Ativos : 360

Ver perfil do usuário

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 02:51 pm

avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

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

Resolvido Re: Estilo Code por linhas

Mensagem por Hizu em 12/07/13, 02:55 pm

@Hizu escreveu:Saudações!

Queira checar os seguintes tutoriais:

Atenciosamente,
Hizu. Piscada

Agora basta o senhor implementar o contador de linhas e o selecionar tudo na tag code com os tutoriais que lhe indiquei. Muito feliz 

Até mais! Piscada

Hizu
Nível 9

Masculino
Inscrito dia : 08/07/2013
Mensagens : 249
Pontos Ativos : 360

Ver perfil do usuário

Resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. em 12/07/13, 02:55 pm

Olá, junte o código passado por nosso amigo Hizu.

Com esse:

Código:
jQuery(document).ready(function(){$("code").prepend("<style>.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}.codebox dd pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px solid #6CE26C;margin-top:-4px;color:#A8A5A5;margin-right:5px;font-family:Consolas,Bitstream Vera Sans Mono,Courier New;padding-right:8px}.codebox dd{overflow-y:hidden;overflow-x:hidden;max-height:none;font-family:Consolas,Bitstream Vera Sans Mono,Courier New;background:url(http://i.imgur.com/eHvfR.png) repeat 0px 0px;padding-top:0px;margin-top:7px}.postbody dl.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}</style>");});

Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Seta Em todas as páginas

avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 02:57 pm

Eu fiz isso olha:
http://progaweb.forumeiros.com/t216-em-breve#360

Não funfo os tutorial..
avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

Ver perfil do usuário http://www.safegame.com.br/
  • 0

Resolvido Re: Estilo Code por linhas

Mensagem por Sennior em 12/07/13, 02:58 pm

Olá amigo,

Faça assim, retire todos os códigos que o Java Script que o senhor tem ativo em teu fórum e salve eles em um editor de texto como o bloco de notas e tente este código:

Código:
function selectCode(a)
{
  // Get ID of code block
  var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
 
  // Not IE
  if (window.getSelection)
  {
      var s = window.getSelection();
      // Safari
      if (s.setBaseAndExtent)
      {
        s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }
      // Firefox and Opera
      else
      {
        // workaround for bug # 42885
        if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
        {
            e.innerHTML = e.innerHTML + ' ';
        }
 
        var r = document.createRange();
        r.selectNodeContents(e);
        s.removeAllRanges();
        s.addRange(r);
      }
  }
  // Some older browsers
  else if (document.getSelection)
  {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
  }
  // IE
  else if (document.selection)
  {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();
  }
}
if(text){}else{ var text = 'Selecionar todos';}
jQuery(document).ready(function(){
  jQuery("dl.codebox dt").not("dl.spoiler > dt").html('Code: <a href="#" onclick="selectCode(this); return false;"><font face="verdana" color="white">--------------------------------------------------------------------------------------------</font>Selecionar conteúdo</a>');
});

Seta Investimento: Nos tópicos.

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Estilo Code por linhas

Mensagem por Hizu em 12/07/13, 03:00 pm

Estranho... Tonto 
O senhor habilitou o gerenciamento dos códigos JS? Se não, habilite-os na página de gestão dos códigos JavaScripts. Lembre-se que quando se há um grande número de códigos JavaScripts na gestão dos mesmos, causa conflito entre eles e muitos deixam de fazer sua função. Desative todos os outros e apenas ative os dos tutoriais que lhe recomendei.

Atenciosamente,
Hizu. Piscada

Hizu
Nível 9

Masculino
Inscrito dia : 08/07/2013
Mensagens : 249
Pontos Ativos : 360

Ver perfil do usuário

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 03:02 pm

@Mikéé escreveu:Olá amigo,

Faça assim, retire todos os códigos que o Java Script que o senhor tem ativo em teu fórum e salve eles em um editor de texto como o bloco de notas e tente este código:

Código:
function selectCode(a)
{
   // Get ID of code block
   var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
 
  // Not IE
   if (window.getSelection)
   {
      var s = window.getSelection();
      // Safari
      if (s.setBaseAndExtent)
      {
         s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }
      // Firefox and Opera
      else
      {
         // workaround for bug # 42885
         if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
         {
            e.innerHTML = e.innerHTML + ' ';
         }
 
        var r = document.createRange();
         r.selectNodeContents(e);
         s.removeAllRanges();
         s.addRange(r);
      }
   }
   // Some older browsers
   else if (document.getSelection)
   {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
   }
   // IE
   else if (document.selection)
   {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();
   }
}
if(text){}else{ var text = 'Selecionar todos';}
jQuery(document).ready(function(){
   jQuery("dl.codebox dt").not("dl.spoiler > dt").html('Code: <a href="#" onclick="selectCode(this); return false;"><font face="verdana" color="white">--------------------------------------------------------------------------------------------</font>Selecionar conteúdo</a>');
});

Seta Investimento: Nos tópicos.

Até mais.

Funcionou obg.. agora o contador de linhas do lado.. nem funciono. Triste 
avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

Ver perfil do usuário http://www.safegame.com.br/
  • 0

Resolvido Re: Estilo Code por linhas

Mensagem por Sennior em 12/07/13, 03:04 pm

Olá,

Agora faça o que o Luiz lá em cima disse. Muito feliz

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 03:08 pm

Blz, mais olha aqui:
http://progaweb.forumeiros.com/t216-em-breve#360

Não tem aquela numeração do lado<<
avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

Ver perfil do usuário http://www.safegame.com.br/
  • 0

Resolvido Re: Estilo Code por linhas

Mensagem por Sennior em 12/07/13, 03:13 pm

Olá,

Mande nos uma Print Screen, pois não posso visualizar o mesmo. Outra coisa, já testou os outros códigos que estão mostrados aqui neste tópico? Teste-os mas não retire o que eu lhe passei.

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 03:17 pm

Ah sim, ja testei todos.. olha:

avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

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

Resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. em 12/07/13, 03:19 pm

Olá amigo, para adicionar a numeração aceda á:

Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts

Título Seta Correspondente ao nome da página JavaScript/jQuery que será criada.
Localização Seta São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Código JavaScript Seta Campo destinado para receber o código JavaScript criado abaixo.
Habilitar o gerenciamento dos códigos JavaScript Seta Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.


Código JavaScript:

Versão PunBB:

Código:
jQuery(document).ready(function(){$("code").prepend("<style>.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}.codebox dd pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px solid #6CE26C;margin-top:-4px;color:#A8A5A5;margin-right:5px;font-family:Consolas,Bitstream Vera Sans Mono,Courier New;padding-right:8px}.codebox dd{overflow-y:hidden;overflow-x:hidden;max-height:none;font-family:Consolas,Bitstream Vera Sans Mono,Courier New;background:url(http://i.imgur.com/eHvfR.png) repeat 0px 0px;padding-top:0px;margin-top:7px}.postbody dl.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}</style>");});
avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com
  • 0

Resolvido Re: Estilo Code por linhas

Mensagem por Sennior em 12/07/13, 03:26 pm

Olá amigo,

Agora adicione este e veja se resulta:

Código:
jQuery(document).ready(function(){jQuery('.postbody dl.codebox dd code').each(function(){t=1;if(this.innerHTML.indexOf('<br>')!=-1){t='';i=1;while(i<=this.innerHTML.split('<br>').length){t+='\n'+i;i++};jQuery(this).before('<pre>'+t+'</pre>')}})});jQuery(document).ready(function(){$("code").prepend("<style>.postbody dl.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}.postbody dl.codebox pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px solid #6CE26C;margin-top:2px;color:#A8A5A5;margin-right:5px;font-family:Consolas,Bitstream Vera Sans Mono,Courier New';padding-right:8px}.postbody dl.codebox code{overflow-y:hidden;overflow-x:hidden;max-height:none;font-family:Consolas,Bitstream Vera Sans Mono,Courier New;background:url(http://i.imgur.com/eHvfR.png) repeat 0px 0px;padding-top:0px;margin-top:7px}</style>");});

Seta Investimento: Em todas as paginas.

Abraços.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 03:35 pm

Funciono não..
avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

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

Resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. em 12/07/13, 03:39 pm

Olá amigo, qual versão seria o fórum em que está usando o código JavaScript repassado ?

Atenciosamente,
luizdedezao.
avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 03:46 pm

Punbb
avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

Ver perfil do usuário http://www.safegame.com.br/
  • 0

Resolvido Re: Estilo Code por linhas

Mensagem por Sennior em 12/07/13, 03:51 pm

Olá amigo,

Estranho isso... Tente usar apenas este, retire todos da tua folha de código JavaScript:

Código:
jQuery(document).ready(function(){$("code").prepend("<style>.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}.codebox dd pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px solid #6CE26C;margin-top:-4px;color:#A8A5A5;margin-right:5px;font-family:Consolas,Bitstream Vera Sans Mono,Courier New;padding-right:8px}.codebox dd{overflow-y:hidden;overflow-x:hidden;max-height:none;font-family:Consolas,Bitstream Vera Sans Mono,Courier New;background:url(http://i.imgur.com/eHvfR.png) repeat 0px 0px;padding-top:0px;margin-top:7px}.postbody dl.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}</style>");});

Este é o mesmo dado por nosso amigo Luiz e era para ter dado exito. Coloque o investimento 'Em todas as paginas' e mesmo se não vier á resultar, tente investimento 'Nos tópicos'.

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Estilo Code por linhas

Mensagem por Uilia em 12/07/13, 04:03 pm

Funciono não.. D=
Mais deixa assim mesmo fico legal até Muito feliz

Obg
avatar

Uilia
Membro do Fórum

Masculino
Inscrito dia : 01/05/2010
Mensagens : 1193
Pontos Ativos : 1841

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

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