i want to disable a css code on the code box

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Other
Screenshot of problem : https://i.servimg.com/u/f62/17/94/05/76/screen10.png
Who the problem concerns : All members
Forum link : http://alla-omar.mo-rpg.com

Description of problem

i use this css to style the Ordered List

Code:



ol ol {
    margin: 0px 2em 0px 12px;
}
ol{counter-reset:li;list-style:none outside none;font:15px jazeera;padding:0;margin-right:-4px;margin-top:0;margin-bottom:0}
ol{list-style:none outside none;font:15px jazeera}
.post ol li:not(.jsCode_block){
    position: relative;
    display: block;border: solid 1px #E0E0E0;
    padding: 0.4em 1.8em 0.4em 2em;
    margin: 0.5em 50px;
    background: #F0F0F0;
    color: #444;
    text-decoration: none;
    border-radius: 0.3em;
    transition: all 0.3s ease-out 0s;
    font-family:jazeera;
}
.post ol li:before {
    content: counter(li, decimal);
    counter-increment: li;
    position: absolute;
    right: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: 0.3em solid #FFF;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all 0.3s ease-out 0s;
    color: #fff !important;
    font-family: time;background:#359BED;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
    box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
}
.post ol li:hover:before{transform:rotate(360deg)}
.post ol li:hover {
background:#359BED;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
color: #FFF !important;
}


and this javascript for the code box

Code:


(function() {
  var style = document.createElement("style");
  style.type = "text/css";
  style.innerHTML =
      'code.jsCode_block, pre.jsCode_block {' +
      '  background-color: #FAFAFA !important;' +
      '  border: 1px solid #C9C9C9 !important;' +
      '  color: #000000;' +
      '  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;' +
      '  margin-top: 0 !important;' +
      '  max-height: 250px !important;' +
      '  overflow: auto !important;' +
      '  padding: 5px !important;' +
      '  white-space: pre-wrap !important;' +
      '  width: auto !important;' +
      '}' +
      '.jsCodetop {' +
      '  background-color: #FFDEAD !important;' +
      '  color: #1D3652;' +
      '  font-size: 10px;' +
      '  font-weight: bold;' +
      '  line-height: 100%;' +
      '  margin-top: 5px;' +
      '  padding: 2px 1px 2px 3px;' +
      '}' +
      '.jsCodetop button {' +
      '  background: -moz-linear-gradient(center top , #EDEDED 5%, #DFDFDF 100%) repeat scroll 0 0 #EDEDED;' +
      '  border: 1px solid #BBBBBB;' +
      '  border-radius: 3px 3px 3px 3px;' +
      '  color: #1D3652;' +
      '  cursor: pointer;' +
      '  display: inline-block;' +
      '  font-size: 10px;' +
      '  padding: 0 6px;' +
      '  text-decoration: none;' +
      '}' +
      '.jsCodetop button:hover {' +
      '  background: -moz-linear-gradient(center top , #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF;' +
      '  border-color: #9A9A9A;' +
      '  color: #3D70A3;' +
      '}' +
      '.jsCodetop button:active {' +
      '  position: relative;' +
      '  top: 1px;' +
      '}' +
      'pre.jsCode_block.expand, code.jsCode_block.expand {' +
      '  max-height: 100% !important;' +
      '}' +
      'pre ol.linenums {' +
      '  color: #afafaf !important;' +
      '  font-size: 12px !important;' +
      '  list-style: outside none decimal !important;' +
      '  padding: 5px 0 5px 42px !important !important;' +
      '  margin: -16px 0 0 !important;' +
      '  width: auto !important;' +
      '}' +
      'pre ol.linenums li > span {' +
      '  color: #000000 !important;' +
      '}' +
      'pre ol.linenums li {' +
      '  border-left: 3px solid #6ce26c !important;' +
      '  padding-left: 15px !important;' +
      '  list-style: inherit !important;' +
      '  font-size: inherit !important;' +
      '}';
  document.getElementsByTagName("head")[0].appendChild(style);
})();
 
jQuery(function() {
  var tagCode = jQuery('.cont_code, code'),
      codebox = null;
 
  for (var i = 0, len = tagCode.length; i < len; i++) {
      codebox = jQuery(tagCode[i]).closest('.codebox');
      codebox.before(
        '<div class="jsCodetop">Code &nbsp; &nbsp; &nbsp; &nbsp;<button onclick="jsCodeExpand(this); return false;">توسيع</button>' +
        '  <button style="display: none" onclick="jsCodeCollapse(this); return false;">collapse</button>&nbsp; ' +
        '  <button onclick="jsCodeSelect(this); return false;">تحديد الكود</button>&nbsp; ' +
        '  <button onclick="jsCodePopup(this); return false;">نافذة منبثقة</button>&nbsp; ' +
        '  <button style="margin-right: 50px; float: right;" onclick="jsCodeAbout(this); return false;">?</button>' +
        '</div>' +
        '<pre class="jsCode_block">' +
        '  <ol class="linenums">' + tagCode[i].innerHTML.replace(/<br>/mg, '<li class="L1"><span>') + '</ol>' +
        '</pre>'
      );
      codebox.remove();
  }
});
 
function jsCodeExpand(oThis) {
  jQuery(oThis).css('display', 'none');
  jQuery(oThis).next().css('display', '');
  jQuery(oThis).parent().next('pre.jsCode_block').addClass('expand');
}
 
function jsCodeCollapse(oThis) {
  jQuery(oThis).css('display', 'none');
  jQuery(oThis).prev().css('display', '');
  jQuery(oThis).parent().next('pre.jsCode_block').removeClass('expand');
}
 
function jsCodePopup(oThis) {
  var content = jQuery(oThis).parent().next('pre.jsCode_block').html();
  var my_window = window.open("", "To select the code: [Ctrl] + [A]", "scrollbars=1toolbar=no,menubar=no,personalbar=no,status=0,left=0,location=0,menubar=0,top=0,width=640,height=480");
  my_window.document.write('<pre>' + content + '</pre>');
}
 
function jsCodeAbout(oThis) {
  alert('Simple code to add line counter fuctionality for Forumotion\n\nBy JScript FROM Brazil - 2015/04/10\n');
}
 
function jsCodeSelect(oThis) {
  var doc = document;
  var text = jQuery(oThis).parent().next('pre.jsCode_block')[0];
  if (doc.body.createTextRange) {
      var range = doc.body.createTextRange();
      range.moveToElementText(text);
      range.select();
  } else if (window.getSelection) {
      var selection = window.getSelection();
      var range = doc.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
  }
}

what i wont is to keep the css styling and disable it just on the code box

up

I solved my issue by modiffication in 
the css code

Code:


    ol:not(.linenums) ol:not(.linenums) {
        margin: 0px 2em 0px 12px;
    }
    ol:not(.linenums){counter-reset:li;list-style:none outside none;font:15px jazeera;padding:0;margin-right:-4px;margin-top:0;margin-bottom:0}
    ol:not(.linenums){list-style:none outside none;font:15px jazeera}
    .post ol:not(.linenums) li:not(.jsCode_block){
        position: relative;
        display: block;border: solid 1px #E0E0E0;
        padding: 0.4em 1.8em 0.4em 2em;
        margin: 0.5em 50px;
        background: #F0F0F0;
        color: #444;
        text-decoration: none;
        border-radius: 0.3em;
        transition: all 0.3s ease-out 0s;
        font-family:jazeera;
    }
    .post ol:not(.linenums) li:before {
        content: counter(li, decimal);
        counter-increment: li;
        position: absolute;
        right: -1.3em;
        top: 50%;
        margin-top: -1.3em;
        height: 2em;
        width: 2em;
        line-height: 2em;
        border: 0.3em solid #FFF;
        text-align: center;
        font-weight: bold;
        border-radius: 2em;
        transition: all 0.3s ease-out 0s;
        color: #fff !important;
        font-family: time;background:#359BED;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
        -moz-box-shadow:0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
        box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
    }
    .post ol:not(.linenums) li:hover:before{transform:rotate(360deg)}
    .post ol:not(.linenums) li:hover {
    background:#359BED;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
    box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
    color: #FFF !important;
    }

Thank you for posting the solution.

Problem solved & topic archived. Please read our forum rules: ESF General Rules