Как сделать закругленные углы в модулях

[raduga]

1. Пошаговое описание создания закругленных углов в модулях (подойдет для все модулей, включая те, что выводятся над областью mainbody:
часть1
часть2

2. Описание хака по изменению файла frontend.html.php. Закругленные углы получаются без дивов.

3. Описание техники создания круглых углов без картинок.

4. Пример кода, который я использую чаще всего в своих шаблонах:

Код:

div.module {
  width: 183px;
  background: url(../images/mod_mid.gif) repeat-y;
  margin-bottom: 15px;
}

div.module div {
  background: url(../images/mod_bot.gif) bottom left no-repeat;
}

div.module div div {
  background: url(../images/mod_top.gif) top left no-repeat;
  padding: 10px 10px 20px 10px;
 
}
div.module div div div {
  background: url(../images/px.gif) no-repeat; /** Внес изменения для ИЕ7, раньше было background: none; **/
  background: none;
  padding: 0;
  width: auto !important;
  width: 100%;
}

div.module div div div h3 {
display: block; 
padding : 0px 0px 10px 0px; 
margin : 0;
font-family      : Arial, Verdana;
font-size        : 12px;
font-weight      : bold;
color            : #527a33;
text-transform   : uppercase;
text-align       : center;
letter-spacing   : 1px;

}

Здесь последний стиль описывает заголовок.
В файле index.php должен быть следующий код для вывода модулей в позиции left, right:

Код:

<?php mosLoadModules ( 'left',-3 ); ?>
<?php mosLoadModules ( 'right',-3 ); ?>

Внимание!
В код выше я внес изменения для корректного отображения верхушки закругленных модулей в ИЕ7. Не спрашивайте зачем это надо!

Код:

div.module div div div {
  background: url(../images/px.gif) no-repeat; /** Внес изменения для ИЕ7, раньше было background: none; **/
.......

px.gif - это однопиксельный прозрачный gif, положите его в папку images

Вот, что получилось:

[Skiminok]

? поставь скрипт или найди без картинок, 8 картинок, то тоже, если я захочу еще 4 колеса поставить себе на машину, чтоб она ехала быстрее, не думаю, что от 8 картинок веса меньше

немного несогласен насчет веса. где 8 картинок 40 кв весят или где 4 картинки 400 кв. по моему разница небольшая есть.

[sc@r@bey]

а что это за картинки такие у тебя? неоптимизированные, просто весь мир пользуется этим методом и не жалуется, если предложешь новое, будет здорово, только представь сколько кода придется добавить на 8 картинок?

[Skiminok]

а что это за картинки такие у тебя? неоптимизированные, просто весь мир пользуется этим методом и не жалуется, если предложешь новое, будет здорово, только представь сколько кода придется добавить на 8 картинок?

Мне кажется что было-бы лучше делать 8 картинках чуть больше кода, зато страничка грузится быстрее. но мне кажется такое не скоро появится. думаю надо закрывать этот вопрос.

у меня есть еще 1 вопрос.
как сделать закругленные углы в MainBody на каждую новость отдельно? не меняя код jomla, а средствами css

[sc@r@bey]

не просто не надо создавать графику по 400 кБайт 
под этот вопрос новую тему создаешь для начала

[JeФoks]

Вот имеется код для углов без изображний:
css:

Код:

.r1, .r2, .r3 {
    display: block;
    height: 1px;
    overflow: hidden;
    font-size:1px;
    padding-left: 5px;
    padding-right: 5px;
}

.r3 { margin: 0 12px;}
.r2 { margin: 0 11px;}
.r1 { margin: 0 10px;}

#rounded-box-3 .inner-box, #rounded-box-3  b {
    background-color: #d4e2e4;
}

.inner-box {
    padding:1em;
    magrin-left: 9px;
}

и в php:

Код:

<div id="rounded-box-3">
    <b class="r3"></b><b class="r1"></b><b class="r1"></b>
    <div class="inner-box"><center>
<?php mosLoadModules ('left', -3); ?></center>
</div>
    <b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div>

В итоге получаю, что самый верхний слой не хочет уменьшаться по горизонтали... Пытался описывать его и в "#rounded-box-3 .inner-box, #rounded-box-3  b" и в ".inner-box"

[sc@r@bey]

а можно интегрировать JQuery plugin - jQuery Corner

[DWolf]

Читал этот топик и по нему делал закругленные углы у модуля.... Блин, ну нифига не получалось - потому что за сгруглениями у меня нет фона (прозрачность)..... в результате поправил код до такого вида:

Код:

div.module {
margin: 10px 8px 0px 15px;
width: 186px;
background: url(../images/mod_top.gif) top left no-repeat;
}

div.module div {
background: url(../images/mod_bot.gif) bottom left no-repeat;
padding-bottom: 13px; /* Высота нижней картинки */
padding-top: 14px; /* Высота верхней картинки */

}

div.module div div {
background: url(../images/mod_mid.gif) repeat-y;
padding: 0px 10px 0px 10px;   

}

div.module div div div {
background: url(../images/px.gif) no-repeat;
padding: 0;
width: auto !important;
width: 100%;
}

div.module div div div h3 {
display: block; 
padding : 0px 0px 10px 0px; 
margin : 0;
font-family      : Arial, Verdana;
font-size        : 12px;
font-weight      : bold;
color            : #527a33;
text-transform   : uppercase;
text-align       : center;
letter-spacing   : 1px;
}

С таким вариантом кода у меня работала прозрачность за скругленностью.

[dimon_sh84]

А я вот пользуюсь таким способом для joomla 1.5 (переделал как в GMail). Его преимущество в том, что всего 1 изображение (притом 1px) да еще и прозрачным можно + произвольный ("резиновый") размер блока:

В modules.php (..templates\system\html) находим функцию function modChrome_rounded и заменяем на:

 <?php
  function modChrome_rounded($module, &$params, &$attribs)
   { ?>
      <div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
        <b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b>
     <div class="inner-box">                  
       <?php if ($module->showtitle != 0) : ?>
         <h3><?php echo $module->title; ?></h3>
       <?php endif; ?>
       <?php echo $module->content; ?>
     </div>
   <b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r5"></b>
      </div>
<?php
   }

В файл *.css (modules.css или template.css у кого как) вставляем:

/* ##################### MODULE ROUNDED STYLE #################*/
/* Element    |Class             |Suffix                                        */
/* div      |module           | moduleclass_sfx                         */
/* h3       |module           |
/* <jdoc:include type="modules" name="left" style="rounded" /> */

/* Module Content Control*/
div.module {}

/* Font Control */

/* Title Control */
div.module h3 {
  font-size :16px;
  color      :#000000;
}

/* List Control */
.module ul {}
.module li {}

/* Link Control*/
.module a:link{}
.module a:visited {}
.module a:hover {}
.module a:active {}

 /* Round Conners example */
.inner-box {
  padding:1px;
}
 
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
   display: block;
   height: 1px;
   overflow: hidden;
}
 
