i want to disable a css code on the code box

Go down

Solved i want to disable a css code on the code box

Post by alla13 on May 24th 2018, 4:55 pm

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.forumotion.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


Last edited by alla13 on May 26th 2018, 3:48 pm; edited 1 time in total
avatar
alla13
Forumember

Posts : 91
Reputation : 6
Language : Arab5/5 Eng3/5 Fr2/5

http://alla-omar.forumotion.com

Back to top Go down

Solved Re: i want to disable a css code on the code box

Post by alla13 on May 25th 2018, 6:27 pm

up
avatar
alla13
Forumember

Posts : 91
Reputation : 6
Language : Arab5/5 Eng3/5 Fr2/5

http://alla-omar.forumotion.com

Back to top Go down

Solved Re: i want to disable a css code on the code box

Post by alla13 on May 26th 2018, 3:48 pm

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;
    }
avatar
alla13
Forumember

Posts : 91
Reputation : 6
Language : Arab5/5 Eng3/5 Fr2/5

http://alla-omar.forumotion.com

Back to top Go down

Solved Re: i want to disable a css code on the code box

Post by Draxion on May 26th 2018, 4:19 pm

Thank you for posting the solution.

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2233
Reputation : 283
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum