Метод Шторкина | ruCAD - интегрированная система на базе AutoCAD

Книга по MODx

Книга «Официальный сайт на базе MODx - как это делается»

Наши заметки о MODx

В этом разделе мы будем собирать небольшую копилку секретов по работе с системой управления контентом сайта (CMS) MODx. Эти заметки ни в коем случае не претендуют на лавры документации. На нашем сайте тема MODx вообще занимает небольшой уголок, и эти материалы мы размещаем только потому, что по роду основной работы нам приходится оказывать техническую поддержку нескольким десяткам организаций, использующих наши прототипы сайтов. В то же время кое-что может пригодиться и другим людям.

Мы не претендуем на изложение "истины в последней инстанции". Наверняка в этих заметках гуру MODx найдут неточности и ошибки. Мы будем очень благодарны, если на это нам укажут в комментариях.

В заметках мы стараемся не просто сразу приводить готовое правильное решение, но и показываем, как мы набивали шишки в процессе поиска.

Основные ресурсы по MODx

Англоязычный портал MODx

Русскоязычный форум по MODx

Русская Wikipedia - MODx

Дополнительные ресурсы по MODx

Редактор TinyMCE

AjaxFileManager

AjaxSearch

PieX - MODx Wiki. Здесь есть самая свежая версия.

Вариант скругленных уголков

Продолжаем разборку способов создания скругленных уголков с использованием CSS.

Один из простых вариантов опубликовал Семен Шторкин.

CSS:

.grc {padding: 5px 15px;}
.grc .e{display:block; position: relative;}
.grc .e *{
  display: block; 
overflow: hidden; 
position: relative; 
z-index: 2; font-size: 0px;
  }
.grc b.e b, .grc b.e i, .grc b.e u {
  height: 1px !important; 
background: #E9967A;}
.grc b.e b{margin: 0 5px;}
.grc b.e i{margin: 0 3px;}
.grc b.e u{margin: 0 2px;}
.grc b.e span{
  margin: 0 1px; 
height: 2px  !important; 
background: #E9967A;
  }
.grc div{
  background: #E9967A; 
padding: 0 10px; 
color: black;
  }

HTML:

<div class="grc">  
<b class="e"><b></b><i></i><u></u><span></span></b>
<div><strong>Бокс от Семена Шторкина</strong></div>
<div>Текст, текст, текст....
Текст, текст, текст....
Текст, текст, текст....
Текст, текст, текст....
Текст, текст, текст....
Текст, текст, текст....
</div>
<b class="e"><span></span><u></u><i></i><b></b></b>
</div>

Результат:

Бокс Семена Шторкина

Вроде бы всё очень просто, но заметны ступеньки. Кроме того, здесь текст внутри бокса обрамлен тегом div, но если мы попробуем применить заголовок или обычный абзац

<div class="grc">  
<b class="e"><b></b><i></i><u></u><span></span></b>
<h1>Бокс от Семена Шторкина</h1>
<p>Текст, текст, текст....
Текст, текст, текст....
Текст, текст, текст....
Текст, текст, текст....
Текст, текст, текст....
Текст, текст, текст....
</p>
<b class="e"><span></span><u></u><i></i><b></b></b>
</div>

то получим

Вариант Шторкина

Разумеется, эти недостатки можно устранить, добавив в CSS:

.grc h1, .grc h2, .grc h3, .grc h4, .grc h5, .grc h6, .grc p{
  background: #E9967A; padding: 0 10px; margin:0px; 
}

но заметные ступеньки останутся.

Это можно устранить добавлением дополнительных переходов цвета (об этом была заметка на Хабре Вадима Галкина):

.grc {
	padding: 5px 15px;
}
.grc .e{
  display:block; 
position: relative;
  }
.grc .e *{
  display: block; 
overflow: hidden; 
position: relative; 
z-index: 2; 
font-size: 0px;
  }
.grc b.e b, .grc b.e i, .grc b.e u, 
.grc b.e s, .grc b.e span, .grc b.e strong {
  height: 1px !important; 
background: #1d5198;
  }
.grc b.e b, .grc b.e i, .grc b.e s {
  border-left:1px solid #f1f4f9; 
border-right:1px solid #f1f4f9;
  }
.grc b.e u, .grc b.e b strong, .grc b.e i 
strong, .grc b.e span {
  border-left:1px solid #9eb4d3; 
border-right:1px solid #9eb4d3;
  }
.grc b.e b{
  margin: 0 3px;
  }
.grc b.e i{
	margin: 0 1px;
}
.grc b.e u{
  margin: 0 1px;
 }
.grc b.e s{
  margin: 0;
 }
.grc b.e b strong, .grc b.e i strong {
  margin: 0;
  }
.grc b.e span{
  margin: 0;
  }
.grc div{
  background: #1d5198; 
padding: 0 10px; 
color: white;
  }
.grc h1, .grc h2, .grc h3, .grc h4, 
.grc h5, .grc h6, .grc p{
  background: #1d5198; 
padding: 0 10px; 
margin:0px; 
}