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

Nameless · July 30, 2015

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

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

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

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

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

Nameless · July 31, 2015

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

то в /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 · August 2, 2015

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 · August 7, 2015

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 · August 7, 2015

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

в 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 · August 7, 2015

bootstrap.css и bootstrap.min.css

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

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

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

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

Nameless · August 7, 2015

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 · August 7, 2015

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



header .col-sm-5

Nameless · August 7, 2015

точнее так надо было
header .col-sm-5

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

admin · August 7, 2015

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

Nameless · August 15, 2015

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



@media (min-width: 768px) {

.col-sm-5 {

    width: 50%;

}


.col-sm-4 {

    width: 25%;

}

 }

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

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

Recommended Posts

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Ссылка на комментарий

Поделиться на других сайтах

Join the conversation

Сейчас на странице 0 пользователей