Круглая рамка вокруг модулей

Как сделать?

 
Посетитель
no avatar
Медаль
Сообщений: 152
Подскажите пожалуйста как сделать чтобы все центральные модули были с рамочкой с закруглёнными краями, и их заголовки тоже ?
Оформить отдельно каждый модуль можно в папке modules, а как сделать чтобы так оформлялись все цетральные модули?
Пробую делать в templates.php, делаю таблицу вокруг кода <?php cmsModule("top"); ?>, но ничего не получается
Редактировалось: 2 раз (Последний: 9 ноября 2009 в 10:19)
Посетитель
small user social cms
Медаль
Сообщений: 577
А кто мешает сделать шаблон для модуля? :)
В папке \templates\_default_\modules взять за основу module_simple на основе его создать например module_centre , а в админке в настройках модуля выбрать этот шаблон.
Реклама
cms
Посетитель
no avatar
Медаль
Сообщений: 152
Спасибо большое!
Редактировалось: 1 раз (Последний: 9 ноября 2009 в 11:17)
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатий
Сообщений: 4284
nataly, если получится,нам тоже подскажи, ок ?
Посетитель
small user social cms
Медаль
Сообщений: 577
lezginka.ru:

nataly, если получится,нам тоже подскажи, ок ?

Да получится! Можно таблицей сделать, можно в css, а можно c помощью jQuery http://www.ruseller.com/lessons.php?rub=32&id=130
Редактировалось: 2 раз (Последний: 9 ноября 2009 в 12:44)
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 546
мне кажется, мы сдорово сэкономим друг другу время, если вот такие решения, как в этой теме, будут описаны в документации. или нет?
Прощайте и здравствуйте, как всегда!
Посетитель
small user social cms
Медаль
Сообщений: 577
feba7:

мне кажется, мы сдорово сэкономим друг другу время, если вот такие решения, как в этой теме, будут описаны в документации. или нет?
наверное нет...потому что если ДА, то видимо придётся кинуть сразу учебник по HTML+CSS.
InstantCMS Team
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 4336
видимо придётся кинуть сразу учебник по HTML+CSS
feba7, тоже считаю - не стоит.
Видео каталог для InstantCMS | Аудио каталог для InstantCMS | Мы Вконтакте | Предложение для спонсоров
Посетитель
no avatar
Медаль
Сообщений: 152
lezginka.ru получилось сделать, рассказываю как:

если в папке temlates нет папки modules, то создаём её и копируем туда файл module.tpl из шаблона _default_.
Дальше пределываем файл module.tpl как хочется.

{$mod.title} - это заголовок модуля
{$mod.body} - сам модуль
помещаем их в таблицу или div с нужными изображениями,картинками

Вобщем дальше как в обычном html и css,
только вместо заголовка пишем {$mod.title}, вместо самого модуля {$mod.body}


что касается того как это сделать в html , то вот ссылки на уроки по круглым рамкам http://www.tultip.net/verstka/137-zakruglenie-uglov-dlja-sajjta.html
Редактировалось: 2 раз (Последний: 9 ноября 2009 в 18:48)
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 546
Это Вы, милые мужики, насчет учебников очень сильно загнули. С таким подходом мне, чтобы шаровую опору на папиных жигулях поменять - надо ее сперва на токарном станке выточить?)))))Я делаю гораздо проще - иду в магазин и беру готовую!!!

Ну вот, какая nataly умница. Все растолковала без всяких учебников. Nataly, ты пожалуйста, это свое решение в вики опиши, а то через три дня кто-нибудь опять эту тему откроет - так как эту и не найдешь уже ведь))))
Спасибо тебе!
Редактировалось: 1 раз (Последний: 10 ноября 2009 в 09:39)
Прощайте и здравствуйте, как всегда!
Посетитель
no avatar
Медаль
Сообщений: 152
Рада помочь, я например без помощи форума ни за что бы не разобралась как сделать сайт .
Редактировалось: 1 раз (Последний: 9 ноября 2009 в 21:36)
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатий
Сообщений: 4284
nataly:

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

nataly, спасибо.
если не сложно пример, сама выложи, чтобы скопировать и сразу получть круглые углы(если уже есть готовое решение).
нам мало что разжевали, еще и проголотить нужно :)
но это не обязательно :)
Посетитель
no avatar
Медаль
Сообщений: 152
У меня получился вот такой код, но вообще я думаю можно сделать по урокам и лучше чем у меня получилось:

module2.tpl

Код PHP:
  1.  
  2. <table width="100%" border="0" cellpadding="0" cellspacing="0">
  3. <tr>
  4. <td class="b_left_top"><div class="mleft1"></div></td>
  5. <td class="b_bg"><div class="mleft1"></div></td>
  6. <td class="b_right_top"><div class="mleft1"></div></td>
  7. </tr>
  8. </table>
  9.  
  10. <table width="100%" cellspacing="0" cellpadding="0">
  11. <tr>
  12. <td>
  13.  
  14. <div class="b_cont">
  15. <table class="{$mod.css_prefix}module" width="100%" cellspacing="0" cellpadding="0">
  16. <tbody>
  17. {if $mod.showtitle neq 0}
  18. <tr>
  19. <td class="{$mod.css_prefix}moduletitle">
  20. {$mod.title}
  21. {if $cfglink}
  22. <span class="fast_cfg_link">
  23. <a href="{$cfglink}" target="_blank" title="Настроить модуль">
  24. <img src="/images/icons/configure.gif"/>
  25. </a>
  26. </span>
  27. {/if}
  28.  
  29. </td>
  30.  
  31. </tr>
  32. {/if}
  33. <tr>
  34. <td class="{$mod.css_prefix}modulebody">
  35.  
  36. {$mod.body}
  37.  
  38. </td>
  39.  
  40. </tr>
  41. </tbody>
  42. </table></div>
  43.  
  44.  
  45. </td>
  46. <td class="b_bg_left" wi><div class="mleft2"></td>
  47. </tr>
  48. </table>
  49.  
  50. <table width="100%" border="0" cellpadding="0" cellspacing="0">
  51. <tr>
  52. <td class="b_bg_bot_left"><div class="mleft1"></div></td>
  53. <td class="b_bg_bot" width="100%"><div class="mleft1"></div></td>
  54. <td class="b_bg_bot_r"><div class="mleft3"></div></td>
  55. </tr>
  56. </table>
  57.  
  58.  
  59.  


css:



Код PHP:
  1.  
  2.  
  3.  
  4. .bord { border-left:1px #c3c5c8 solid;border-right:1px #c3c5c8 solid;padding-left:11px; padding-right:11px; padding-top:11px; color:#636874; font-size:12px; padding-bottom:0px;}
  5. .bord a { color:#44a108; text-decoration:underline;}
  6. .bord a:hover { text-decoration:none;}
  7.  
  8. .mleft1 { width:7px; height:5px; }
  9. .mleft2 { width:5px; height:5px; }
  10. .mleft3 { width:13px; height:5px; }
  11. .mleft { width:16px; height:20px; }
  12. .m_top_left {background:url(../images/cont_left.gif) left top; width:16px; height:31px; display:block;}
  13. .m_top_bg { background:url(../images/cont_bg.gif) repeat-x; font-size:16px; padding-top:5px;}
  14. .m_top_right {background:url(../images/cont_right.gif); width:16px; height:31px; display:block;border:0px}
  15. .m_top_line { background:url(../images/m_top_line.gif) repeat-x;}
  16. .m_top_right_2 { background:url(../images/cont_right_top.gif); width:16px; height:31px; display:block;}
  17.  
  18. .b_left_top { background:url(../images/left_top.gif) top left no-repeat; width:10px; height:12px;}
  19. .b_bg { border-top:1px #bac1c7 solid; background:url(../images/b_top_bg.gif) top center repeat-x; height:11px;padding:0px;margin:0px}
  20. .b_right_top { background:url(../images/right_top.gif) no-repeat top right; width:15px; height:12px;}
  21. .b_cont { border-left:1px #bac1c7 solid; background:url(../images/b_cont_bg.gif) #ffffff repeat-x;padding-bottom:13px;}
  22. .b_bg_left {background:url(../images/b_bg_left.gif) repeat-y left top; width:3px;}
  23. .b_title {color:#44a108; font-size:17px; margin-left:22px;}
  24. .b_link { padding-right:14px;}
  25.  
  26. .b_title_2 { margin-left:22px;}
  27. .b_title_2_left { background:url(images/title_left.gif); width:6px; height:17px;}
  28. .b_title_2_bg { background:url(images/title_bg.gif) repeat-x;padding-right:4px;padding-left:4px; font-size:11px; color:#FFFFFF;padding-top:2px;}
  29. .b_title_2_right {background:url(images/right.gif); width:27px; height:17px;}
  30.  
  31. .b_title_3 { background:url(images/div_bg.gif) left bottom no-repeat; padding-left:15px; color:#45719d; font-size:11px;}
  32. .b_text { font-size:12px; color:#a0a0a0; margin-left:6px; margin-top:4px; text-decoration:underline; padding-right:10px;}
  33. .b_bg_bot { background:url(../images/bottom_bg.gif) repeat-x; height:33px;}
  34. .b_bg_bot_left {background:url(../images/bottom_left.gif); width:10px; height:33px;}
  35. .b_bg_bot_r {background:url(../images/bottom_r.gif) no-repeat; width:10px; height:33px;}
  36.  
  37. .m_bot_left { background:url(../images/cont_left_bottom.gif) no-repeat; width:16px; height:24px;}
  38. .m_bot_bg {background:url(../images/cont_bg_2.gif);}
  39.  
  40.  

Дальше можно взять за основу картинки для рамки из прикреплённого файла и заменить их на свои.
Прикрепленные файлы:
images_57349.rar | 2.18 Кб | Скачали: 597
Редактировалось: 1 раз (Последний: 10 ноября 2009 в 16:28)
Sometime CMS Community
Посетитель
no avatar
Сообщений: 1
Всем добрый день. На днях обнаружил эту CMS и вот сейчас потихоньку копаюсь. Кое в чем уже разобрался. Но вопросов пока много. Осмелюсь предложить свой вариант рамок (с тенями или любыми другими рисунками) на DIV-ах. Может кому пригодиться.

module.tpl

Код PHP:
  1. <div class="block">
  2. <div class="top">
  3. <div class="left"></div>
  4. <div class="right"></div>
  5. <div class="center">{if $mod.showtitle neq 0}{$mod.title}{if $cfglink}
  6. <span class="fast_cfg_link">
  7. <a href="{$cfglink}" target="_blank" title="Настроить модуль">
  8. <img src="/images/icons/configure.gif"/>
  9. </a>
  10. </span>
  11. {/if}{/if}</div>
  12. </div>
  13.  
  14. <div class="body">
  15. <div class="left">
  16. <div class="right">
  17. <div class="center">
  18. <div class="main">{$mod.body}</div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23.  
  24. <div class="bottom">
  25. <div class="left"></div>
  26. <div class="right"></div>
  27. <div class="center"></div>
  28. </div>
  29. </div>
styles.css

Код PHP:
  1.  
  2. .top {text-align:center;}
  3. .top .left {background:url(/templates/моя тема/images/tl.gif) no-repeat; float:left; width:10px; height:30px; margin-right:-10px;}
  4. .top .right {background:url(/templates/моя тема/images/tr.gif) no-repeat; float:right; width:15px; height:30px; margin-left:-15px;}
  5. .top .center {background:url(/templates/моя тема/images/tc.png); height:30px; line-height:30px; margin:0px 15px 0px 10px; font-weight:bold;}
  6.  
  7. .body {;}
  8. .body .left {background:url(/templates/моя тема/images/cl.gif) left repeat-y;}
  9. .body .right {background:url(/templates/моя тема/images/cr.gif) right repeat-y;}
  10. .body .center {padding:1px 0px 1px 0px;}
  11.  
  12. .bottom {;}
  13. .bottom .left {background:url(/templates/моя тема/images/bl.gif) no-repeat; float:left; width:10px; height:30px; margin-right:-10px;}
  14. .bottom .right {background:url(/templates/моя тема/images/br.gif) no-repeat; float:right; width:15px; height:30px; margin-left:-15px;}
  15. .bottom .center {background-image:url(/templates/моя тема/images/bc.png); height:30px; margin:0px 15px 0px 10px;}
Ну и рисунки в качестве примера.

Коряво работает в IE5 и с небольшими проблемами в IE6. Начиная с IE7 и в нормальных браузерах вроде без проблем.
Прикрепленные файлы:
Border_e5f8d.rar | 2.71 Кб | Скачали: 560
Редактировалось: 1 раз (Последний: 11 ноября 2009 в 19:18)
Sometime CMS Community
Посетитель
no avatar
Сообщений: 3
Привет всем! Я тут новенький, пока разбираюсь с системой, и вот решил тоже здесь запостить своё решение проблемы круглых уголков для модуля, на мой взгляд получилось более семантично чем предыдущие решения, и я отказался от настройки модуля на фронте, ибо вижу эту опцию бесполезной.В моём методе используется всего одна картинка.
Вот ХТМЛ код моего модуля с круглыми уголками:
Код PHP:
  1.  
  2. <dl class="modul_corner">
  3. <dt>
  4. <b class="t_l"></b><b class="t_r"></b>
  5. {if $mod.showtitle neq 0}{$mod.title}{/if}
  6. </dt>
  7. <dd>
  8. {$mod.body}
  9. <b class="b_l"></b><b class="b_r"></b>
  10. </dd>
  11. </dl>
  12.  
Вот КСС код:
Код PHP:
  1.  
  2. .modul_corner{position:relative;margin:10px;border:2px solid #e32323;}
  3. .modul_corner dt{display:block;height:25px;padding:5px 0 0 20px;border-bottom:2px solid #e32323;background:#5a90ea;font-size:18px}
  4. .modul_corner dd{display:block;padding:10px;margin:0}
  5. .modul_corner dd:after {content: '.'; display: block; clear: both;visibility: hidden;height:0px;font-size:0;}
  6. * html dd{zoom:1}
  7. *+ html dd{zoom:1}
  8. .modul_corner .t_l{background: url(/templates/ваш шаблон/images/modul_corner.png) no-repeat}
  9. .modul_corner .t_r{background: url(/templates/ваш шаблон/images/modul_corner.png) no-repeat -20px 0}
  10. .modul_corner .b_l{background: url(/templates/ваш шаблон/images/modul_corner.png) no-repeat 0 -20px}
  11. .modul_corner .b_r{background: url(/templates/ваш шаблон/images/modul_corner.png) no-repeat -20px -20px}
  12. .modul_corner .t_l, .modul_corner .t_r, .modul_corner .b_l,.modul_corner .b_r{position:absolute;display:block;width:20px;height:20px}
  13. .modul_corner .t_l{top:-2px;left:-2px}
  14. .modul_corner .t_r{top:-2px;right:-2px}
  15. .modul_corner .b_l{bottom:-2px;left:-2px}
  16. .modul_corner .b_r{bottom:-2px;right:-2px}
  17.  
Ксс кода не пугайтесь, там всё элементарно, просто много практически однотипных записей)
Ниже прикреплена сама картинка с помощью которой я закругляю углы
Прикрепленные файлы:
modul_corner_63490.png | 0.92 Кб | Скачали: 536
Редактировалось: 3 раз (Последний: 12 ноября 2009 в 00:30)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.