Barra de rolagem das Codebox

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

Resolvido Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 20/11/14, 10:49 pm

Detalhes da dúvida

Versão do fórum : Invision
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://schultzgames.forumeiros.com/

Descrição do problema

Tenho vários tópicos com tutoriais e nestes tutoriais existem diversos scripts...

como neste por exemplo:

http://www.schultzgames.com/t77-tutorial-criar-um-array-lista-de-objetos#152


O que gostaria de fazer é remover a barra de rolagem LATERAL, deixando o script inteiro de cima a baixo, e gostaria de adicionar uma barra de rolagem HORIZONTAL, impedindo que linhas pulem para baixo...


Última edição por MarcosSchultz em 28/11/14, 12:22 am, editado 1 vez(es)
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por Sennior em 21/11/14, 12:38 pm

Saudações,

Peço desculpas, mas não compreendi bem.
Poderia especificar sua questão por imagens?

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: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 21/11/14, 01:11 pm

avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por Gaaratsu em 22/11/14, 01:44 am

Saudações autor!

Adicione o seguinte código no início da tua CSS:
Código:
code.punbb_block, pre.punbb_block {
overflow-x: scroll !important;
}
Caminho: Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS

Não se esqueça de salvar após implementa-lo! OK

Atenciosamente,
Hakuouki Contente
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5986
Pontos Ativos : 7478

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 22/11/14, 09:01 pm

Colei este codigo na CSS, salvei e tudo, más nada acontece.

Já tentei vários outros metodos pesquisando por ai, más nada da certo
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por Gaaratsu em 22/11/14, 10:10 pm

@MarcosSchultz escreveu:Colei este codigo na CSS, salvei e tudo, más nada acontece.

Já tentei vários outros metodos pesquisando por ai, más nada da certo

Estranho... aqui apareceu ela! Pensativo

Vejamos: o senhor deseja retirar a barra scroll vertical e adicionar uma horizontal nos code, certo? zen


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5986
Pontos Ativos : 7478

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 22/11/14, 11:51 pm

Exato, somente isto
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por Gaaratsu em 23/11/14, 12:37 am

Substitua o código fornecido anteriormente por este:
Código:
code.punbb_block, pre.punbb_block {
overflow-x: scroll !important;
overflow-y: none !important;
}

Até! Contente


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5986
Pontos Ativos : 7478

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 23/11/14, 02:46 pm

Cara, nenhum efeito ainda. As codebox continuam como estavam.


( o efeito está na CSS ativo )
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por Gaaratsu em 23/11/14, 05:17 pm

Substitua por este:
Código:
pre.highlight.punbb_block.prettyprint.lang-null.linenums.theme-balupton.prettyprint-has {
overflow-y: scroll !important;
overflow-x: none !important;
}

Até! Contente


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5986
Pontos Ativos : 7478

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 23/11/14, 05:52 pm

Continua a mesma coisa... barra de rolagem lateral normal e o script não aparece inteiro. e a barra de rogalem horizontal ainda não aparece
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por Gaaratsu em 23/11/14, 06:08 pm

Poderia me enviar a tua CSS por gentileza?

Até! Contente


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5986
Pontos Ativos : 7478

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 23/11/14, 06:11 pm

Código:
.pagination {
float: none !important;
left: -50% !important;
position: relative !important;
}
a[href="javascript:showhide(document.getElementById('plus_menu'))"]{
left: 2% !important;
position: relative !important;
}
.paginati{
left: +50% !important;
position: relative !important;
}
/* Menu-------------------------------------------------*/
.navbar {

clear: both;
background-image: url("http://i75.servimg.com/u/f75/16/15/60/55/barra_10.jpg");
padding:0px 10px;
}
ul.linklist li {
list-style-type: none;
width: auto;
font-size: 1.0em;
line-height: 2.2em;
display: inline;
}
ul.linklist li a img {
vertical-align: middle;
}
div#page-footer {
background-image: url('');
background-position: bottom center;
background-repeat: no-repeat;
padding: 23px;}

ul#picture_legend {
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('aqui');
   text-align: CENTER;
   padding: 24px 0;
   }

li.row:hover {
background: url(CheatsGo) 100% 100% repeat;
background-position: right;
background-repeat: no-repeat;
background-color: #F0F9FF;}

.codebox dt {
   display: block;
   padding: 2px;
   background-image: url('http://g.imagehost.org/0127/imagine_cod.png');
   background-repeat: no-repeat;
   background-position: top right;
   text-transform: uppercase;
   font-weight: bold;
   }
.row .pagination {
  display: block;
  float: right;
  width: auto;
  margin-top: 0;
  font-size: 0.9em;
  background: url('http://g.imagehost.org/0404/multipage.gif') no-repeat 0 50%;; padding-left:15px; padding-right:0; padding-top:1px; padding-bottom:1px
  }

#page-header #search-box {
display: none;
}

