Estilo Code por linhas

4 participantes

Ir para baixo

Tópico resolvido Estilo Code por linhas

Mensagem por Uilia 12.07.13 15:32

Qual é minha questão:
Hello,

Como deixo o code igual o de vocês:
Estilo Code por linhas 1Gycib9

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
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. 12.07.13 15:47

LuizLopes.
LuizLopes.
*****

Membro desde : 04/01/2011
Mensagens : 444
Pontos : 743

http://fenixextreme.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Hizu 12.07.13 16:44

Saudações!

Queira checar os seguintes tutoriais:

Atenciosamente,
Hizu. Piscada
avatar
Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 18:33

Funcionou não.
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. 12.07.13 18:42

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.
LuizLopes.
LuizLopes.
*****

Membro desde : 04/01/2011
Mensagens : 444
Pontos : 743

http://fenixextreme.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Hizu 12.07.13 18:44

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
avatar
Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 18:51

Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Hizu 12.07.13 18:55

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
avatar
Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. 12.07.13 18:55

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

LuizLopes.
LuizLopes.
*****

Membro desde : 04/01/2011
Mensagens : 444
Pontos : 743

http://fenixextreme.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 18:57

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

Não funfo os tutorial..
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Sennior 12.07.13 18:58

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Hizu 12.07.13 19:00

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
avatar
Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 19:02

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 
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Sennior 12.07.13 19:04

Olá,

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

Até mais.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 19:08

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

Não tem aquela numeração do lado<<
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Sennior 12.07.13 19:13

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 19:17

Ah sim, ja testei todos.. olha:

Estilo Code por linhas OoGZo1K
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. 12.07.13 19:19

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>");});
LuizLopes.
LuizLopes.
*****

Membro desde : 04/01/2011
Mensagens : 444
Pontos : 743

http://fenixextreme.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Sennior 12.07.13 19:26

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 19:35

Funciono não..
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por LuizLopes. 12.07.13 19:39

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

Atenciosamente,
luizdedezao.
LuizLopes.
LuizLopes.
*****

Membro desde : 04/01/2011
Mensagens : 444
Pontos : 743

http://fenixextreme.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 19:46

Punbb
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Sennior 12.07.13 19:51

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Estilo Code por linhas

Mensagem por Uilia 12.07.13 20:03

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

Obg
Uilia
Uilia
Super Membro

Membro desde : 01/05/2010
Mensagens : 1193
Pontos : 1841

http://www.safegame.com.br/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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