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

[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

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

[userxp]

самое интерсное (полезное) вот это:
style -3: you will have extra "divs" tags which generate the following format in your Mambo templates.
а я то всё ни как не мог понять, как это мне джумла "родит" rounded...

2 raduga: Гранд мерси!
поиграюсь, как-нибудь на досуге.

[Serg0k]

Сделал, в IE 7 betta  коряво с косяками смотрится

[Serg0k]

С модулями User тоже не прокатывает
с обычными одулями все тип топ , а вот
с модулями user, тоесть которые содержат пользовательский скрипт ,
нифига не получается не действует на него этот хак

[raduga]

С модулями User тоже не прокатывает
с обычными одулями все тип топ , а вот
с модулями user, тоесть которые содержат пользовательский скрипт ,
нифига не получается не действует на него этот хак

Для модулей, которые выводятся в области mainbody и которые не имеют фиксированной ширины, надо применять техники из пунктов 1,3 (см. первый пост).

[Serg0k]

Да поковырялся , вот не получается сделать для модулей top с не фиксированным размером закругление  углов , надо всего лишь 2 картинки вставить по краям и все

[networx]

Извиняюсь за тупой вопрос, но куда вставлять этот код:

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: 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;

}

[userxp]

template_css.css шаблона

[networx]

Спасибо большое! А вот
<?php mosLoadModules ( 'left',-3 ); ?>
<?php mosLoadModules ( 'right',-3 ); ?>

можно вставлять после какой строчки? После </table> или куда?

[userxp]

ну ты спросил.... в шаблон вставлять.
как я тебе ещё могу по-другому ответить?
обычно в index.php, там где грузиться html-разметка сайта.

почитай статью на портале http://joomlaportal.ru/content/view/409/53/ + внизу ещё пару ссылок

[networx]

Спасибо еще раз за ссылки...
Естественно, что код нужно в index.php вставлять, но вот куда....разницы нет?

[networx]

Просто вчера мучился мучился и в конечном итоге у меня шаблон начал выдавать ошибку...

[userxp]

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

[Mitrich]

В index.php написано

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

в template_css.css

div.module {
  width: 335px;height 10px;
/*  background: url(../images/mid.gif) repeat-y;*/
background:#ff0000;
  margin-bottom: 15px;
}

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

div.module div div {
  background: url(../images/top.gif) top left no-repeat;
  padding: 10px 10px 20px 10px;
 
}
div.module div div div {
  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;

}

на выходе получается следующее (картинка в аттаче)
имеются три картинки,все размером 335х30 с именами
top.gif
mid.gif
bottom.gif
картинкe фона середины (mid.gif) закоментировал и положил красный цвет для наглядности.
Подскажите в чем косяк

[вложение удалено Администратором]

[raduga]

А ты попробуй закругления нарисовать не с прозрачным фоном, а с зеленым, т.е. фоном колонки и тогда краснота не будет проступать.

[Mitrich]

БЛИИИН протупил
спасибо

[ButuzOFF]

Знаю уже с этими углами уже достаточно решений есть
Но блин туплю я Уже Бог знает сколько мусолил эту тему и никак с пунктом третим разобраться не могу (углы с ява и цcc) уже и описание на русском нашел и нифига не выходит
Может кто делал и сможет подсказать ,вроде делаю как написано ,но полюбому гдето МОЯ ошибка .В итоге результ 0

[4853]

Знаю уже с этими углами уже достаточно решений есть
Но блин туплю я Уже Бог знает сколько мусолил эту тему и никак с пунктом третим разобраться не могу (углы с ява и цcc) уже и описание на русском нашел и нифига не выходит
Может кто делал и сможет подсказать ,вроде делаю как написано ,но полюбому гдето МОЯ ошибка .В итоге результ 0

Фиг его знает, глянь под моим ником на сайтик, если то, то попробую объяснится, хотя работал метод научного тыка. Если не то, тогда...

[ButuzOFF]

Спасибо тебе большое  но насколько я понял у тебя там картинками? Жуть как хочу   сделать с nifty (мой пост выше) и не хрена не получаеться
Картинками уже делал (да и щас на моем сайте меню картинками) Просто увмидел офигенный  стильный "легкий" дизайн на div и css  и захотелось сделать по аналогии ,минимум картинок
Кстати а левый блок чем делал?
Еще раз спасибо

[4853]

Кстати а левый блок чем делал?

Теми же картинками и через дивы прописаны.
Обошёлся тремя картинками, верхней, нижней и середина бэкграундом.
Правда две недели ялозил
Но получилось.
Кстати, верхняя и нижняя картинка весят по 1,17кб, бэкграунд 0,88
Итого это добро , в одном блоке, обходится 3,22кб

