Personalizar code

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

Resolvido Personalizar code

Mensagem por iHeloaD em 06/04/13, 11:25 pm

Qual é minha questão:
Como faço igual no fdf o code?

Código:
teste


Endereço do meu fórum:
http://temadobpo.sampforum.net

Versão do fórum:
PHPBB3


Última edição por iStriker em 18/04/13, 05:31 pm, editado 1 vez(es)
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por BrunoH. em 06/04/13, 11:28 pm

Olá!
Aceda a Folha de Estilo CSS:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS
Código:
Código:
.prettyprint ol.linenums {
list-style: decimal outside;
padding-left: 47px;
color: #afafaf;
font-size: 12px;
}
dl.codebox code {
color: rgb(46, 139, 87);
display: block;
font-family: Courier, CourierNew, sans-serif;
font-size: 0.9em;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
line-height: 1.3em;
margin: 2px 0px;
max-height: 200px;
overflow: auto;
padding-top: 5px;
white-space: normal;
}
dl.codebox {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(201, 210, 216);
border-image: initial;
font-size: 1em;
padding: 3px;
}
dl.codebox {
border: 1px solid rgb(201, 210, 216);
font-size: 1em;
padding: 3px;
}
dl.codebox dt {
background: url(http://i45.servimg.com/u/f45/12/05/75/97/script10.png) 0px 0px no-repeat scroll transparent;
border: 0px none;
border-image: initial;
color: rgb(3, 114, 190);
font-size: 0.9em;
padding-left: 22px;
text-transform: none;
}
.prettyprint li.L0, .prettyprint li.L1, .prettyprint li.L2, .prettyprint li.L3, .prettyprint li.L4, .prettyprint li.L5, .prettyprint li.L6, .prettyprint li.L7, .prettyprint li.L8, .prettyprint li.L9 {
list-style: inherit;
background: 0;
}
.prettyprint ol.linenums li {
padding-left: 15px;
border-left: 3px #6ce26c solid;
}
e Valide!

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 07/04/13, 06:23 pm

Tem como me passar com o contador de linhas e esta linha verde e colorir diferente cada tipo de código?

avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por Sennior em 08/04/13, 02:24 pm

Saudações! Muito feliz

Para o contador.

Aceda à tua "Gestão dos Códigos JavaScript":
Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos Códigos JavaScript
Seta Crie um novo Java Script com o código abaixo, investimento nos tópicos:

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

Logo depois, aceda em teu CSS com o código abaixo:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta 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}

Valide. Café

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 code

Mensagem por iHeloaD em 08/04/13, 05:21 pm

Sobre o CSS ele ficou colorido só que verde, eu quero o mesmo colorido de verde e tem como me conseguir ele em negrito e de outras cores como no FDF ? E o javascript do contador de linhas não resultou.
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 09/04/13, 11:38 am

avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por Evidaaηc em 09/04/13, 11:43 am

Saudações! Muito feliz

Para o contador.

Aceda à tua "Gestão dos Códigos JavaScript":
Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos Códigos JavaScript
Seta Crie um novo Java Script com o código abaixo, investimento nos tópicos:

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

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

Logo depois, aceda em teu CSS com o código abaixo:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta 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}
ul.linklist li.rightside{float:right}ul.linklist li.footer-home{float:left}p.rightside{float:right;margin-right:5px}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}

Valide. Café

Até mais.
avatar

Evidaaηc
Usuário destaque

Masculino
Inscrito dia : 06/07/2012
Mensagens : 706
Pontos Ativos : 966

Ver perfil do usuário http://world.forumbrasil.net/

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 09/04/13, 05:42 pm

O contador de linhas resulta, mais e as cores diferentes e o negrito no código?
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por Evidaaηc em 10/04/13, 09:35 am

Olá, Adicione isso em primeiro na sua 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}.forabg{background-color:#1675bc;background-image:url(http://illiweb.com/fa/fdf3/bg_cat.png);background-position:0 0;background-repeat:repeat-x;border:2px solid #;clear:both;margin-bottom:4px;padding:0 5px}

Resulta?
avatar

Evidaaηc
Usuário destaque

Masculino
Inscrito dia : 06/07/2012
Mensagens : 706
Pontos Ativos : 966

Ver perfil do usuário http://world.forumbrasil.net/

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 10/04/13, 09:41 am

Não mudou nada, continua mesma coisa!

(mudei meu fórum de endereço, e algumas coisas está se encontrando no SW Design)
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por Evidaaηc em 10/04/13, 09:51 am

Olá, Adicione isso em uma pagina html:
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();}};
        jQuery(document).ready(function(){jQuery("dl.codebox dt").not("dl.spoiler > dt").html('Código: <a href="#" onclick="selectCode(this);return false"><font face=verdana style=color:transparent>---------------------------------------------------------------------------</font><font color=black>Selecionar conteúdo</font></a>')});
Adicione isso na descrissão de seu forum:

Código:
<script src=http://sw-design.forumeiros.com/h3-></script>

Adicione na sua css:
Código:
    dl.codebox code {
    color: #242424;
    }

Troque o 242424
Para o codigo exadecimal da cor que queira que fique o texto.

Resulta?
avatar

Evidaaηc
Usuário destaque

Masculino
Inscrito dia : 06/07/2012
Mensagens : 706
Pontos Ativos : 966

Ver perfil do usuário http://world.forumbrasil.net/

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 10/04/13, 10:39 am