.messaging-box textarea {
  border: 1px solid #c4c4c4;
        background-position: bottom right;
  background-repeat:no-repeat;
  background-attachment: scroll;
        background-image: url('http://i40.tinypic.com/9qgyg7.jpg');
  }
.postbody img {max-width: 500px;}

li > a.mainmenu[href="/memberlist"] { display : none; }
li > a.mainmenu[href="/calendar"] { display : none; }
li > a.mainmenu[href="/groups"] { display : none; }

a.copyright, a.icon-home {
color: #ffffff;
}

#wrap {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #000000;
}
p.rightside + p {
display: none;
}

p.rightside {
display: none;
}




#chatbox:after {
content: 'Pornografia e desrespeito com os demais resultará em BAN... O resto ta liberado o/' !important;
background: url('http://i.imgur.com/QWzWG1j.png') left center no-repeat !important;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
background-color: transparent !important;
border: 1px solid green !important;
color: green !important;
display: block !important;
font-size: 12px !important;
padding: 10px !important;
padding-left: 35px !important;
}






#stats {
  background: #F4F4F4;
  font-size: 11px;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  color: #333;
  border: 1px solid #DDD;
  border-bottom: none;
  margin-top: 8px;
  padding: 8px 10px;
}
#stats .h3 + p {
  float: right;
}
#stats .h3, .onlinelist br + strong + br, .onlinelist a + br + br +br + br, #i_whosonline {
  display: none;
}
#stats + .h3 {
  border: none;
  font-weight: normal;
  text-transform: none;
  position: relative;
  margin-top: -26px;
  text-align: right;
  right: 14px;
  top: 33px;
}

#stats + .h3 a {
  font-size: 13px;
}
.onlinelist {
  font-size: 12px;
  color: #333;
  background: #F4F4F4;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  border: 1px solid #DDD;
  border-top-style:  dashed;
  margin-top: 8px;
  padding: 8px 10px;
}
.onlinelist em {
  font-style: normal;
}


a.mainmenu[href="/faq"]{
display: none !important;
}


/*Trocar @ por Moderadores*/
#chatbox > p span.user > span:after {
content: 'MOD ';
}
#chatbox > p span.user > span strong,
a.chat-title, #chatbox_header a.cattitle strong {
z-index: 999;
}


