Шаблон Joomla

Модули со скругленными углами

Информация о материале
Категория: Joomla - настройки, описание шаблона

Статью по этому вопросу можно прочитать на сайте Joomla здесь -> перевод с помощью переводчика google

Если пропустить создание нарезки в графическом редакторе, то создание модуля с закругленными углами выглядит так:

Позиция в которой будет выводится модуль в файле index.php должна иметь стиль rounded :

<jdoc:include type="modules" name="POSITION" style="rounded" />

Вывод модуля в этом случае имеет вид:

<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- various menu items --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Таблица стилей:

div.module_menu {
  background: url(../images/crn_tl.png) 0 0 no-repeat;
  padding: 0;
}
 
div.module_menu div {
  background: url(../images/crn_bl.png) 0 100% no-repeat;
  margin: 0;
  border: 0;
}
 
div.module_menu div div{
  background: url(../images/crn_tr.png) 100% 0 no-repeat;
}
 
div.module_menu div div div {
  background: url(../images/crn_br.png) 100% 100% no-repeat;
}

div.module_menu div div div div{
  background: none;
}

4 изображения:

rounded_topleft

rounded_bottomleft.png

rounded_topright.png

rounded_bottomright.png

Для совместимости с IE воспользуемся условными комментариями

<!--[if lte IE 6]>
<link href="/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="/ie7only.css" rel="stylesheet" type="text/css" />
<![endif]-->

 

В файле ie6only.css добавим строки:

div.module_menu div div div {
  width: 100%;
}

Для задания отступа внутри модуля добавим:

div.module_menu div div div {
  padding: 4px;
}

Примечание: В свойствах блока колонки, где находятся модули со скругленными углами нужно убрать:

overflow:hidden;

Иначе в IE модули будут обрезаться