.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

#rounded-box-3, .module, #rounded-box-10 { margin:7px; }    #rounded-box-5 заменен на .module

 
.inner-box, b { background-image: url(../images/1px.png); }    ЗДЕСЬ ИЗОБРАЖЕНИЕ В 1px. МОЖНО ПРОЗРАЧНОЕ!!!
 
/* уменьшаем отступы по мере роста радиуса закругления */
#rounded-box-3 .inner-box { padding: 1em;}
.module .inner-box { padding: 0.7em 1em;}                           #rounded-box-5 заменен на .module
#rounded-box-10 .inner-box { padding: 0.4em 1em;}


Из этого видно, что я использовал углы с радиусом 5. Можно сделать и 3 и 10 (да какой угодно радиус). Не забудьте только изменить modules.php для других радиусов. Например для r=10:

<?php
function modChrome_rounded($module, &$params, &$attribs)
{ ?>
   <div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
    <b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b>
          <div class="inner-box">                  
           <?php if ($module->showtitle != 0) : ?>
             <h3><?php echo $module->title; ?></h3>
           <?php endif; ?>
           <?php echo $module->content; ?>
          </div>
      <b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>
      </div>
   <?php
}

ну и конечно править css для нужного радиуса.

[poizon]

на самом деле это ужасный способ, так как имеет тонну пустых тегов.
Гуглу это можно, а нам, простым смертным, нельзя такое делать

[dimon_sh84]

ну для меня только этот метод подошел. хоть и перечитал множество. так что решать вам... Зато явная экономия на размере картинки.

Кстати, были проблемы с совместимостью браузеров. Так что, кого заинтересует - пишите.

[MaxePlank]

эх,че то не получается..

сделал так

Код:

<td width="35%" align="top" height="100%" rowspan="7">
<jdoc:include type="modules" name="left" style="-3" />
</td>

то что в первом посте скопировал в темплейт.ксс

подключил ксс

Код:

<link rel="stylesheet" href="/templates/myshab/css/template.css" type="text/css" />

Почему оно не скругляет ? даже дивы не создает...

[poizon]

ну как бы у Вас Joomla 1.5, а данный код для версий 1.0.x

[fatalerror]

В начале топика есть ссылка

....

3. Описание техники создания круглых углов без картинок.
...

Но та ссылка ведет на буржуйский ресурс на буржуйском языке.

Нашел в сети на русском.

_http://www.lobachev.ru/2007/sglazhennye-zakruglennye-ugly-bez-ispolzovaniya-izobrazhenij/

Тоже без картинок рамка делается. Вот только не пойму, как это дело на модули переложить. Чтобы, значит, суффикс к модулю добавить, и круглая рамка получалась.

Может, кому полезно будет.

[timonnn]

А как сделать такие углы для линейки 1.5???

[userxp]

Почему оно не скругляет ? даже дивы не создает...

потомоу что

<jdoc:include type="modules" name="left" style="-3" />                  

цифровые индексы в 1.5 НЕ работают.

[PaLyCH]

Все тоже самое, ничего не изменилось практически

[userxp]

http://joomlaforum.ru/index.php/topic,9638.msg225103.html#msg225103

[PaLyCH]

Пишем вместо <jdoc:include type="modules" name="left" style="-3" />      
Вот так <jdoc:include type="modules" name="left" style="rounded" />      

[nikolaos]

Столкнулся с такой проблемой уже как не пытался решить, не вышло даже разобрал радуги шаблон у него пашет а у меня нет  , пример: в index.php пишу <jdoc:include type="modules" name="left" style="test" /> задаю модулю свой стиль, в ксс задаю стиль модулю div.test{} div.test div{} и так далее в итоге по идее должно быть результативно модуль с  закругленными углами, но не тут то было. rounded не могу назвать стиль как уже имееться такой, а нужно модуль например в другом месте другого цвета. Буду очень благодарен если кто нить мне объяснит что не так, и почему не работает.

[PaLyCH]

Столкнулся с такой проблемой уже как не пытался решить, не вышло даже разобрал радуги шаблон у него пашет а у меня нет  , пример: в index.php пишу <jdoc:include type="modules" name="left" style="test" /> задаю модулю свой стиль, в ксс задаю стиль модулю div.test{} div.test div{} и так далее в итоге по идее должно быть результативно модуль с  закругленными углами, но не тут то было. rounded не могу назвать стиль как уже имееться такой, а нужно модуль например в другом месте другого цвета. Буду очень благодарен если кто нить мне объяснит что не так, и почему не работает.

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

[nikolaos]

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

немного не туда, теперь увидел что 1,0 а не 1,5 но делаю я кокраз закругленные углы и получились с первого раза, на 1,5 поставить да и темка создана Радугой он в своем одном шаблоне кокраз использовал ззакругленные углы таким способом задания стилей вот и думаю может пожет кто.

[faraon_x]

Попробовал метод и вот, что получилось!? Центр репититься на всю высоту!

Код:

#right24 div.module_license {
  width: 180px;
  background: url(../images/license_2.png) repeat-y;
  margin-bottom: 15px;
}

#right24 div.module_license div {
  background: url(../images/license_3.png) bottom left no-repeat;
}

#right24 div.module_license div div {
  background: url(../images/license_1.png) top left no-repeat;
  padding: 10px 10px 20px 10px;
  
}
#right24 div.module_license div div div {
  background: none;
  padding: 0;
  width: auto !important;
  width: 100%;
}

Фрагменты приложены

[faraon_x]

Как понимаю проблема с отступами блока с репитом, но задание padding top и bottom, не решают проблемы. кто может сталкивался?

[PaLyCH]

Проблема в том, что ПНГ с круглениями имеют прозрачность, в нижние слои кладешь их, потом делаешь паддинг для внутреннего

Код

#right24 div.module_license {
  width: 180px;
  background: url(../images/license_1.png) top left no-repeat;
  margin-bottom: 15px;
}
 
#right24 div.module_license div {
  background: url(../images/license_3.png) bottom left no-repeat;
  padding:10px 0 20px 0
}
 
#right24 div.module_license div div {
  background: url(../images/license_2.png) repeat-y;
  padding: 0 10px 0 10px;
 
}
#right24 div.module_license div div div {
  background: none;
  padding: 0;
  width: auto !important;
  width: 100%; 
}

[faraon_x]

точно, получилось. +1

[Bogdan808]

Японский сарай... не знаю чем там думал джум разработчики, но по моему это один из самых голимых методов. Не считая того что валидатор ругается когда проводит сканирование, еще и багов куча!
Проще задать каждому вложеному диву id и делать обращение прямо ему
 

Код:

#right24 div.module_license div div div

[redaktor.lvivske.info]

Sorry. Не знаю как удалить. Смотрите ниже.

[redaktor.lvivske.info]

Поздновато пишу (только сейчас увидел эту тему), но судя по тому, что на Портативе до сих пор нет ни одного javascript-закруглённого уголка, то тема продолжает быть актуальна. Возможно, я могу подсказать, как сделать закруглённые уголки БЕЗ картинок применительно к Joomla.

1. В директории с используемым шаблоном создаём новую папку. Называем её, допустим, "corners";
2. Скачиваем прилагаемый архив, распаковываем, полученные 3 файла помещаем в созданную папку;
3. Подключаем новые файлы поместив в index.php шаблона между тэгами "head" следующие строки:

Код:

<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/corners/niftyCorners.css">
<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/corners/niftyPrint.css" media="print">
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/corners/nifty.js"></script>

4. Закругляем уголки любого используемого в CSS контейнера помещая опять же в index.php между тэгами "head" следующие строки:

Код:

<script type="text/javascript">
window.onload=function(){
Rounded("div#user1","#000","#FFF");
}
</script>

Примечание:
- вместо "user1" подставляем название любого другого модуля или заголовка;
- если необходимо закруглить несколько модулей, дублируем строку Rounded("..."), перечисляя элементы;
- #000 - цвет внутреннего угла, #FFF - внешнего;
- если хотим закруглить только верх или низ модуля, используем RoundedTop или RoundedBottom;
- использовал этот метод только на шаблонах свёрстанных слоями - работает без проблем.

Отпишись потом, получилось добиться результат, или нет. Ну или можно "+" поставить, если заработает.

Делал всё как здесь только  в индексе переделал под Joomla 1.5.  Углы не получаются. Посмотрите пожалуйста, что не так?

index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >  
<head>  
<jdoc:include type="head" />  
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/santor/css/template.css"  />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/santor/corners/niftyCorners.css">
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/santor/corners/niftyPrint.css" media="print">
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/santor/corners/nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
Rounded("div#right","#000","#FFF");
}
</script>
</head>
<body>
<div id="container"> <div id="container2">
<jdoc:include type="modules" name="mainmenu" style="raw" />
    <jdoc:include type="modules" name="top" />
    <div id="content" class="float">    
   <jdoc:include type="component" /></div>          
    <div id="sidebar_right"class="float_right"><jdoc:include type="modules" name="right" style="rounded" /></div>  
    <div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>  
</div>
</div>
</body>  
</html>

[redaktor.lvivske.info]

Ау-у. Кто нибудь, хоть что-нибудь скажет. Или зачем этот форум вообще?!