А я вот пользуюсь таким способом для 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 для нужного радиуса.
19.01.2014, 01:35:26