Personalizar code
+3
Sennior
BrunoH.
iHeloaD
7 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Personalizar code
Qual é minha questão:
Como faço igual no fdf o code?
Endereço do meu fórum:
http://temadobpo.sampforum.net
Versão do fórum:
PHPBB3
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 21:31, editado 1 vez(es)
Re: Personalizar code
Olá!
Aceda a Folha de Estilo CSS:
Até mais.
Aceda a Folha de Estilo CSS:
Código:Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS
- 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;
}
Até mais.
Re: Personalizar code
Tem como me passar com o contador de linhas e esta linha verde e colorir diferente cada tipo de código?
Re: Personalizar code
Saudações!
Para o contador.
Aceda à tua "Gestão dos Códigos JavaScript":
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript
Crie um novo Java Script com o código abaixo, investimento nos tópicos:
Logo depois, aceda em teu CSS com o código abaixo:
Painel de Controle Visualização Imagens e Cores Cores Folha De Estilo CSS
Valide.
Até mais.
Para o contador.
Aceda à tua "Gestão dos Códigos JavaScript":
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript
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 Visualização Imagens e Cores Cores 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.
Até mais.
Re: Personalizar code
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.
Re: Personalizar code
Saudações!
Para o contador.
Aceda à tua "Gestão dos Códigos JavaScript":
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript
Crie um novo Java Script com o código abaixo, investimento nos tópicos:
Logo depois, aceda em teu CSS com o código abaixo:
Painel de Controle Visualização Imagens e Cores Cores Folha De Estilo CSS
Valide.
Até mais.
Para o contador.
Aceda à tua "Gestão dos Códigos JavaScript":
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript
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 Visualização Imagens e Cores Cores 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.
Até mais.
Re: Personalizar code
O contador de linhas resulta, mais e as cores diferentes e o negrito no código?
Re: Personalizar code
Olá, Adicione isso em primeiro na sua css:
Resulta?
- 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://2img.net/i/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?
Re: Personalizar code
Não mudou nada, continua mesma coisa!
(mudei meu fórum de endereço, e algumas coisas está se encontrando no SW Design)
(mudei meu fórum de endereço, e algumas coisas está se encontrando no SW Design)
Re: Personalizar code
Olá, Adicione isso em uma pagina html:
Adicione na sua css:
Troque o 242424
Para o codigo exadecimal da cor que queira que fique o texto.
Resulta?
- 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>')});
- 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?
Re: Personalizar code
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!
Re: Personalizar code
Olá, Adicione na sua css:
Resulta ?
- 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 ?
Re: Personalizar code
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
Re: Personalizar code
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
Re: Personalizar code
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
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
Re: Personalizar code
O contador de linhas eu tenho, quero este efeito que colore os codigos que aparece e fica em negrito ( o mesmo do FDF )
Re: Personalizar code
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 :
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:
Até mais
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
Re: Personalizar code
Olá,
Substitua o código de css que o Mikéé forneceu por este:
Até mais.
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.
Re: Personalizar code
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?
Re: Personalizar code
Desisto, obrigado a quem tentou.
iStriker escreveu:Por que os staffers não podem passar tirando do painel de controle?
Tópicos semelhantes
» Personalizar code
» Personalizar code
» Personalizar tag code
» Personalizar code
» Personalizar a tag "code"
» Personalizar code
» Personalizar tag code
» Personalizar code
» Personalizar a tag "code"
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos