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

raduga

Moderator
70
75 / 2

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

« : 06.03.2006, 13:58:49 »

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

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

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

« Последнее редактирование: 18.08.2007, 00:36:02 от raduga »

Записан

бесплатные шаблоны для JOOMLA 1.6
бесплатные шаблоны для JOOMLA 1.5
смотри FAQ по Joomla!

userxp

Живу я здесь
2019
403 / 6
Злой и ужасный бармалей

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

« Ответ #1 : 06.03.2006, 14:18:47 »

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

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

Записан

Как правильно задавать вопрос службе технической поддержки

SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3

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

« Ответ #2 : 08.05.2006, 00:05:05 »

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

Записан

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

« Ответ #3 : 08.05.2006, 00:40:00 »

С модулями User тоже не прокатывает

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

Записан

raduga

Moderator
70
75 / 2

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

« Ответ #4 : 08.05.2006, 12:34:04 »

Цитата: Serg0k от 08.05.2006, 00:40:00

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

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

Записан

бесплатные шаблоны для JOOMLA 1.6
бесплатные шаблоны для JOOMLA 1.5
смотри FAQ по Joomla!

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

« Ответ #5 : 08.05.2006, 12:47:16 »

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

Записан

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

« Ответ #6 : 11.09.2006, 18:36:00 »

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

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

Живу я здесь
2019
403 / 6
Злой и ужасный бармалей

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

« Ответ #7 : 11.09.2006, 18:42:01 »

template_css.css шаблона

Записан

Как правильно задавать вопрос службе технической поддержки

SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3

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

« Ответ #8 : 11.09.2006, 18:46:06 »

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

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

Записан

userxp

Живу я здесь
2019
403 / 6
Злой и ужасный бармалей

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

« Ответ #9 : 11.09.2006, 18:58:30 »

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

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

Записан

Как правильно задавать вопрос службе технической поддержки

SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3

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

« Ответ #10 : 11.09.2006, 19:04:46 »

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

Записан

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

« Ответ #11 : 11.09.2006, 19:07:08 »

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

Записан

userxp

Живу я здесь
2019
403 / 6
Злой и ужасный бармалей

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

« Ответ #12 : 11.09.2006, 20:26:24 »

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

Записан

Как правильно задавать вопрос службе технической поддержки

SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3

Mitrich

Захожу иногда
289
524 / 13
Все можно. Но сначала учиться, учиться и учиться.

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

« Ответ #13 : 15.09.2006, 19:04:01 »

В 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) закоментировал и положил красный цвет для наглядности.
Подскажите в чем косяк

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

Записан

http://mitrichlab.ru создание сайтов на CMS Joomla!

Часто задаваемые вопросы и ответы по Joomla Все что надо знать о HTML и CSS приличному человеку Как найти и читать error.log Не стучите в личку, огорчусь

raduga

Moderator
70
75 / 2

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

« Ответ #14 : 16.09.2006, 00:59:39 »

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

Записан

бесплатные шаблоны для JOOMLA 1.6
бесплатные шаблоны для JOOMLA 1.5
смотри FAQ по Joomla!

Mitrich

Захожу иногда
289
524 / 13
Все можно. Но сначала учиться, учиться и учиться.

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

« Ответ #15 : 16.09.2006, 01:22:11 »

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

Записан

http://mitrichlab.ru создание сайтов на CMS Joomla!

Часто задаваемые вопросы и ответы по Joomla Все что надо знать о HTML и CSS приличному человеку Как найти и читать error.log Не стучите в личку, огорчусь

ButuzOFF

Захожу иногда
144
22 / 2

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

« Ответ #16 : 30.09.2006, 15:39:45 »

Знаю уже с этими углами уже достаточно решений есть
Но блин туплю я

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

« Последнее редактирование: 30.09.2006, 15:48:50 от ButuzOFF »

Записан

4853

Захожу иногда
170
20 / 11

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

« Ответ #17 : 30.09.2006, 15:59:40 »

Цитата: ButuzOFF от 30.09.2006, 15:39:45

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

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

Записан

ButuzOFF

Захожу иногда
144
22 / 2

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

« Ответ #18 : 30.09.2006, 22:58:24 »

Спасибо тебе большое

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

Записан

4853

Захожу иногда
170
20 / 11

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

« Ответ #19 : 01.10.2006, 00:22:44 »

Цитировать

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

Теми же картинками и через дивы прописаны.
Обошёлся тремя картинками, верхней, нижней и середина бэкграундом.
Правда две недели ялозил

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

« Последнее редактирование: 01.10.2006, 00:27:50 от 4853 »

Записан

moro

Новичок
4
0 / 0

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

« Ответ #20 : 05.10.2006, 04:35:08 »

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

Код


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

« Последнее редактирование: 05.10.2006, 18:34:52 от moro »

Записан

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

« Ответ #21 : 02.01.2007, 04:16:00 »

Цитата: ButuzOFF от 30.09.2006, 22:58:24

Может кто делал и сможет подсказать...
Жуть как хочу сделать с 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

Захожу иногда
144
22 / 2

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

« Ответ #22 : 03.01.2007, 22:54:37 »

Цитировать

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

Нужно и полезно

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

Записан

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

« Ответ #23 : 09.01.2007, 15:13:45 »

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

Записан

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

« Ответ #24 : 09.01.2007, 16:11:00 »

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

Записан

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

« Ответ #25 : 09.01.2007, 17:59:41 »

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

Записан

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

« Ответ #26 : 09.01.2007, 18:10:49 »

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

Записан

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

« Ответ #27 : 09.01.2007, 19:34:39 »

Цитата: Andrew от 09.01.2007, 18:10:49

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

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

Записан

raduga

Moderator
70
75 / 2

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

« Ответ #28 : 09.01.2007, 20:37:12 »

Цитата: Maximilian от 09.01.2007, 19:34:39

Извините, я немного ввёл в заблуждение, мне нужно сделать таким образом дизайн каждой новости, например как на этом сайте _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

Записан

бесплатные шаблоны для JOOMLA 1.6
бесплатные шаблоны для JOOMLA 1.5
смотри FAQ по Joomla!

IceFusion

Захожу иногда
60
0 / 1

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

« Ответ #29 : 28.01.2007, 23:36:39 »

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

вывод вот так:
<?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>

Записан

Как сделать показ header от времени суток Автор raduga	Ответов: 33 Просмотров: 41335	19.01.2014, 01:35:26 от Beer
Как сделать, чтобы контактная информация отображалась над меню или рядом с ним? Автор bugaooga	Ответов: 1 Просмотров: 6148	25.10.2013, 20:54:31 от artel-st
Как сделать чтобы определенный модуль был только на одной странице Автор alexS	Ответов: 25 Просмотров: 22983	05.06.2013, 00:46:16 от puserfill
Как сделать смену картинки при выборе разных пунктах меню Автор raduga	Ответов: 17 Просмотров: 27849	16.01.2013, 14:19:27 от zavarov
Как сделать поля/отступы для изображений в контенте? Автор Andrew	Ответов: 6 Просмотров: 12658	22.07.2012, 22:08:49 от Taatshi

WT JShopping Add order info to checkout finish плагин для Joomla

Joomla 6 нуждается в вашей помощи с тестированием.Вышел недавно релиз Joomla 6 alpha1

Вышла Phoca Gallery 5.1.0

Похожие темы