[Решено] Как сделать скругленные углы? - Joomla 1.5: Шаблоны, разметка и макеты вывода

Народ помогите, голову уже слома! Решил я сделать у себя на сайте блоки с закругленными уголками, нашел  как это сделать (http://techmeat.net/example/rounded-corners/) Для реализации там предлагают 2 CSS файла (Style, reset)  и 2 файла JS (jquery-1.3.1, Common)  скопировал  их себе в Joomla в папки CSS и  js в XHTML файле дописал мол:
<css>
      <filename>css/ja-sosdmenu.css</filename>
      <filename>css/menu.css</filename>
      <filename>css/template.css</filename>
      <filename>css/template_rtl.css</filename>
      <filename>css/style.css</filename>
      <filename>css/resrt.css</filename>

                <filename>js/ja.cssmenu.js</filename>
      <filename>js/ja.moomenu.js</filename>
      <filename>js/ja.rightcol.js</filename>
      <filename>js/ja.script.js</filename>
                <filename>js/common.js</filename>
                <filename>js/jquery-1.3.1.js</filename>

В  index.php до писал следующие.
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/reset.css" type="text/css" />

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/common.js"></script>
 <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/jquery-1.3.1"></script>

выключаю редактор, создаю материал и в ручную пишу <div class="block news blue">
         <div class="block news blue">
                           <div class="container">
            <div class="title"><strong>News</strong></div>
              <div class="text">
               <ul>
                  <li>Text</li>
                  <li>Text</li>
                  <li>Text</li>
               </ul>
            </div>
         </div>
      </div>
И каких красивых уголков я не наблюдаю!!! только блок и текст! Что не правильно???

Народ помогите, голову уже слома! Решил я сделать у себя на сайте блоки с закругленными уголками, нашел  как это сделать (http://techmeat.net/example/rounded-corners/)

Извращенец. Зачем подключать скрипты для скругления, елси все это делается базовым CSS

ну  так и просвети слепца, просто очень надо а  способ только такой нашел! Подскажи как проще буду очень благодарен!  

ну  так и просвети слепца, просто очень надо а  способ только такой нашел! Подскажи как проще буду очень благодарен!  

Вот тут очень много вариантов

PaLyCH а как их применить непосредственно к модулям Joomla, я так и не понял, для каждого модуля писать отдельный код в файле темплейта?

PaLyCH а как их применить непосредственно к модулям Joomla, я так и не понял, для каждого модуля писать отдельный код в файле темплейта?

Да. Можно создать туеву кучу оформлений модулей. Чтобы было понятно. Возьмите стандратный шаблон beez. В шаблоне есть папка HTML, в ней лежит файлик modules.php/ Внимательно изучи и ты поймешь

Кстати вопрос в тему
есть ли компонент какой то, при помощи которого можно было бы изменять шаблон непосредственно допустим content'a ( внешнего вида )

я копался в каких-то  контент конструкторах но чото не нашёл ничего путного . смотрел тут
http://extensions.joomla.org/extensions/style-a-design/articles-styling



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

Кстати вопрос в тему
есть ли компонент какой то, при помощи которого можно было бы изменять шаблон непосредственно допустим content'a ( внешнего вида )

я копался в каких-то  контент конструкторах но чото не нашёл ничего путного . смотрел тут
http://extensions.joomla.org/extensions/style-a-design/articles-styling



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

хтмл и CSS тебе в помощь, редактируй шаблон.

Народ помогите, голову уже слома! Решил я сделать у себя на сайте блоки с закругленными уголками, нашел  как это сделать (http://techmeat.net/example/rounded-corners/) Для реализации там предлагают 2 CSS файла (Style, reset)  и 2 файла JS (jquery-1.3.1, Common)  скопировал  их себе в Joomla в папки CSS и  js в XHTML файле дописал мол:

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

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

типа футер и хэдер добавить надо? )

типа футер и хэдер добавить надо? )

к примеру, если у модуля будет изменятся только высота, то да.
<div>хэдер</div>
<div>модуль</div> тут можно края бардюром обозначить
<div>футер</div>
Ну вот http://avalar.su особо не старался.
установи плагин firebug для firefox, разбери данный пример, и я думаю все будет ясно


аааа, хотя вот тут у меня немного другой вариант, с помощью таблицы, но принцип не отличается.


Вот еще тема на которой я учился закругленные углы для модулей joomla.

ну да файрбаг у меня давно помогает в подобных вещах
просто чото впервые столкнулся с тем, что нужно самому закруглять края) обычно  разбираю готовый код, там либо уже есть либо не нужен)

а когда смотришь шаблон в Joomla ( корректируя линк типа tp=1 ) у некоторых модулей  пишет типа rounded outline кажется
это не означает как раз то что края округлены?

Смотрю шаблоны известных контор. Везде скругленные углы нарисованы.

с появлением html5 закругленные уголки можно делать такой конструкцией:
Странно, что об этом тут еще не написали.
Старые версии браузеров + ИЕ не поддерживают эти параметры, но тут нужно уже решать самим, что важнее. У меня на сайте всего 20% пользуются такими версиями - они получат вместо закругленных уголков прямые, что в принципе тоже вписывается в дизайн.
Зато не нужно загружать сайт лишней графикой

Код

-moz-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;

это только в мозиле работать будет. Т.е. не вариант.

это только в мозиле работать будет. Т.е. не вариант.

ты думаешь 80% моих посетителей - файрфокс? поддержка этого параметра добавлена во все крупные браузеры, кроме ИЕ. Только что проверил и в опере и в хроме.

Листинг создания скругленных углов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Закругленные углы</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
<!--

/* общие стили */

*  {
   padding: 0;
   margin: 0;
}

body {
   font: 0.8em/1.5em arial;
}

h3 {
   font: 1.5em/1em arial;
   margin-bottom: 0.5em;
}

/* элементы закругления */

.inner-box {
   padding:1em;
}

.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
   display: block;
   height: 1px;
   overflow: hidden;
   font-size:1px;
}

.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; }

/*

возможные комбинации

r3 r1 r1 вверху
r1 r1 r3 внизу

r5 r3 r2 r1 r1 вверху
r1 r1 r2 r3 r5 внизу

r10 r7 r5 r4 r3 r2 r2 r1 r1 r1 вверху
r1 r1 r1 r2 r2 r3 r4 r5 r7 r10 внизу

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

*/

#rounded-box-3, #rounded-box-5, #rounded-box-10 { margin:1em; }

.inner-box, b { background-color: #CCCCCC; }

/* уменьшаем отступы по мере роста радиуса закругления */
#rounded-box-3 .inner-box { padding: 1em;}
#rounded-box-5 .inner-box { padding: 0.7em 1em;}
#rounded-box-10 .inner-box { padding: 0.4em 1em;}

-->
</style>

</head>

<body>

   <div id="rounded-box-3">
      <b class="r3"></b><b class="r1"></b><b class="r1"></b>
      <div class="inner-box">
         <h3>Элемент с закругленными углами R=3px</h3>
         <p>Этот способ закругления углов подсмотрен на GMail.</p>
      </div>
      <b class="r1"></b><b class="r1"></b><b class="r3"></b>
   </div>

   <div id="rounded-box-5">
      <b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b>
      <div class="inner-box">
         <h3>Элемент с закругленными углами R=5px</h3>
         <p>Этот способ закругления углов подсмотрен на GMail.</p>
      </div>
      <b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r5"></b>
   </div>

   <div id="rounded-box-10">
      <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">
         <h3>Элемент с закругленными углами R=10px</h3>
         <p>Этот способ закругления углов подсмотрен на GMail.</p>
      </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>

</body>
</html>

    border-radius+
   -webkit-border-radius+
   -moz-border-radius+
   -khtml-border-radius+
    behavior: border-radius.htc

=почти кроссбраузерное решение( в жопе токо опера до 10.5)

fotolider.ru

Спасибо Огромное, ibrodin! Очень хорошее решение Вы подсмотрели у Gmail. Я проверил в 9 браузерах, правда новых версий (FireFox 3.6, Opera 10, Navigator 9, Flock, SeaMonkey, K-Meleon, Safari, Chrome, IE) отображают все.
Ослик IE (у меня IE7 для проверок) как всегда не в духе -) радиус R=3 не видит, остальные закруглил -)

Кто-нибудь может объяснить, почему behavior: border-radius.htc не работает на j1.5.18?
В голом HTML никаких проблем. Как только подключаю в Joomla, бордюры, которые должны скругляться,
в IE вообще пропадают.

Убился уже... Где копать?

во первых, нужно положить border-radius.htc, в данном случае в корень сайта. можно и в шаблон, но тогда указываем путь /templates/my_template/shit/border-radius.htc
Во вторых, картинки это врядли скруглит, для скругления картинаг  я юзал както ictinus, там все просто.

danik.html
Естественно, border-radius.htc лежит там, где нужно.
Повторяю, в чистом htmi ВСЕ прекрасно работает. не работает именно на Joomla.
И скругляю я не картинку, а бордюр вокруг нее.

Тоже не работает...вставлял и через .ссs и через style=""...в чистом работает...

Ну что, господа гуру и простые джумловоды, кто-нибудь может выявить,
с чем конфликтует border-radius.htc в Joomla 1.5.18, что вызывает пропадание бордюров в IE?

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

именно в 18 версии не проверял, но сомневаюсь что в ней скрипты, отличные от 14, хотя мож ошибаюсь.
нужно тщательно проверить путь. в CSS файле ie.css нужно указывать путь ОТ КОРНЯ САЙТА, хотя это и не очевидно. для проверки можно вписать в файл htc почти в начале строчку alert('this works !');

danik.html
Путь прописан 100% правильно.
При неправильноим пути в IE, как и положено, отображаются нескругленные границы.
Как только htc начинает работать, границы полностью пропадают.

Добавил в шаблон...В ие углы не скругляет...border-radius.htc лежит в корне(да и везде где только можно)

Мля.. только щас допер! трабла не в том что не скругляет а в том что пропадает)
да, встречал такую проблему. не помню как решил...вроде это изза z-index бывает. кстати вроде однажды косяк был в ие8, а в 6 и 7 было ок. смотри z-index'ы

z-index'ы не использую вообще.
Пропадает во всех ослах.

ну ссылку в студию