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

Как сделать?

#1 9 ноября 2009 в 10:11
Подскажите пожалуйста как сделать чтобы все центральные модули были с рамочкой с закруглёнными краями, и их заголовки тоже ?
Оформить отдельно каждый модуль можно в папке modules, а как сделать чтобы так оформлялись все цетральные модули?
Пробую делать в templates.php, делаю таблицу вокруг кода <?php cmsModule("top"); ?>, но ничего не получается
#2 9 ноября 2009 в 10:27
А кто мешает сделать шаблон для модуля? :)
В папке \templates\_default_\modules взять за основу module_simple на основе его создать например module_centre, а в админке в настройках модуля выбрать этот шаблон.
#3 9 ноября 2009 в 11:15
Спасибо большое!
#4 9 ноября 2009 в 11:23
nataly, если получится, нам тоже подскажи, ок?
#5 9 ноября 2009 в 12:39


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

lezginka.ru

Да получится! Можно таблицей сделать, можно в css, а можно c помощью jQuery www.ruseller.com/lessons.php?rub=32&id=130
#6 9 ноября 2009 в 14:27
мне кажется, мы сдорово сэкономим друг другу время, если вот такие решения, как в этой теме, будут описаны в документации. или нет?
#7 9 ноября 2009 в 14:49


мне кажется, мы сдорово сэкономим друг другу время, если вот такие решения, как в этой теме, будут описаны в документации. или нет?

feba7
наверное нет… потому что если ДА, то видимо придётся кинуть сразу учебник по HTML+CSS.
#8 9 ноября 2009 в 15:23

видимо придётся кинуть сразу учебник по HTML+CSS

feba7, тоже считаю — не стоит.
#9 9 ноября 2009 в 18:39
lezginka.ru получилось сделать, рассказываю как:

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

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

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


что касается того как это сделать в html, то вот ссылки на уроки по круглым рамкам www.tultip.net/verstka/137-zakruglenie-uglov-dlja-sajjta.html
#10 9 ноября 2009 в 19:46
Это Вы, милые мужики, насчет учебников очень сильно загнули. С таким подходом мне, чтобы шаровую опору на папиных жигулях поменять — надо ее сперва на токарном станке выточить?)))))Я делаю гораздо проще — иду в магазин и беру готовую!!!

Ну вот, какая nataly умница. Все растолковала без всяких учебников. Nataly, ты пожалуйста, это свое решение в вики опиши, а то через три дня кто-нибудь опять эту тему откроет — так как эту и не найдешь уже ведь))))
Спасибо тебе!
#11 9 ноября 2009 в 21:35
Рада помочь, я например без помощи форума ни за что бы не разобралась как сделать сайт.
#12 9 ноября 2009 в 23:57


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

nataly

nataly, спасибо.
если не сложно пример, сама выложи, чтобы скопировать и сразу получть круглые углы(если уже есть готовое решение).
нам мало что разжевали, еще и проголотить нужно :)
но это не обязательно :)
#13 10 ноября 2009 в 16:25
У меня получился вот такой код, но вообще я думаю можно сделать по урокам и лучше чем у меня получилось:

module2.tpl

  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:



  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 3 Кб
#14 12 ноября 2009 в 03:27
Видишь ли, Черчилль, признаком хорошего тона считается выводить настройки во бакэнд. Почему? Потому что твоим модулем будут пользоваться те, кто попросту не обладает твоей квалификацией, и не сможет лазить по твоему коду в поисках настроек. В любом случае, ты сильно сэкономишь себе время, если вместо ответов на идиотские вопросы твоего пользователя будешь коротко отвечать:"все настройки — в админке!" )))
#15 8 марта 2010 в 21:16
народ, кто это сделал.
пропишите подробно какой кусок кода, в какой файл/папка и куда вставить, по пунктам.
чайникам сложно схватывать на лету. буду весьма признателен.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.