Теперь давайте перейдем к полному виду code для uCoz с подсветкой синтаксиса, где будет и тетрадная клетка, также можно сказать, чтоб не чего не искать а сделать так как на изображение. Тут немного просто больше добавить нужно, так как будет Подсветка синтаксиса с ней идет Нестандартный скроллинг но и сам вид дизайн.
Установка
Создайте папку images и загрузите файлы из нее через Файловый менеджер.
CSS:
Код
/* Вид Code */
.bbCodeName {display:none}
.bbCodeBlock {margin: 0;padding: 5px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-size:12px !important;background: #FFF url('/images/code.gif') !important;border: 1px solid #B5C1E8 !important;word-break: break-all;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}
.codeMessage {width:100%;padding:0;border: 0 !important; overflow:hidden}
/*Подсветка синтаксиса*/
.cssContainer {color: #FF00FF;}
.cssTag {color: #990099;}
.cssTag span {color: #006600 !important;}
.jsTag, .jsTag .blueColSimp {color: #990000 !important;}
.doct, .doct span {color: #009999 !important;}
.regExp, .regExp span {color: #006600 !important;}
.greenCol {color: #006600 !important;}
.blueCol {color: #0047BD !important;}
.dblueCol {color: #001199 !important;}
.blueColSimp {color: #0047BD;}
.pinkCol {color: #FF00FF !important;}
.redCol {color: #FF0000 !important;}
.lettuceCol {color: #009999 !important;}
.lettuceColSimp {color: #009999;}
.purpleCol {color: #990099 !important;}
.purpleColSimp {color: #990099;}
.orangeCol {color: #FF9900 !important;}
.invComm, .invComm span, .invComm .blueColSimp {color: #0047BD !important;}
.brackets {color: #0047BD !important;}
.commCol, .commCol span, .commCol.invComm, .commCol.blueColSimp {color: #999999 !important;}
Этот код нужно установить в нижнюю часть сайта.
Код
<script type="text/javascript" src="/images/jq.syntax.js"></script>
Таблицу стилей CSS:
Код
/* jscrollpane */
.jspContainer{overflow:hidden;position:relative}
.jspPane{position:absolute}
.jspVerticalBar{position:absolute;top:0;right:0;width:4px;margin-bottom:5px;height:100%;background:transparent}
.jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:4px;background:transparent}
.jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0}
.jspCap{display:none}
.jspHorizontalBar .jspCap{float:left}
.jspTrack{background:transparent;position:relative}
.jspDrag{background:rgba(0,0,0,.4);position:relative;top:0;left:0;cursor:pointer}
.jspDrag{-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}
.jspDrag:hover{background:rgba(0,0,0,.6)}
.jspDrag:active{background:rgba(0,0,0,.8)}
.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%}
.jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer}
.jspArrow.jspDisabled{cursor:default;background:#80808d}
.jspVerticalBar .jspArrow{height:16px}
.jspHorizontalBar .jspArrow{width:16px;float:left;height:100%}
.jspVerticalBar .jspArrow:focus{outline:none}
.jspCorner{background:#eeeef4;float:left;height:100%}
И последнее, копируем и идем опять в низ сайта и там размещаем.
Код
<script type="text/javascript" src="/images/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="/images/jquery.mousewheel.js"></script>
<script type="text/javascript">jQuery(function() {jQuery('.codeMessage').jScrollPane({hideFocus:true});})</script>
Чтоб в корень сайта залить в папку, что в начале статьи написано, нужно скачать это файл и все оттуда в папку закинуть.