Home
by alla13 May 24th 2018, 4:55 pmTechnical 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 <button onclick="jsCodeExpand(this); return false;">توسيع</button>' +
' <button style="display: none" onclick="jsCodeCollapse(this); return false;">collapse</button> ' +
' <button onclick="jsCodeSelect(this); return false;">تحديد الكود</button> ' +
' <button onclick="jsCodePopup(this); return false;">نافذة منبثقة</button> ' +
' <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
