Moushe.ru

Блог обо всём

CMS Lego SP 6.1 делаем шаблон mynew (1 часть)



Сегодня мы с вами начнём создавать шаблон для CMS Lego SP 6.1.

lego SP61 bootstrap

Список задач на сегодня:

1. Создадим копию стандартного шаблона и переименуем её

2. Скачаем bootstrap и подключим его к шаблону

3. Переделаем меню навигации

4. Подкорректируем css

5. Переделаем и переместим поиск

Приступим:

1.1. Откроем папку ../css, копируем папку css_default-full на рабочий стол,  переименовываем её в css_mynew и закидываем обратно в папку css.

1.2. Открываем админку переходим в настройки > оформление > шаблон > mynew > сохранить.

2.1. Открываем сайт http://twitter.github.com/bootstrap/ и нажимаем кнопку download bootstrap, скачиваем архив и распаковываем из него папку bootstrap, закидываем её со всем содержимым в папку ../css/css_mynew.

2.2. Откроем файл ../css/css_mynew/theme/head.tpl и после этой строки (13):

<link rel="stylesheet" type="text/css" href="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/stylesheet/stylesheet.css" />

вставим эту:

<link href="css/css_mynew/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

а после этой (23):

<link rel="stylesheet" type="text/css" href="./css/fancybox.css" media="screen" />

вставим эти:

<script src="http://code.jquery.com/jquery.js"></script>
<script src="css/css_mynew/bootstrap/js/bootstrap.min.js"></script>

удалим эту строку (12):

<link rel="stylesheet" type="text/css" href="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/stylesheet/reset.css" />

2.3. Обновляем витрину вашего магазина и если всё было прописано правильно то вы увидите что шаблон немного “поехал”.

3. Открываем файл ../css/css_mynew/theme/index.tpl и вместо этих строк (10-39):

{* -- меню -- *}
<div class="black">
<ul id="mega-menu" class="mega-menu">
<li><a href="./">{$smarty.const.LINK_TO_HOMEPAGE}</a></li>
<li>
<a>{$smarty.const.STRING_PRICELIST}</a>
<ul>
<li><a href="./{if $smarty.const.CONF_CHPU}pricelist/{else}index.php?show_price=yes{/if}">{$smarty.const.STRING_PRICELIST}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}price.xls{else}core/core_xls.php{/if}">{$smarty.const.DOWNLOAD_PRICE}</a></li>
</ul>
</li>
<li><a>{$smarty.const.ADMIN_INFORMATION}</a>
<ul>
<li><a href="./{if $smarty.const.CONF_CHPU}about/{else}index.php?aux_page=aux1{/if}">{$smarty.const.ADMIN_ABOUT_PAGE}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}grafik/{else}index.php?aux_page=aux1{/if}">{$smarty.const.ADMIN_TIMES}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}adress/{else}index.php?aux_page=aux1{/if}">{$smarty.const.STRING_ADRESS_INFORMATION}</a></li>
</ul>
</li>
<li><a>{$smarty.const.ADMIN_MORE}</a>
<ul>
<li><a href="./search_expanded/">{$smarty.const.ADVANCED_SEARCH_LINK}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}{$smarty.const.REDIRECT_NEWS}/{else}index.php?news&news={/if}">{$smarty.const.ADMIN_NEWS}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}{$smarty.const.REDIRECT_PAGES}/{else}index.php?pages&pages={/if}">{$smarty.const.ADMIN_PAGES}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}sitemap/{else}index.php?sitemap{/if}">{$smarty.const.ADMIN_SITE_MAP}</a></li>
</ul>
</li>
<li><a href="./{if $smarty.const.CONF_CHPU}contact/{else}index.php?contact{/if}">{$smarty.const.STRING_CONTACT_INFORMATION}</a></li>
</ul>
</div>
{* -- меню -- *}

вставим эти:

{* -- Меню навигации -- *}
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li><a href="./">{$smarty.const.LINK_TO_HOMEPAGE}</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">{$smarty.const.STRING_PRICELIST}<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="./{if $smarty.const.CONF_CHPU}pricelist/{else}index.php?show_price=yes{/if}">{$smarty.const.STRING_PRICELIST}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}price.xls{else}core/core_xls.php{/if}">{$smarty.const.DOWNLOAD_PRICE}</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">{$smarty.const.ADMIN_INFORMATION}<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="./{if $smarty.const.CONF_CHPU}about/{else}index.php?aux_page=aux1{/if}">{$smarty.const.ADMIN_ABOUT_PAGE}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}grafik/{else}index.php?aux_page=aux1{/if}">{$smarty.const.ADMIN_TIMES}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}adress/{else}index.php?aux_page=aux1{/if}">{$smarty.const.STRING_ADRESS_INFORMATION}</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">{$smarty.const.ADMIN_MORE}<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="./search_expanded/">{$smarty.const.ADVANCED_SEARCH_LINK}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}{$smarty.const.REDIRECT_NEWS}/{else}index.php?news&news={/if}">{$smarty.const.ADMIN_NEWS}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}{$smarty.const.REDIRECT_PAGES}/{else}index.php?pages&pages={/if}">{$smarty.const.ADMIN_PAGES}</a></li>
<li><a href="./{if $smarty.const.CONF_CHPU}sitemap/{else}index.php?sitemap{/if}">{$smarty.const.ADMIN_SITE_MAP}</a></li>
</ul>
</li>
<li><a href="./{if $smarty.const.CONF_CHPU}contact/{else}index.php?contact{/if}">{$smarty.const.STRING_CONTACT_INFORMATION}</a></li>
</ul>
</div>
</div>
{* -- Конец меню навигации-- *}

4. Откроем папку ../css/css_mynew/stylesheet и удалим из неё файл reset.css, после открываем файл stylesheet.css и удаляем из него эти строки:

10:

body {margin:0px; padding:0px; font:12px/17px Arial, Helvetica, sans-serif; background:#fff url('../images/body-top-bg.png') top left repeat-x ; color:#343434;}

12-13:

a {text-decoration:underline; cursor:pointer; color:#343434; }
a:hover {text-decoration:none;}

16-28:

img {border:0;}
p {margin:0 0 8px 0;}
h1, h2, h3, h4 {margin:0 0 10px 0; font-weight:normal; display:block;}
h1 {font-size:22px; line-height:22px;}
h2 {font-size:20px; line-height:20px;}
h3 {font-size:18px; font-weight:bold; line-height:23px;}
h4 {font-size:14px; margin-bottom:10px; font-weight:bold;}
ul {margin:5px 0px 15px; padding-left: 10px;}
ul li {margin: 0px; list-style: none; background: url('../images/bullet_2.png') 0 5px no-repeat; padding:0 0 3px 12px;}
ol {margin: 5px 0px 15px; padding-left: 30px; list-style-type:decimal;}
ol li {margin: 0px; padding-bottom:3px;}
small {font-size:10px;}
hr {color:#DDDDDD; background-color: #DDDDDD; height: 1px; border-width: 0px;}

добавим в любое место эту строку:

li a {  cursor: pointer;}

5. Вновь откроем файл ../css/css_mynew/theme/index.tpl и удалим эти строки (58-61):

<form method="get" action="/" id="search" class="png">
<input type="text" value="{$smarty.const.STRING_SEARCH}" onblur="if(this.value=='') this.value='{$smarty.const.STRING_SEARCH}';" onfocus="if(this.value=='{$smarty.const.STRING_SEARCH}') this.value='';" name="searchstring" class="search" id="mod_search_searchword" />
<input type="submit" value="" class="go" />
</form>

а после этих строк (35-37):

</li>
<li><a href="./{if $smarty.const.CONF_CHPU}contact/{else}index.php?contact{/if}">{$smarty.const.STRING_CONTACT_INFORMATION}</a></li>
</ul>

вставим эти:

<form class="navbar-search pull-right">
<input type="text" value="{$smarty.const.STRING_SEARCH}" onblur="if(this.value=='') this.value='{$smarty.const.STRING_SEARCH}';" onfocus="if(this.value=='{$smarty.const.STRING_SEARCH}') this.value='';" name="searchstring" class="search-query" placeholder="поиск...">
</form>

На сегодня всё, следите за новостями. Улыбка

5 Комментариев

  1. Благодарю за урок.
    Интересно Ваше мнение, какой движок удобней в плане верстки (не стандартного)шаблона «opencart или lego sp»

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      13.03.2013 at 20:56

      Мне удобнее работать с ОпенКартом у него продуманная структура, простой код и не используется смарти 🙂

  2. Михаил

    14.03.2013 at 11:31

    Прошу прощения за вопрос не по теме.
    Вопрос по старой теме «OpenCart изменяем кнопки в меню навигации» от 02.11.2011.

    http://moushe.ru/nashi-stati/web-dizajn-2/opencart-menyaem-menyu-navigacii/

    точнее: в самом начале статьи — картинка «До:»

    Вопрос: как сделать такое расположение меню и модулей из стандартного opencart v1.5.4.1 ?

    Заранее благодарен.
    С уважением, Михаил.

  3. подключать не надо сломаете основные фичи движка
    jquery уже подключен в cms legosp из коробки

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика