0 Пользователей и 1 Гость просматривают эту тему.
  • 49 Ответов
  • 23416 Просмотров

Народ помогите, голову уже слома! Решил я сделать у себя на сайте блоки с закругленными уголками, нашел  как это сделать (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>
И каких красивых уголков я не наблюдаю!!! только блок и текст! Что не правильно???
« Последнее редактирование: 02.08.2009, 22:25:08 от PaLyCH »
*

PaLyCH

  • Давно я тут
  • 948
  • 146 / 19
  • Архитектор сайтов
Как сделать скругленные углы?
« Ответ #1 : 02.08.2009, 12:17:37 »
Народ помогите, голову уже слома! Решил я сделать у себя на сайте блоки с закругленными уголками, нашел  как это сделать (http://techmeat.net/example/rounded-corners/)
Извращенец. Зачем подключать скрипты для скругления, елси все это делается базовым CSS

Как сделать скругленные углы?
« Ответ #2 : 02.08.2009, 20:34:25 »
ну  так и просвети слепца, просто очень надо а  способ только такой нашел! Подскажи как проще буду очень благодарен! *DRINK* 
*

PaLyCH

  • Давно я тут
  • 948
  • 146 / 19
  • Архитектор сайтов
Как сделать скругленные углы?
« Ответ #3 : 02.08.2009, 22:22:41 »
ну  так и просвети слепца, просто очень надо а  способ только такой нашел! Подскажи как проще буду очень благодарен! *DRINK* 
Вот тут очень много вариантов
*

nOObMeister

  • Захожу иногда
  • 126
  • 6 / 0
  • хД)))
PaLyCH а как их применить непосредственно к модулям Joomla, я так и не понял, для каждого модуля писать отдельный код в файле темплейта?
*

PaLyCH

  • Давно я тут
  • 948
  • 146 / 19
  • Архитектор сайтов
PaLyCH а как их применить непосредственно к модулям Joomla, я так и не понял, для каждого модуля писать отдельный код в файле темплейта?
Да. Можно создать туеву кучу оформлений модулей. Чтобы было понятно. Возьмите стандратный шаблон beez. В шаблоне есть папка HTML, в ней лежит файлик modules.php/ Внимательно изучи и ты поймешь
*

xTMx

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

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



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

GapArchi

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

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



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

GapArchi

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

xTMx

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

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

GapArchi

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


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


Вот еще тема на которой я учился закругленные углы для модулей joomla.
« Последнее редактирование: 03.12.2009, 05:47:18 от GapArchi »
*

xTMx

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

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

Jomel

  • Осваиваюсь на форуме
  • 27
  • 1 / 0
Смотрю шаблоны известных контор. Везде скругленные углы нарисованы.
*

zelenin

  • Новичок
  • 4
  • 0 / 0
с появлением html5 закругленные уголки можно делать такой конструкцией:
Код
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
Странно, что об этом тут еще не написали.
Старые версии браузеров + ИЕ не поддерживают эти параметры, но тут нужно уже решать самим, что важнее. У меня на сайте всего 20% пользуются такими версиями - они получат вместо закругленных уголков прямые, что в принципе тоже вписывается в дизайн.
Зато не нужно загружать сайт лишней графикой
« Последнее редактирование: 04.06.2010, 07:51:46 от zelenin »
*

yuri-it

  • Давно я тут
  • 995
  • 43 / 3
  • Быстрый хостинг https://jehost.ru
Код
-moz-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
это только в мозиле работать будет. Т.е. не вариант.
По-настоящему быстрый хостинг для Joomla : https://jehost.ru
Отзывы: http://joomlaforum.ru/index.php/topic,109288.0.html
Отзывы по хостингу http://hosting101.ru/jehost.ru
*

zelenin

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

ibrodin

  • Новичок
  • 2
  • 0 / 0
Листинг создания скругленных углов:
Цитировать
<!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>
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
    border-radius+
   -webkit-border-radius+
   -moz-border-radius+
   -khtml-border-radius+
    behavior: border-radius.htc

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

fotolider.ru
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

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

AlexAGF

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

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

Код
.round {
   background: #FFF;
   border: #ADADAD 1px solid;
   padding: 3px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   behavior: url('/border-radius.htc');
}

<img class="round" src="img.gif" />
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
во первых, нужно положить border-radius.htc, в данном случае в корень сайта. можно и в шаблон, но тогда указываем путь /templates/my_template/shit/border-radius.htc
Во вторых, картинки это врядли скруглит, для скругления картинаг  я юзал както ictinus, там все просто.
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

AlexAGF

  • Захожу иногда
  • 81
  • 6 / 0
danik.html
Естественно, border-radius.htc лежит там, где нужно.
Повторяю, в чистом htmi ВСЕ прекрасно работает. не работает именно на Joomla.
И скругляю я не картинку, а бордюр вокруг нее.
« Последнее редактирование: 24.06.2010, 02:02:34 от AlexAGF »
*

biohan

  • Захожу иногда
  • 56
  • 0 / 0
Тоже не работает...вставлял и через .ссs и через style=""...в чистом работает...
*

AlexAGF

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

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

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
именно в 18 версии не проверял, но сомневаюсь что в ней скрипты, отличные от 14, хотя мож ошибаюсь.
нужно тщательно проверить путь. в CSS файле ie.css нужно указывать путь ОТ КОРНЯ САЙТА, хотя это и не очевидно. для проверки можно вписать в файл htc почти в начале строчку alert('this works !');
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

AlexAGF

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

biohan

  • Захожу иногда
  • 56
  • 0 / 0
Код
<div style=" background: #FFF;
   border: #ADADAD 1px solid;
   padding:10px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   behavior: url('border-radius.htc');">Пример</div>

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

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Мля.. только щас допер! трабла не в том что не скругляет а в том что пропадает)
да, встречал такую проблему. не помню как решил...вроде это изза z-index бывает. кстати вроде однажды косяк был в ие8, а в 6 и 7 было ок. смотри z-index'ы
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

AlexAGF

  • Захожу иногда
  • 81
  • 6 / 0
z-index'ы не использую вообще.
Пропадает во всех ослах.
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
ну ссылку в студию
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать логотип в шапке ссылкой

Автор hmaoITN

Ответов: 100
Просмотров: 60052
Последний ответ 08.01.2018, 12:13:04
от galll72
как сделать кнопки меню!

Автор Millenium_3000

Ответов: 10
Просмотров: 7702
Последний ответ 17.08.2017, 17:24:12
от Intrande
Как сделать резиновой центральную чать сайта?

Автор genkey

Ответов: 8
Просмотров: 2206
Последний ответ 28.05.2016, 10:45:37
от vipiusss
Решено. Шаблон YooMilk где исправить Continue Reading ?

Автор Nino

Ответов: 3
Просмотров: 3116
Последний ответ 18.07.2015, 14:14:57
от rukodelie
Как сделать меню вконце страницы ?

Автор p4o1

Ответов: 1
Просмотров: 966
Последний ответ 08.04.2015, 22:46:50
от vipiusss