[Помогите] как разделить шапку и контент на главной странице

Тема в разделе "OpenCart", создана пользователем sovvase, 6 апр 2016.

  1. sovvase

    sovvase

    Регистрация:
    28 окт 2012
    Сообщения:
    66
    Симпатии:
    0
    Добрый день!
    1. Как увеличить расстояние между шапкой и контентом, только на главной странице. ОпенКарт 2.1.0.1, шаблон XDS Coloring Theme 1.3.7
    2. Не показывает картинку для главной страницы. В чем может быть проблема?
    arg-group.tk
     
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    1. .common-home header{margin-bottom: 50px;}
    2. не правильно залита картинка.
     
  3. sovvase

    sovvase

    Регистрация:
    28 окт 2012
    Сообщения:
    66
    Симпатии:
    0
    1. получается совсем не так надо. меню, поиск и корзина остаются на месте, все остальное спускается вниз. А надо чтобы все вместе.
    надо так:
    [​IMG]

    а получается:
    [​IMG]

    картинка лежит по ссылки... надо как-то по особому заливать? и как?
     
  4. cherkas

    cherkas

    Регистрация:
    25 фев 2013
    Сообщения:
    336
    Симпатии:
    44
    ну у Вас и накрученый шаблон..

    У Вас 2 div(а) имеют одинаковые классы, задайте нужному классу свой id и пропишите к нему стили.

    если не понятно объяснил пишите, попробую по другому объяснить

    [​IMG]




    второй вопрос не понятен


    где должна быть картинка и какая?
     
  5. GrblFF

    GrblFF

    Регистрация:
    10 мар 2014
    Сообщения:
    56
    Симпатии:
    1
    Лучше может быть вообще в одном из контейнеров заменить class на id. В дальнейшем потом проще работать будет. Картинка я так понимаю это фоновое изображение? Нужно залить на сайт картинку и в stylesheet.css через background:url присвоить необходимое изображение нужному элементу.
     
  6. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Не слушайте ни кого, там все отлично прописано и по семантике один из лучших шаблонов!!!

    Не нужно менять на id, полетит все к чертям.

    Для обращения к элементу пишем .common-home header > #top + .container
    Далее уже margin-bottom:50px или сколько нужно или делаем пропорциональный отступ сверху и снизу

    .common-home header > #top + .container {
    padding: 20px 10px;
    }

    Для картинки зайти в Система-Дизайн-Баннеры и там сменить баннер.
     
    sovvase нравится это.
  7. sovvase

    sovvase

    Регистрация:
    28 окт 2012
    Сообщения:
    66
    Симпатии:
    0
    Круто!!! Огромное спасибо!!! :Yes:

    Тех кто откликнулся тоже благодарю за советы и помощь!
    --- Добавлено, 7 апр 2016 ---
    Насчет картинки так и не понял! я для фона, на главной странице, задал картинку которую загрузил в папку /image и прописал в home.tpl путь. но как видно картинка не показывается...
     
  8. GrblFF

    GrblFF

    Регистрация:
    10 мар 2014
    Сообщения:
    56
    Симпатии:
    1
    Стиль должен выглядеть как - background: url('../image/image/les2.png')
     
    sovvase нравится это.
  9. sovvase

    sovvase

    Регистрация:
    28 окт 2012
    Сообщения:
    66
    Симпатии:
    0
    Да нет, оказалось ни в этом дело )) файл залить как les2.PNG, а прописан как les2.png, поэтому и не показывалась!
    Всем спасибо!!!
    --- Добавлено, 7 апр 2016 ---
    Может быть еще кому пригодиться. Вот как выглядит код в /catalog/view/theme/.../template/common/home.tpl:
    Код:
    <?php if (!isset($this->request->get['route']) || (isset($this->request->get['route']) && $this->request->get['route'] == 'common/home')) { ?>
        <style>
        body{
            background: #D5C59C url(http://arg-group.tk/image/catalog/start-fon.png);
            background-repeat: no-repeat;
            background-position: 0px 50px;
            background-size: 100%;
            background-attachment: scroll;
            }
            .common-home header > #top + .container {
                padding: 20px 10px;
                margin-bottom: 200px:
            }
        </style>
        <?php } ?>
    не надо менять stylesheet.css и применяется только на главную страницу.
    --- Добавлено, 7 апр 2016 ---
    alex_storm, Если не сложно помогите пожалуйста еще немного подправить! :Blush:
    Все конечно получилось отлично, но при просмотре через планшет или смартфон, то что спустил, очень сильно съезжает вниз. Как сделать чтобы этот блок держался относительно картинки?
     
    Последнее редактирование: 7 апр 2016