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

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