.button, button.button2, input.button2, input[type="button"], input[type="reset"], input[type="submit"] {background-image: url();border: 1px solid #ddd;border-radius: 2px;color: #666;display: inline;font-family: Arial,Helvetica,sans-serif;font-size: 12px;font-weight: 400;line-height: 17px;margin: 0;padding: 3px 7px;text-align: center;text-decoration: none;}



li > a.mainmenu[href="/memberlist"] {display: -webkit-inline-box!important;}

.pagination span strong {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #f4f5f4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: solid 1px #DDD;
border-radius: 3px;
padding: 7px 10px;
color: #000;
}

.pagination span a:link {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background: #f4f5f4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: solid 1px #DDD;
border-radius: 6px;
padding: 6px 10px;
color: #000;
}

 .pagination span a:link:hover, .pagination span strong:hover {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border: solid 1px #DDD;
border-radius: 45px;
padding: 4px 15px;
background: #424242 url('');
color: #FFF;
padding: 4px 15px;
}
strong.pagination a, .topic-paging a {
text-align: center !important;
margin-left: 250px !important
}




#rep_post {white-space: nowrap;margin: 6px 4px;float: right;}
#rep_post .bs_inline {list-style: none;}
#rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
#rep_post .bs_inline > li:first-child {margin-left: 0;}
#rep_post .bs_inline img {vertical-align: middle;}
#rep_post span img {cursor: pointer;}
#rep_post .reput_vote {
background-image: url('http://i.imgur.com/UGqTZqe.png');
background-repeat: repeat-x;
background-position: 0 1px;
font-size: 10px;
padding: 2px 10px !important;
color: #fff;
font-weight: bold;
display: inline-block;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}
.reput_vote.positive {background-color: #8db13e;}
.reput_vote.zero {background-color: #6a6a6a;}

pre.highlight.punbb_block.prettyprint.lang-null.linenums.theme-balupton.prettyprint-has {
overflow-y: scroll !important;
overflow-x: none !important;
}
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 25/11/14, 10:45 am

up?
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 26/11/14, 12:53 am

up 2 ?
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por Sennior em 26/11/14, 04:59 am

Saudações,

Mas vejo que já existe outro estilo de codebox em teu fórum, veja:
Seta http://prntscr.com/5a8y8g

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: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 26/11/14, 12:13 pm

@Sennior escreveu:Saudações,

Mas vejo que já existe outro estilo de codebox em teu fórum, veja:
Seta http://prntscr.com/5a8y8g

Até mais.

Sim, é um efeito para " colorir " os scripts, o que eu gostaria de fazer é deixar o script inteiro, de cima a baixo ( sem a barra de rolagem lateral ) e colocar uma barra de rolagem horizontal em baixo...
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 27/11/14, 09:22 pm

up
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por JScript em 27/11/14, 10:26 pm

@MarcosSchultz escreveu:up
Eu não resisti e tive que logar aqui para te explicar que o fato de as linhas dos comentários serem "divididas" para baixo pelo fato de não existir uma barra de rolagem que as deixe inteiras, em nada isso vai atrapalhar na hora de selecionar e copiar o código pois o que você está vendo na tela é apenas uma visualização, nada mais!!!

Te dar um CSS que deixe a visualização da forma que você quer, será apenas para realizar seu "desejo" pois como eu já falei, isso não irá atrapalhar a cópia do código, em outras palavras: As linhas dos comentários na qual você deseja que fiquem inteiras, apenas em uma única linha, se estiverem divididas em várias linhas, será apenas na visualização do código, se elas foram digitadas em uma única linha, quando você copiar o código elas estarão do mesmo jeito: em uma única linha, não estarão divididas/quebradas em duas ou mais linhas!!!

Espero que entenda, caso contrário, releia todo a minha explicação, palavra por palavra e com certeza irá entender!


Edit:
Se for verdade que uma imagem vale mais que mil palavras, veja essa então e nos comprove essa sentença:


Perceba que as linhas dos comentários estão passando para "outra linha", mas ao clicar no botão [popup], elas simplesmente ficam da forma original em que foram escritas!

Edit2:
Se ainda assim não estiver satisfeito com minha explicação e insistir em ter esse formato, abaixo está o CSS que elimina a barra vertical e deixa as linhas de comentários inteiras:
Código:

code.punbb_block, pre.punbb_block {
  background-color: #fafafa !important;
  border: 1px solid #c9c9c9 !important;
  color: #000;
  font-family: Consolas,"Bitstream Vera Sans Mono","Andale Mono",Monaco,"DejaVu Sans Mono","Lucida Console",monospace !important;
  font-size: 11px !important;
  line-height: 110% !important;
  max-height: 100% !important;
  overflow: auto !important;
  padding: 5px !important;
  white-space: pre-wrap !important;
  width: 100% !important;
}

JS


Última edição por JScript em 27/11/14, 10:35 pm, editado 2 vez(es) (Razão : Imagem adicionada!)
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 27/11/14, 10:44 pm

continuo com a barra de rolagem vertical como pode ser visto neste tópico


http://www.schultzgames.com/t76-tutorial-trocar-de-cameras-com-scroll-do-mouse


não é frescura minha querer a barra horizontal, é apenas uma opção já que quero retirar a barra lateral.

a idéia é que o script fique inteiro na tela e não só aquele quadradinho com uns 250 px de altura
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por JScript em 27/11/14, 11:31 pm

@MarcosSchultz escreveu:continuo com a barra de rolagem vertical como pode ser visto neste tópico


http://www.schultzgames.com/t76-tutorial-trocar-de-cameras-com-scroll-do-mouse
Desculpe-me pois eu copiei o CSS errado, o correto é este:
Código:

.prettyprint ol.linenums li {
  min-width: 1900px;
}
pre code.punbb_block, pre.punbb_block {
  max-height: 100% !important;
}

Resultado:
http://i.imgur.com/2ozXgUO.png

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 28/11/14, 12:07 am

Nenhum efeito ainda...

Estou com o código ativo na CSS


@@ edit

a barra de rolagem horizontal foi adicionada ^^

mas a barra vertical continua...
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por JScript em 28/11/14, 12:15 am

Ok, isso é apenas um problema de prioridades...

Troque o trecho abaixo:
Código:

pre code.punbb_block, pre.punbb_block {
  max-height: 100% !important;
}

Por este:
Código:

pre.highlight.punbb_block {
  max-height: 100% !important;
}

Resolve!

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Barra de rolagem das Codebox

Mensagem por MarcosSchultz em 28/11/14, 12:21 am

Feitooou, vlwww ^^
avatar

MarcosSchultz
Usuário avançado

Masculino
Inscrito dia : 19/09/2014
Mensagens : 497
Pontos Ativos : 675

Ver perfil do usuário http://schultzgames.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