[moro]

Слушайте, помогите, а то мозг плавится. Никто не обращал внимание на такую херь?

Код:

.moro_graphic_titles div.module {
  background: url(../img/title_point.gif) no-repeat top left;
  padding-bottom: 10px;
  width: 100% !important;
  z-index: 111;
}

.moro_graphic_titles div.module div {
  background: url(../img/title_end.gif) no-repeat top right;
   z-index: 100;
}

.moro_graphic_titles div.module div div {
   line-height: 24px;
   height: 24px;
   z-index: 98;
}

.moro_graphic_titles div.module div div div {

}

.moro_graphic_titles div.module div div div h3{
color: #666666;
text-align: left;
padding-left: 30px;
height: 24px;
line-height: 24px;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
margin: 0 0 2px 0;
}

Картина ясна, да? я делаю не закругленные углы, а картинку под заголовком. Она из двух частей: основа и хвост, чтобы делать ширину модуля любой, и присобачивать в конец картинку title_end.

Так вот получается, что .moro_graphic_titles div.module div === .moro_graphic_titles div.module div div div и даже четыре или пять div. Он присобачивает эту закрывающую картинку ко всем divам, которые ему встречаются внутри модуля!!!! В тех модулях, где нет дивов и h3 - нормально, а в остальных - жесть... просто гляньте: http://www.churchny.org
Модуль с календарем - нагляден. Но это не самое хреновое. Модуль Site Login - при форме выглядит нормально, а если залогинится - пипец. А вот who's online внизу правой колонки - хоть бы хны. Там все просто - никаких дополнительных слоев...

Как с бороться с эдакой напастью?


ПРИДУМАЛ!!!! ТУПО НО ПРОСТО спасибо за вдохновение

Код:

.moro_graphic_titles div.module div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div div div div div{ background: none;}

[Andrew]

Может кто делал и сможет подсказать...
Жуть как хочу   сделать с nifty (мой пост выше) и не хрена не получаеться
Картинками уже делал (да и щас на моем сайте меню картинками) Просто увмидел офигенный  стильный "легкий" дизайн на div и css  и захотелось сделать по аналогии ,минимум картинок

Поздновато пишу (только сейчас увидел эту тему), но судя по тому, что на Портативе до сих пор нет ни одного 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;
- использовал этот метод только на шаблонах свёрстанных слоями - работает без проблем.

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

[ButuzOFF]

Ну или можно "+" поставить, если заработает

Нужно и полезно    Вот чаще бы отписывали о найденном решении больше пользы было бы
а не мусорить "не помогли, а я нашел ,всем пока"

[Maximilian]

Каким образом можно сделать такой же дизайн, только для основного новостного контента, т.е. для <?php mosMainBody(); ?> ?
Ведь выбора с 4-мя <div> нету ...

[Andrew]

Закруглить углы области в которой выводится основной контент? Rounded("div#MainBody","#000","#FFF"); - не пробовал? Либо вместо "MainBody" тот класс, который отвечает за вывод контента в Main.

[Maximilian]

Приведу пример, так будет гораздо проще ....
Т.е. в качестве закруглённых краёв выступает jpg.
Как я понял с помощью cssтакого не сделать.

[Andrew]

Как раз наоборот, тремя сообщениями выше рассматривается случай, где закругление происходит именно БЕЗ jpg, а только с помощью css и js.

[Maximilian]

Как раз наоборот, тремя сообщениями выше рассматривается случай, где закругление происходит именно БЕЗ jpg, а только с помощью css и js.

Извините, я немного ввёл в заблуждение, мне нужно сделать таким образом дизайн каждой новости, например как на этом сайте _http://pc-soft.ru.

[raduga]

Извините, я немного ввёл в заблуждение, мне нужно сделать таким образом дизайн каждой новости, например как на этом сайте _http://pc-soft.ru.

http://joomlaforum.ru/index.php/topic,4966.0.html
http://joomlaforum.ru/index.php/topic,4631.0.html
http://joomlaforum.ru/index.php/topic,5048.0.html
http://joomlaforum.ru/index.php/topic,776.0.html

[IceFusion]

Люди чё то тут какая-то ерунда происходит сдедал

вывод вот так:
<?php mosLoadModules ( 'right',-3 ); ?>
А выводится аж 4 див тегов!

<div id="right_outer">
            <div class="module-cart">
         <div>
            <div>
               <div>
                  <div>
                <a style="font-size:11px; color:#1A3DC1; text-decoration:underline; font-weight:normal;" href="http://x-sive.ru/index.php?page=shop.cart&option=com_virtuemart&Itemid=1">
                Показать корзину</a><br/>
Ваша корзина пуста.</div>

               </div>
            </div>
         </div>
      </div>

[overlord]

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

[Phoenix168]

Можно ли закруглить углы у модуля методом Радуги который выводится так: <?php echo $sidenav; ?>

[raduga]

Можно ли закруглить углы у модуля методом Радуги который выводится так: <?php echo $sidenav; ?>

А какой html-код на выходе получается? Модуль должен быть в четырех дивах.

[raduga]

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

Код:

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

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

[Phoenix168]

А какой html-код на выходе получается? Модуль должен быть в четырех дивах.

Код в шаблоне:

Код:

<td id="sidenav" class="right">
 <div class="sidenav">
  <div class="padding">
   <?php echo $sidenav; ?>
   <?php mosLoadModules('right', -2); ?>
  </div>
 </div>
</td>

Код на выходе:

Код:

<td id="sidenav" class="right">
 <div class="sidenav">
  <div class="padding">
   <div class="moduletable"><h3>пример</h3>
    <ul class="submenu">
     <li class=""><a href="_http://www.пример.com/content/view/7/7/">пример</a></li>
     <li class=""><a href="_http://www.пример.com/content/view/8/8/">пример</a></li>
     <li class=""><a href="_http://www.пример.com/content/view/21/19/">пример</a></li>
     <li class=""><a href="_http://www.пример.com/content/view/9/9/">пример</a></li>
     <li class=""><a href="_http://www.пример.com/content/view/10/10/">пример</a></li>
     <li class=""><a href="_http://www.пример.com/content/view/15/14/">пример</a></li>
     <li class=""><a href="_http://www.пример.com/content/view/11/11/">пример</a></li>
    </ul>
   </div>
  </div>
 </div>
</td>

2raduga: находится только три дива

[raduga]

А почему именно так выводишь, почему не хочешь вывести обычным способом?

<td id="sidenav" class="right">
 <div class="sidenav">
  <div class="padding">
    <?php mosLoadModules('user9', -3); ?>
    <?php mosLoadModules('right', -2); ?>
  </div>
 </div>
</td>

Публикуешь в user9 свое меню и выводишь его с круглыми углами.

[Phoenix168]

Дело в том что в шаблоне зашит вывод подменю от mainmenu именно в виде <?php echo $sidenav; ?>, потому что в состав шаблона включен скрипт, автоматически генерящий меню второго уровня.

[raduga]

в состав шаблона включен скрипт, автоматически генерящий меню второго уровня.

Ну тогда открывай файл скрипта и обрамляй меню любым нужным кол-вом дивов.

[Phoenix168]

Вот решение:

Код:

<div class="moduletable">
<div>
<div>
<?php echo $sidenav; ?>
</div>
</div>
</div>

Истина, как обычно, где-то рядом.  /*спасибо raduga*/

[Йопрст]

Дорогие друзья, я вот все понимаю, все ясно вроде с дивами и классами 
Но вот на днях пришлось в первые применить "круглые углы".
И сопстнна столкнулся с проблемой:
При любых обстоятельствах, содержимое  moduletemplate- сотоварищи, растягивается плотненько по границам модуля.
Не влияют ни padding ни еснна marign(((
В обычных ситуациях, тож самое редактируется как обычно...
В чем фишка? Почему текст в модуле едет к примеру  padding: 8px; , вместе с картинкой фона(ети пресловутые углы)?
Как отделить содержимое обьекта от его фона??? Третий день бьюсь  Моск кипит ужо)))
-------
оформление состоит из трех рисунков, но беда в том, что сам рисунок начинается на 12 пикселей дальше от границы изображения. И вот в етти рамки мне и нужно вопхнуть содержимое модуля.(((

[Йопрст]

Всё, проблему решил... Тупо переименовал все классы, и видимо где то- попал куда надо...  Спасибо

[esmark]

Поздновато пишу (только сейчас увидел эту тему), но судя по тому, что на Портативе до сих пор нет ни одного 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;
- использовал этот метод только на шаблонах свёрстанных слоями - работает без проблем.

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

Данный способ мне больше всего понравился. Однако в силу того, что я не силен в JavaScript не смог подправить функцию Rounded в nifty.js, чтобы по центру цвет бакграунда div был равен color (из этой функции).
Пробовал дописать

Код:

v.style.backgroundColor=color;

однако не сработало. Подскажите, пожалуйста, как подправить.
P.S. Плюс бы с удовольствием поставил, если бы были на это права.

[mkredaktor]

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

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

[Mitrich]

Я понимаю что первое сообщение на форуме это всегда крик души 

Спокойно прочитай эту тему с начала
И с модулями все будет понятно

А если знаешь HTML + CSS то и с контенотм не должно быть проблем

[mkredaktor]

Да пробовал я. Максимум что получилось так это взять в рамки каждую новость и каждый модуль.

Пытался через CSS(с JavaScript и без) Не получается никак

Плиз Mitrich, будь добр, объясни еще раз доходчиво как для новичка.

[mkredaktor]

Чего такое затишье?
Скажите пожалуйста, какой все-таки метод предпочтительнее использовать для закругления углов модулей и новостей?
Я так понимаю что с помощью (table или div) и CSS к ним? Или с Javascript будет предпочтительнее?
А вариант закругления с помощью картинок, я так понимаю что не очень хорош?

[Ramzesito]

скажите, подойдет ли описываемая методика для закругления углов не всего модуля, а области названия (table.moduletable th )?
или там можно сделать как-то еще проще?

[Йопрст]

Привет опять)))
Вот все хорошо))) Но как методику создания углов с помощью картинок прилепить к контейнеру? Ко всему шаблону.
Мне нужно сделать из трех рисунков одну подложку под фиксированный шаблон. И чтобы она просто тянулась вертикально. И все..
Убил два дня в поисках инфы... Ничего нет((( Обидно ведь главная страница Жумля оформлена таким образом... А вот мануала по созданию именно такой вот "подложки" нигде нет...
Привожу в пример рисунок:

Сопстнна ничего нового, но все это надо применить куда то)) Чтобы выглядело как на картинке, сам шаблон (белый) И уже в нем модули (серые) с курглыми углами)))
Помогите пожалуйста)))
Заранее спасибо.

[FrosTPK]

незнаю, может не в тему, а может и поможет...
http://karman.com.ua/_zakruglenie_uglov_bez_0_0_0_2208_1.html

[timonnn]

а разное оформление можно делать с последним видом меню, как с  суффиксами? Для разного отображения модулей... Просто в дивах не шарю вообще

[GapArchi]

По теме хотелось бы добавить: Больше всего понравился вариант цитируемый ниже, честно говоря другие и ни пробывал, потому что этот получился почти сразу.

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

         Вариант ещё понравился тем что, можно нарисовать любую четырёх угольную рамку, на сколько позволит воображение и возможности фотошопа.
         При вёрстке этим способом столкнулся с тем что, тяжело было подгонять содержимое модуля под рамку, margin и padding неработали.



 

[KRAB]

Интересное решение реализовано в шаблонах K-Kwadrat Transparent и Rocky Mountain Sunrise.
Подходит для любых позиций модулей.

[Skiminok]

просмотрел тему но никак не могу найти ответа на свой вопрос.
как можно реализовать подобное.


что-бы не только углы устанавливались на модуль но и бока верх и низ. как на резиновом шаблоне.

[Skiminok]

Видимо никто не нашел как это реализовать на jomla 

[fatalerror]

Skiminok, попробуй вот этот рецепт:
_http://habrahabr.ru/blogs/webdev/46033/

Потом отпишись по результатам.

[sc@r@bey]

38 статей о создании закругленных углов на сайтах

[Skiminok]

Skiminok, попробуй вот этот рецепт:
_http://habrahabr.ru/blogs/webdev/46033/

Потом отпишись по результатам.

это все тотже пример с 4 картинками.

38 статей о создании закругленных углов на сайтах

а где сдесь статья на 8 картинок?

[sc@r@bey]

просмотрел тему но никак не могу найти ответа на свой вопрос.
как можно реализовать подобное.


что-бы не только углы устанавливались на модуль но и бока верх и низ. как на резиновом шаблоне.

чего-то я теья не совсем понял зачем тебе 8 картинок
http://www.joomlart.com/tutorials/templates_tutorial/how_to_make_rounded_module_like_mamboserver.com_((part_1).html
http://www.joomlart.com/tutorials/templates_tutorial/how_to_make_rounded_module_like_mamboserver.com_(part_2).html
это разве не то?
попробу еще http://www.456bereastreet.com/archive/200406/css_teaser_box/
или

[Skiminok]

чего-то я теья не совсем понял зачем тебе 8 картинок
http://www.joomlart.com/tutorials/templates_tutorial/how_to_make_rounded_module_like_mamboserver.com_((part_1).html
http://www.joomlart.com/tutorials/templates_tutorial/how_to_make_rounded_module_like_mamboserver.com_(part_2).html
это разве не то?
попробу еще http://www.456bereastreet.com/archive/200406/css_teaser_box/
или

на 8 картином мне нужно что-бы не создавать слишком большие графические файлы для резинового модуля.

[sc@r@bey]

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

[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]

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

[den_caruk]

Все работает, просто подключайте модули <jdoc:include type="modules" name="left" style="rounded" />  и обязательно прописывайте style="rounded", именно тогда движок сгенерирует эти три DIV'а