Пара вопросов по верстке OCSHOP.CMS 2.x

[Nameless]

 Не силен в верстке и возникло несколько вопросов:

1. Как сделать вернею часть хедера и футер по ширине как основную часть находящиюся между ними и как сделать отдельный фон для полуившихся таблиц слева и справа как на картинке:

2. Как правильно отцентровать логотип в шапке? в хедере на место поиска вставлю логотип, но он получается со смещением

3. Как добавить новые элементы главного меню с выпадающим списком

 

за ранее благодарен за подсказки

[Nameless]

с меню решил вопрос самостоятельно если кому интересно меню такого плана:

 

то в /catalog/view/theme/default/template/common/header.tpl

 

находим:

<nav id="menu" class="navbar">

    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>

      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>

    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">

      <ul class="nav navbar-nav">

        <?php foreach ($categories as $category) { ?>

        <?php if ($category['children']) { ?>

        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>

          <div class="dropdown-menu">

            <div class="dropdown-inner">

              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>

              <ul class="list-unstyled">

                <?php foreach ($children as $child) { ?>

                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>

                <?php } ?>

              </ul>

              <?php } ?>

            </div>

            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>

        </li>

        <?php } else { ?>

        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>

        <?php } ?>

        <?php } ?>

      </ul>

    </div>

  </nav>

и меняем на:

<nav id="menu" class="navbar">

    <div class="navbar-header"><span id="category" class="visible-xs">Меню</span>

      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>

    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> Категории</a>

          <div class="dropdown-menu">

            <div class="dropdown-inner">


              <ul class="list-unstyled">

                <li><a href="">Категория 01</a></li>

                <li><a href="">Категория 02</a></li>

				<li><a href="">Категория 03</a></li>

				<li><a href="">Категория 04</a></li>

				<li><a href="">Категория 05</a></li>

              </ul>


            </div>

            <a href="" class="see-all">Архив</a></div>

        </li>


        <li><a href="0"><i class="fa fa-users"></i> О компании</a></li>


       </ul>


	   <ul class="nav navbar-nav">

        <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-book"></i> Наш Блог</a>

          <div class="dropdown-menu">

            <div class="dropdown-inner">


              <ul class="list-unstyled">

                <li><a href="">Записи 01</a></li>

                <li><a href="">Записи 02</a></li>

				<li><a href="">Записи 03</a></li>

				<li><a href="">Записи 04</a></li>

				<li><a href="">Записи 05</a></li>

              </ul>


            </div>

            <a href="" class="see-all">Все статьи</a></div>

        </li>


        <li><a href="0"><i class="fa fa-comment"></i> Отзывы</a></li>

		<li><a href="0"><i class="fa fa-truck"></i> Доставка</a></li>

		<li><a href="0"><i class="fa fa-rub"></i> Оплата</a></li>

		<li><a href="0"><i class="fa fa-gift"></i> Акции</a></li>

		<li><a href="0"><i class="fa fa-briefcase"></i> Партнерам</a></li>

		<li><a href="0"><i class="fa fa-map-marker"></i> Контакты</a></li>

       </ul>


    </div>

  </nav>

[admin]

1. найдите в header.tpl вот этот блок <nav id="top"> и оберните его вот в этот <div class="container"> и возможно еще в <div class="row">

2. фон добавлете сюда такие стили catalog/view/theme/default/stylesheet/stylesheet.css

body {

  background: red none repeat scroll 0 0;

}

.container {

  background: #fff none repeat scroll 0 0;

}

в теории получится как надо

[Nameless]

1. найдите в header.tpl вот этот блок <nav id="top"> и оберните его вот в этот <div class="container"> и возможно еще в <div class="row">

2. фон добавлете сюда такие стили catalog/view/theme/default/stylesheet/stylesheet.css

body {

background: red none repeat scroll 0 0;

}

.container {

background: #fff none repeat scroll 0 0;

}

в теории получится как надо

благодарствую, пришлось повозиться, но в целом сработало как надо! в футере пришлось доабавить и <div class="row">

[Nameless]

Ежели кому лого по центру надобно то вот решение:

 

в header.tpl ищем <div class="col-sm-4"> тут как раз лого по умолчанию располагается и копируем от туда

<div id="logo">

          <?php if ($logo) { ?>

          <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>

          <?php } else { ?>

          <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>

          <?php } ?>

        </div>

далее это все вставляем ниже в колонку <div class="col-sm-5"> тут находится строка поиска <?php echo $search; ?>которую я вырезал и вставил перед корзиной те перед <?php echo $cart; ?> в колонке <div class="col-sm-3">

 

теперь центрируем лого в колонке для этого в файле stylesheet.css ищем #logo и все внутри скобок меняем на:

    width: 157px; (ширина вашего лого)

    margin: auto;

и на последок выравнивание ячейки col-sm-3, col-sm-4, col-sm-5 в файлах bootstrap.css и bootstrap.min.css для чего меняем пропорция в %, те все три колонки дложны быть равны 100% я сделал себе так:

.col-sm-5 {

    width: 40%;

  }

  .col-sm-4 {

    width: 30%;

  }

  .col-sm-3 {

    width: 30;

  }

[admin]

bootstrap.css и bootstrap.min.css

лучше не трогать потому как в другом месте вылезет

1. или переопределяем их значение в stylesheet.css и с привязкой к конкретному месту к примеру .header .col-sm-5

2. что более правильно меняем класс к примеру ваш .col-sm-5 на необходимый которому уже описана ширина 40% либо же создаем такой если его нет

 

а так как вы сделали если где то в шаблоне встретится .col-sm-5 ему там тоже назначится 40% и будет ой

[Nameless]

bootstrap.css и bootstrap.min.css

лучше не трогать потому как в другом месте вылезет

1. или переопределяем их значение в stylesheet.css и с привязкой к конкретному месту к примеру .header .col-sm-5

2. что более правильно меняем класс к примеру ваш .col-sm-5 на необходимый которому уже описана ширина 40% либо же создаем такой если его нет

 

а так как вы сделали если где то в шаблоне встретится .col-sm-5 ему там тоже назначится 40% и будет ой

истина! вылез косяк в футере( вариант добавить в stylesheet.css

.header. col-sm-5 {

width:40%;

}

.header. col-sm-4 {

width:30%;

}

.header. col-sm-3 {

width:30%;

}

или назанчить новый класс я сделал так в header.tpl переименовал col-sm-3, col-sm-4,col-sm-5 в col-sm-3h, col-sm-4h,col-sm-5h

и после добавить стиль

.col-sm-5h {

width:40%;

}

.col-sm-4h {

width:30%;

}

.col-sm-3h {

width:30%;

}

не прокатил

[admin]

точнее так надо было

header .col-sm-5

[Nameless]

 

точнее так надо было

header .col-sm-5

как оказалось не все так просто, в обычном режиме отображется четко, а в мобильном поплыло вот так:

[admin]

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

[Nameless]

В общем нашел одно только решение: добавть  в stylesheet.css следующие строки

@media (min-width: 768px) {

.col-sm-5 {

    width: 50%;

}


.col-sm-4 {

    width: 25%;

}

 }

и по итогу среднея часть хедера будет 50% и две боковинки по 25%