Agora o código que está no [code] está de outra cor mais escura, quero cores como a do [code] do FDF que tem uma cor para cada tipo de código!
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por Evidaaηc em 10/04/13, 10:50 am

Olá, Adicione na sua css:

Código:
pre.prettyprint{border:3px solid #DDD!important;margin-left:0;max-height:200px!important;overflow:auto!important;width:98.85%!important}.row:hover .fo-resp{display:block}
.prettyprint ol.linenums{padding-left:0!important}.prettyprint{border:none!important}pre.prettyprint{border:3px solid #DDD!important;margin-left:0;max-height:200px!important;overflow:auto!important;width:98.85%!important}

Resulta ?
avatar

Evidaaηc
Usuário destaque

Masculino
Inscrito dia : 06/07/2012
Mensagens : 706
Pontos Ativos : 966

Ver perfil do usuário http://world.forumbrasil.net/

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 10/04/13, 11:12 am

Aqui só adicionou o botão "Selecionar conteudo" mais nada.
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 11/04/13, 10:30 am

avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 12/04/13, 11:04 am

avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 13/04/13, 06:11 pm

avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 14/04/13, 01:24 pm

Ninguém vai me ajudar mais não?

Anônimo escreveu:Os Ajudeiros, Moderadeiros entre outros que nos ajudava do FDF ta ficando mais folgado depois que o Mikéé saiu, ele era o único que sabia ajudar
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 15/04/13, 08:05 am

iStriker escreveu:Ninguém vai me ajudar mais não?

Anônimo escreveu:Os Ajudeiros, Moderadeiros entre outros que nos ajudava do FDF ta ficando mais folgado depois que o Mikéé saiu, ele era o único que sabia ajudar
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por seender em 15/04/13, 10:21 am

Olá!

Não sabem nem o que dizem... mas tudo bem, não vou ficar aqui perdendo meu tempo discultindo. Veja o tutorial: Caixa de código com contador de linhas. Já faz tempo que os membros não se preocupam em ao menos lerem os fóruns de perguntas e respostas frequêntes e tutoriais e astúcia... já que é assim, vamos utilizar a falácia de generalização.

Melhores cumprimentos,
seender
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 15/04/13, 11:00 am

O contador de linhas eu tenho, quero este efeito que colore os codigos que aparece e fica em negrito ( o mesmo do FDF )
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 16/04/13, 11:31 am

avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por Gmtp em 17/04/13, 07:29 pm

Olá, Querido

O único jeito é você fazer o seguinte :

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

Investimento : Nos tópicos
Código :

Código:
jQuery(function () {
if ($("code").filter(function () {
var a = $(this).text().indexOf("["),
b = $(this).text().indexOf("]"),
c = $(this).text().indexOf("[/"),
d = $(this).text().indexOf("<"),
e = $(this).text().indexOf('"'),
f = $(this).text().indexOf("'"),
g = $(this).text().indexOf("/");
return a == -1 || b == -1 || c == -1 || a > b || b > c || d != -1 && d < a || e != -1 && e < a || f != -1 && f < a || g != -1 && g < a
}).each(function () {
$(this).wrapInner('<pre class="prettyprint' + ($(this).text().indexOf("<") == -1 && /[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text()) ? " lang-css" : "") + ' linenums" />')
}).length) {
var s = document.createElement("script");
s.type = "text/javascript";
s.async = !0;
s.src = "http://fmvi-group.googlecode.com/files/fmvi-color-code.js";
document.getElementsByTagName("head")[0].appendChild(s)
};
});

Feito isso, basta Confirmar.

Depois vá em Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e adicione o seguinte código CSS:

Código:
/*** Prettifier nas caixas de códigos ***/
.prettyprint .pln{color:#000}.prettyprint .str{color:#080}.prettyprint .kwd{color:#008}.prettyprint .com{color:#800}.prettyprint .typ{color:#606}.prettyprint .lit{color:#066}.prettyprint .fmvip{color:#660}.prettyprint .tag{color:#008}.prettyprint .atn{color:#606}.prettyprint .atv{color:#080}.prettyprint .dec{color:#606}.prettyprint .linenums li{border-left:3px solid #EBEFF9;padding-left:5px}.prettyprint{font-family:Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;font-size:13px;padding:2px}.prettyprint ol.linenums{margin-bottom:0;margin-top:0}ol.linenums:hover{list-style-type:none}

Até mais
avatar

Gmtp
Membro do Fórum

Masculino
Inscrito dia : 03/01/2013
Mensagens : 1034
Pontos Ativos : 1451

Ver perfil do usuário http://makerforum.forumeiros.com/ https://www.facebook.com/gyovany.francini

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 17/04/13, 07:49 pm

avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por HermeS. em 17/04/13, 08:46 pm

Olá,

Substitua o código de css que o Mikéé forneceu por este:
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 #006400;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}

Até mais.
avatar

HermeS.
Usuário avançado

Masculino
Inscrito dia : 06/09/2012
Mensagens : 304
Pontos Ativos : 366

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

Resolvido Re: Personalizar code

Mensagem por iHeloaD em 17/04/13, 09:07 pm

Isso só coloriu o contador de linhas para um vende mais escuro, por que os staffers não podem passar tirando do painel de controle?
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizar code

Mensagem por Convidado em 17/04/13, 09:48 pm


Convidado
Convidado


Resolvido Re: Personalizar code

Mensagem por iHeloaD em 18/04/13, 05:30 pm

Desisto, obrigado a quem tentou.

iStriker escreveu:Por que os staffers não podem passar tirando do painel de controle?
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

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