Personalizar tag code

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

Resolvido Personalizar tag code

Mensagem por Michelangelo em 18/08/13, 03:42 pm

Qual é minha questão:


Gostaria que a tag code ficasse com esta numeração como aqui no fdf.

Testei os códigos fornecidos nestes tópicos, mas nenhum resultou.

http://ajuda.forumeiros.com/t81404-tag-code-com-contador-de-linha
http://ajuda.forumeiros.com/t70110-contador-de-linhas-na-tag-code

Endereço do meu fórum:
http://artdesign.ativoforum.com

Versão do fórum:
PHPBB3


Última edição por Michelangelo em 21/08/13, 12:29 pm, editado 1 vez(es)
avatar

Michelangelo
Nível 8

Masculino
Inscrito dia : 05/08/2013
Mensagens : 142
Pontos Ativos : 251

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

Resolvido Personalizando Codebox do fórum

Mensagem por First em 18/08/13, 10:16 pm

Crie um novo JavaScript com o código abaixo Investimento: Em todas as páginas
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>')}})});
e adicione o seguinte código na sua folha de estilo CSS
Código:
.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}
Resulta?
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

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

Resolvido Re: Personalizar tag code

Mensagem por Michelangelo em 19/08/13, 07:16 am

Não teve mudança.
avatar

Michelangelo
Nível 8

Masculino
Inscrito dia : 05/08/2013
Mensagens : 142
Pontos Ativos : 251

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

Resolvido Re: Personalizar tag code

Mensagem por Sennior em 19/08/13, 07:24 am

Olá!

Troque o 1° código pelo abaixo:

Código:
jQuery(document).ready(function(){jQuery('.postbody dl.codebox dd code').each(function(){t=1;if(this.innerHTML.indexOf('
')!=-1){t='';i=1;while(i<=this.innerHTML.split('
').length){t+='\n'+i;i++};jQuery(this).before('
'+t+'
')}})});jQuery(document).ready(function(){$("code").prepend("");});
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: Personalizar tag code

Mensagem por Michelangelo em 19/08/13, 08:10 am

Agora teve alguma mudança, mas não ficou correto ainda.

avatar

Michelangelo
Nível 8

Masculino
Inscrito dia : 05/08/2013
Mensagens : 142
Pontos Ativos : 251

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

Resolvido Re: Personalizar tag code

Mensagem por First em 19/08/13, 10:02 am

Tire todos os códigos passado a cima e troque por este
Investimento: Em todas as páginas
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>");});
Resulta?


Até mais...
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

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

Resolvido Re: Personalizar tag code

Mensagem por Michelangelo em 20/08/13, 03:37 pm

Olha, testei sem os javas e também não funcionou.
avatar

Michelangelo
Nível 8

Masculino
Inscrito dia : 05/08/2013
Mensagens : 142
Pontos Ativos : 251

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

Resolvido Re: Personalizar tag code

Mensagem por Sennior em 20/08/13, 05:21 pm

Boa tarde,

Leia o tópico abaixo e dê maior atenção à mensagem do "Convidado" se possível:

<li> http://ajuda.forumeiros.com/t62434-

Atenciosamente.
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: Personalizar tag code

Mensagem por Michelangelo em 20/08/13, 06:54 pm

Olá sheldon.

Está avançando Muito feliz

Agora ficou assim:

avatar

Michelangelo
Nível 8

Masculino
Inscrito dia : 05/08/2013
Mensagens : 142
Pontos Ativos : 251

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

Resolvido Re: Personalizar tag code

Mensagem por Sennior em 21/08/13, 11:35 am

Olá!

Agora vá no teu CSS e coloque o código abaixo:

Código:
.prettyprint ol.linenums li {
padding-left: 15px;
border-left: 3px #6ce26c solid;
}
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: Personalizar tag code

Mensagem por Michelangelo em 21/08/13, 11:41 am

Ficou no mesmo. Não teve mudança.
avatar

Michelangelo
Nível 8

Masculino
Inscrito dia : 05/08/2013
Mensagens : 142
Pontos Ativos : 251

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

Resolvido Re: Personalizar tag code

Mensagem por Sennior em 21/08/13, 11:46 am

Olá!

Coloque este no inicio de teu CSS:

Código:
code {
padding-left: 15px;
border-left: 3px #6ce26c solid;
}
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: Personalizar tag code

Mensagem por Michelangelo em 21/08/13, 11:51 am

Agora apareceu a barra verde, mas ficou sem a numeração. Muito feliz
avatar

Michelangelo
Nível 8

Masculino
Inscrito dia : 05/08/2013
Mensagens : 142
Pontos Ativos : 251

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

Resolvido Re: Personalizar tag code

Mensagem por Sennior em 21/08/13, 12:06 pm

Bem, agora coloque este código JavaScript investimento nos tópicos que irá funcionar, mas tire aquele CSS que eu lhe passei:

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

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: Personalizar tag code

Mensagem por First em 21/08/13, 12:10 pm

Olá novamente,
Troque todos os códigos passado acima por este:
Código:
jQuery(function(){jQuery('code').each(function(){
jQuery(this).parent().parent().find('dt').html('Código:<a href="#" style="float:right;margin-right:5px" onclick="selectCode(this);return false">Selecionar conteúdo</a>');jQuery(this).attr('class','highlight')});
jQuery.getScript('http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js',function(){
jQuery.SyntaxHighlighter.init({'wrapLines':false})})});
jQuery(document).ready(function(){jQuery('div#especial').append('<br><img src="http://i.imgur.com/xNveRoW.png">')});
Resulta?


Até mais,
Passar bem. Piscada 
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

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

Resolvido Re: Personalizar tag code

Mensagem por Michelangelo em 21/08/13, 12:28 pm

perfeito obrigado pela atenção sheldon.
avatar

Michelangelo
Nível 8

Masculino
Inscrito dia : 05/08/2013
Mensagens : 142
Pontos Ativos : 251

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

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