Bootstrap шаблон

Решение проблем с внедрением bootstrap

#1 7 ноября 2012 в 02:14
Здравствуйте, уважаемые форумчане!
Решил познать азы шаблоностроения, но вот вопросов, больше чем решений пока :(
Знаний моих очень маловато, так что надеюсь, эта тема будет полезна не только мне, но и другим новичкам.
Итак, к делу...
Значит, дефолтный шаблон скопировал, переименовал с заменой дефолтного названия на новое по всем файлам. Далее скачал бутстрап с сайта и все скрипты. Пытаюсь прикрутить его к шаблону, а потом уже ваять позиции и все такое прочее.
Файл template пока такой
  1. <?php
  2. /******************************************************************************/
  3. // //
  4. // InstantCMS v1.10 //
  5. // http://instantcms.ru/ //
  6. // Шаблон от AndroS //
  7. // //
  8. /******************************************************************************/
  9.  
  10. // Предотвращаем прямой доступ к файлу
  11. if(!defined('VALID_CMS')) die('Forbidden');
  12. // Подключаем классы
  13. $inUser = cmsUser::getInstance();
  14. $inPage = cmsPage::getInstance();
  15.  
  16. // Здесь же определяем переменную для системных сообщений
  17.  
  18.  
  19. $mod_count['top'] = $inPage->countModules('top');
  20. $mod_count['right'] = $inPage->countModules('right');
  21.  
  22. ?>
  23. <!DOCTYPE html>
  24.  
  25. <html lang="ru">
  26.  
  27. <head>
  28. <meta charset="utf-8">
  29. <!-- Подключаем jQuery и <meta> с описанием сайта и т.д. -->
  30. <?php $inPage->printHead(); ?>
  31. <link href="/css/bootstrap.css" rel="stylesheet">
  32. <style>
  33. body {
  34. padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  35. }
  36. </style>
  37. <link href="/css/bootstrap-responsive.css" rel="stylesheet">
  38. <!--[if lt IE 9]-->
  39. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  40.  
  41.  
  42. <!-- Подключаем скрипты для админа -->
  43. <?php if($inUser->is_admin){ ?>
  44. <script src="/admin/js/modconfig.js" type="text/javascript"></script>
  45. <script src="/templates/bimall/js/nyromodal.js" type="text/javascript"></script>
  46. <link href="/templates/bimall/css/modconfig.css" rel="stylesheet" type="text/css" />
  47. <link href="/templates/bimall/css/nyromodal.css" rel="stylesheet" type="text/css" />
  48. <?php } ?>
  49. </head>
  50.  
  51. <body>
  52.  
  53. <?php if (cmsConfig::getConfig('siteoff') && $inUser->is_admin) { ?>
  54. <div style="margin:4px; padding:5px; border:solid 1px red; background:#FFF; position: fixed;opacity: 0.8; z-index:999"><strong style="color:red">Сайт отключен.</strong> Только администраторы видят его содержимое.</div>
  55. <?php } ?>
  56.  
  57. <div id="topmenu">
  58. <?php $inPage->printModules('topmenu'); ?>
  59. </div>
  60.  
  61. <div id="usermenu">
  62. <?php if (!$inUser->id){ ?>
  63. <span class="register"><a href="/registration">Регистрация</a></span>
  64. <span class="login"><a href="/login">Вход</a></span>
  65.  
  66. <?php } else { ?>
  67. <?php $inPage->printModules('usermenu'); ?>
  68. <?php } ?>
  69. </div>
  70.  
  71. <div class="navbar navbar-fixed-top">
  72. <div class="navbar-inner">
  73. <div class="container">
  74. <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  75. <span class="icon-bar"></span>
  76. <span class="icon-bar"></span>
  77. <span class="icon-bar"></span>
  78. </a>
  79. <a class="brand" href="#">Project name</a>
  80. </div>
  81. </div>
  82. </div>
  83.  
  84. <div class="container">
  85.  
  86. <h1>Bootstrap starter template</h1>
  87. <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
  88.  
  89. </div> <!-- /container -->
  90.  
  91.  
  92. <!-- Подключаем скрипты бутстрап-->
  93. <script src="/templates/bimall/js/bootstrap.js"></script>
  94. <script src="/templates/bimall/js/bootstrap.min.js"></script>
  95. <script src="/templates/bimall/js/bootstrap-transition.js"></script>
  96. <script src="/templates/bimall/js/bootstrap-alert.js"></script>
  97. <script src="/templates/bimall/js/bootstrap-modal.js"></script>
  98. <script src="/templates/bimall/js/bootstrap-dropdown.js"></script>
  99. <script src="/templates/bimall/js/bootstrap-scrollspy.js"></script>
  100. <script src="/templates/bimall/js/bootstrap-tab.js"></script>
  101. <script src="/templates/bimall/js/bootstrap-tooltip.js"></script>
  102. <script src="/templates/bimall/js/bootstrap-popover.js"></script>
  103. <script src="/templates/bimall/js/bootstrap-button.js"></script>
  104. <script src="/templates/bimall/js/bootstrap-collapse.js"></script>
  105. <script src="/templates/bimall/js/bootstrap-carousel.js"></script>
  106. <script src="/templates/bimall/js/bootstrap-typeahead.js"></script>
  107.  
  108. </body>
  109. </html>
  110.  
Уважаемые знатоки, подскажите для начала, может, я какую-то ошибку допустил в прицеплении js и в оформлении шаблона в целом? На структуру прошу внимания не обращать, ибо пока проверяю работоспособность js. Почему-то изменения не применяются, кеш чистил, в том числе и системную папку cache. Модуль меню пользователя отображается тупо в таком виде вместо выпадающей кнопки
ИллюстрацияИллюстрация
А вот код моего www\templates\bimall\modules\mod_usermenu.tpl
  1. <div class="mod_user_menu">
  2.  
  3. <div class="btn-group">
  4. <button class="btn"><a href="{profile_url login=$login}">{$nickname}</a></button>
  5. <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  6. <ul class="dropdown-menu">
  7.  
  8.  
  9.  
  10. {if $is_billing}
  11. <li><span>
  12. <a href="{profile_url login=$login}#upr_p_balance" title="Баланс">{if $balance}{$balance}{else}0{/if}</a>
  13. </li>
  14. {/if}
  15.  
  16. {if $users_cfg.sw_msg}
  17. <li>
  18. {if $newmsg.total}
  19. <a class="has_new" href="/users/{$id}/messages{if !$newmsg.messages}-notices{/if}.html" title="{$LANG.NEW_MESSAGES}: {$newmsg.messages}, {$LANG.NEW_NOTICES}: {$newmsg.notices}">{$LANG.USERMENU_MESS} ({$newmsg.total})</a>
  20. {else}
  21. <a href="/users/{$id}/messages.html">{$LANG.USERMENU_MESS}</a>
  22. {/if}
  23. </li>
  24. {/if}
  25.  
  26. {if $users_cfg.sw_blogs}
  27. <li>
  28. <a href="/blogs/my_blog.html">{$LANG.USERMENU_MY_BLOG}</a>
  29. <li>
  30. {/if}
  31.  
  32. {if $users_cfg.sw_photo}
  33. <li>
  34. <a href="/users/{$id}/photoalbum.html">{$LANG.USERMENU_PHOTOS}</a>
  35. </li>
  36. {/if}
  37.  
  38. {if $is_can_add && !$is_admin}
  39. <li>
  40. <a href="/content/my.html">{$LANG.USERMENU_ARTICLES}</a>
  41. </li>
  42.  
  43. <li>
  44. <a href="/content/add.html">{$LANG.USERMENU_ADD_ARTICLE}</a>
  45. </li>
  46. {/if}
  47.  
  48. {if $is_admin}
  49. <li>
  50. <a href="/admin" target="_blank">{$LANG.USERMENU_ADMININTER}</a>
  51. </li>
  52. {/if}
  53.  
  54. <li class="divider"></li>
  55. <li>
  56. <a href="/logout">{$LANG.USERMENU_EXIT}</a>
  57. </li></ul>
  58.  
  59. </div>
  60. </div>
  61.  
#2 7 ноября 2012 в 07:05
Ну где же наши знатоки, спят еще? :)
#3 7 ноября 2012 в 07:28
нужно проверить правильность указания и размещения файлов стилей и скриптов, возможно где то ошибка, лучше сделать тестовую площадку чтоб можно было смотреть "в живую"
вот это:
  1. <link href="/css/bootstrap.css" rel="stylesheet">
у меня вызывает сомнения — стили точно подгружаются?

и это
  1. </style> <link href="/css/bootstrap-responsive.css" rel="stylesheet">
расположение правильное?
#4 7 ноября 2012 в 09:42
Попробуй прописать полный путь до bootstrap-responsive.css вот так
  1. <link href="/templates/bimall/css/bootstrap-responsive.css" rel="stylesheet">
А в mod_usermenu.tpl прописать только ту JS которая будет отвечать за меню
  1. {literal}<script src="/templates/bimall/js/Скрипт.js" type="text/javascript"></script>{/literal}
#5 7 ноября 2012 в 10:37
У вас путь к файлу стилей прописан от корня сайта а не от папки с шаблоном — это раз, и во второых я сомневаюсь, судя по вашему коду, что вы все фишки bootstrap использовать будете, зачем подгружать абсолютно все скрипты.
#6 7 ноября 2012 в 12:21

У вас путь к файлу стилей прописан от корня сайта а не от папки с шаблоном

darkheart
Так и должно быть, Юрич верно подсказал.

я сомневаюсь, судя по вашему коду, что вы все фишки bootstrap использовать будете

darkheart
Потом удалю неиспользуемые. Сейчас важно разобраться, что к чему.
Теперь вот вопрос: нужно ли какие-то правки в js делать? Кнопка появилась, только вот нажатия на нее не выполняют никаких действий
#7 7 ноября 2012 в 15:34
это надо основную js обновлять до 1,7 минимум. а по умолчанию в ICMS 1.5.2
#8 7 ноября 2012 в 15:57
секция head

  1.  
  2. <head>
  3. <!-- HEAD !-->
  4. <?php $inPage->printHead(); ?>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <?php if($inUser->is_admin){ ?>
  7. <script src="/admin/js/modconfig.js" type="text/javascript"></script>
  8. <script src="/templates/bootstrap/js/nyromodal.js" type="text/javascript"></script>
  9. <link href="/templates/bootstrap/css/modconfig.css" rel="stylesheet" type="text/css" />
  10. <link href="/templates/bootstrap/css/nyromodal.css" rel="stylesheet" type="text/css" />
  11. <?php } ?>
  12. <script src="/templates/bootstrap/js/bootstrap.js"></script>
  13. <link href="/templates/bootstrap/css/bootstrap.css" rel="stylesheet">
  14. <link href="/templates/bootstrap/css/styles.css" rel="stylesheet">
  15. <link href="/templates/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
  16.  
  17.  
  18. <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  19. <!--[if lt IE 9]>
  20. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  21. <![endif]-->
  22.  
  23. </head><!-- END HEAD -->
  24.  
  25.  
где bootstrap = имя шаблона

юзер меню


  1.  
  2. <ul class="nav pull-right">
  3. <li><a href="{profile_url login=$login}">{$nickname}</a></li>
  4. {if $is_billing}<li><a href="{profile_url login=$login}#upr_p_balance" title="Баланс">{if $balance}{$balance}{else}0{/if}</a></li>{/if}
  5. {if $users_cfg.sw_msg}
  6. {if $newmsg.total}
  7. <li><a class="has_new" href="/users/{$id}/messages{if !$newmsg.messages}-notices{/if}.html" title="{$LANG.NEW_MESSAGES}: {$newmsg.messages}, {$LANG.NEW_NOTICES}: {$newmsg.notices}">{$LANG.USERMENU_MESS} ({$newmsg.total})</a></li>
  8. {else}
  9. <li><a href="/users/{$id}/messages.html">{$LANG.USERMENU_MESS}</a></li>
  10. {/if}
  11. {/if}
  12. {if $users_cfg.sw_blogs}<li><a href="/blogs/my_blog.html">{$LANG.USERMENU_MY_BLOG}</a></li>{/if}
  13. {if $users_cfg.sw_photo}<li><a href="/users/{$id}/photoalbum.html">{$LANG.USERMENU_PHOTOS}</a></li>{/if}
  14. {if $is_can_add && !$is_admin}
  15. <li><a href="/content/my.html">{$LANG.USERMENU_ARTICLES}</a></li>
  16. <li><a href="/content/add.html">{$LANG.USERMENU_ADD_ARTICLE}</a></li>
  17. {/if}
  18. {if $is_admin}<li><a href="/admin" target="_blank">{$LANG.USERMENU_ADMININTER}</a></li>{/if}
  19. <li><a href="/logout">{$LANG.USERMENU_EXIT}</a></li>
  20.  
  21. <li class="dropdown">
  22. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  23. <ul class="dropdown-menu">
  24. <li><a href="#">Action</a></li>
  25. <li><a href="#">Another action</a></li>
  26. <li><a href="#">Something else here</a></li>
  27. <li class="divider"></li>
  28. <li><a href="#">Separated link</a></li>
  29. </ul>
  30. </li>
  31.  
  32. </ul>
  33.  
  34.  
  35.  
  36.  
  37.  
#9 7 ноября 2012 в 15:58

это надо основную js обновлять до 1,7 минимум. а по умолчанию в ICMS 1.5.2

RooKee

да! без этого работать не будет
но с обновленным js перестанут работать некоторые функции в админке
#10 7 ноября 2012 в 19:52
js тут вот какое дело ребята, система наша работает с версией библиотеки v1.5.2, замена ее на более новую версию влечет за собой появление глюков на сайте а без последней версии библиотеки Bootstrap работать не будет.
bootstrap.veliovgroup.com/javascript.php под блоками почитайте о чем вас предупреждают.
smileшаблон на bootstrap наверное только в части цсс получится а js наверное пока еще нет
#11 7 ноября 2012 в 19:53
Сам с этой проблемой столкнулся, нужно было было модальное окно на страницу добавить а оно вот как со мной ну и с вами
#12 8 ноября 2012 в 10:34
Понятно, будем обновлять тогда jquery
#13 8 ноября 2012 в 11:45

но с обновленным js перестанут работать некоторые функции в админке

mexanik

Если только в админке не будут работать, то можно в админке оставить старую версию, а на самом сайте обновить до 1.8.2 (последняя на текущий момент). Придется хакнуть page.class.php
#14 8 ноября 2012 в 11:46
да, я птался обновить до последней версии, но перестают работать комментарии и быстрая настройка модулей в пользовальской части интерфейса- не всплывают окна
#15 8 ноября 2012 в 12:43
У меня после обновления все работало, кроме некоторых вещей в админки.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.