Автор Тема: Модуль homeslider отображается слева, а не по центру страницы  (Прочитано 1582 раз)

30 Июля 2013, 21:59:55
  • Новичок
  • *
  • Сообщений: 23
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Всем доброго вечеру.

PrestaShop 1.5.4.1.
Модуль homeslider отображается слева, а не по центру страницы. Сайт http://kroha3.ru/
Методом «научного тыка», вычислил что более корректно модуль отображается со стилем public_html/themes/PRS050105/css/modules/homeslider/bx_styles.css, но при всех вариациях и манипуляциях с bx_styles.css, модуль homeslider остаётся выровненным по левому краю.

Со слайдером стили поменяй. Убери все обвертки
position: absoluteСделай как в стандарной теме.
Или установи версию 1.5.4.1 там все нормально работает.
Что такое обвертка так и не понял, «Словарь Ушакова» не вразумил ;) , то ли css то ли padding.
position: absolute там и так стоит, position: relative - не помогает в bx_styles.css менял, крутил.
В стандартной теме public_html/themes/default/css/ - 20 файлов *.css с названиями модулей и index.php, bx_styles.css или homeslider.css - нет.
Т.е. не помогает или не правильно делаю.

.....
Откройте Feribug, выберите слайдер и сравните со своими стилями.
Открыл, много различий, может чего ещё подскажете:

Код Theme Toys Store Prestashop Theme - PRS050105
<div id="blockhomeslider">
<div class="slider_midbg">
<div class="anythingSlider anythingSlider-metallic activeSlider" style="width: 982px; height: 379px;">
<div class="anythingWindow">
<ul id="slider" class="anythingBase" style="width: 4910px; left: -982px;">
<li class="cloned panel" style="width: 982px; height: 379px;">
<a target="" href="#" disabled="disabled" style="width: 100%; height: 100%;">
<img title="" alt="" src="/PRS05/PRS050105/modules/blockhomeslider/slides/slide_02.jpg">
</a>
</li>
<li class="panel activePage" style="width: 982px; height: 379px;">
<a target="" href="#" style="width: 100%; height: 100%;">
<img title="" alt="" src="/PRS05/PRS050105/modules/blockhomeslider/slides/slide_00.jpg">
</a>
</li>
<li class="panel" style="width: 982px; height: 379px;">
<a target="" href="#" style="width: 100%; height: 100%;">
<img title="" alt="" src="/PRS05/PRS050105/modules/blockhomeslider/slides/slide_01.jpg">
</a>
</li>
<li class="panel" style="width: 982px; height: 379px;">
<a target="" href="#" style="width: 100%; height: 100%;">
<img title="" alt="" src="/PRS05/PRS050105/modules/blockhomeslider/slides/slide_02.jpg">
</a>
</li>
<li class="cloned panel" style="width: 982px; height: 379px;">
<a target="" href="#" disabled="disabled" style="width: 100%; height: 100%;">
<img title="" alt="" src="/PRS05/PRS050105/modules/blockhomeslider/slides/slide_00.jpg">
</a>
</li>
</ul>
</div>
<div class="anythingControls" style="display: block;">
</div>
</div>
</div>

Код с моего сайта
<ul id="homeslider" style="width: 999999px; position: relative; left: -2946px;">
<li style="width: 982px; float: left; list-style: none outside none;">
<a title="Доставка до дома!" href="http://kroha3.ru/content/1--">
<img width="982" height="379" title="Доставка до дома!" alt="sample-3" src="/modules//homeslider/images/e8b4772e3acd126337445ca8ab682fe1.jpg">
</a>
</li>
<li class="pager" style="width: 982px; float: left; list-style: none outside none;">
<a title="Гигиена для малыша" href="http://kroha3.ru/9-gigiena">
<img width="982" height="379" title="Гигиена для малыша" alt="slide-1" src="/modules//homeslider/images/3a48da8fba1009bd76a4b7320598d6b9.jpg">
</a>
</li>
<li class="pager" style="width: 982px; float: left; list-style: none outside none;">
<a title="Питание для малыша" href="http://kroha3.ru/3-pitanie">
<img width="982" height="379" title="Питание для малыша" alt="slide-2" src="/modules//homeslider/images/5195c3354bdbfa9d5f79464dbac8ef04.jpg">
</a>
</li>
<li class="pager" style="width: 982px; float: left; list-style: none outside none;">
<a title="Доставка до дома!" href="http://kroha3.ru/content/1--">
<img width="982" height="379" title="Доставка до дома!" alt="sample-3" src="/modules//homeslider/images/e8b4772e3acd126337445ca8ab682fe1.jpg">
</a>
</li>
<li style="width: 982px; float: left; list-style: none outside none;">
<a title="Гигиена для малыша" href="http://kroha3.ru/9-gigiena">
<img width="982" height="379" title="Гигиена для малыша" alt="slide-1" src="/modules//homeslider/images/3a48da8fba1009bd76a4b7320598d6b9.jpg">
</a>
</li>
</ul>
30 Июля 2013, 23:05:29
Ответ #1
  • Администратор
  • Ветеран
  • *****
  • Сообщений: 102473
  • Репутация: +34218/-0
    • Просмотр профиля
Цитировать
Открыл, много различий, может чего ещё подскажете:
Firebug помогает не только открыть и посмотреть код. А также дописать новые правила в стили и сразу увидеть результат.
Вам нужно  исправить стили для блока слайдера.
Я попробывал менять расположение
.slider_bottombg {
    left: 136px;
    overflow: hidden;
    position: absolute;
    top: 230px;
}
Вот что получилось, см. прикрепленные файлы.
Оставлось изменить размеры или увеличить место под слайдер.
31 Июля 2013, 00:10:37
Ответ #2
  • Новичок
  • *
  • Сообщений: 23
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Не канает.. По странице этот слайдер прыгает, куда надо - не пойму как поставить.
Даже в HTML не могу правильно изменения внести..
А их ещё и в css надо как-то буит внести.

Дошло куда вносить, только вот внести не могу. хоть сразу в global.php пихай..
31 Июля 2013, 09:58:41
Ответ #3
  • Новичок
  • *
  • Сообщений: 23
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Ну в общем сделал, причём перед этим полностью убил модуль, даже обработчик хука пришлось опять добавлять.

Только вот при изменении масштаба страницы - слайдер смещается влево и вправо, в зависимости от увеличения или уменьшения от 100%.
Это как-нить можно вылечить?

В других браузерах он аще криво отображается. Чё за гавно, стандартный модуль и не работает как надо!!!!

Как удалить место из-под него, чтоб как на других страницах было?
Т.е. чтоб при его удалении пустоты не было.
31 Июля 2013, 10:43:34
Ответ #4
  • Ветеран
  • *****
  • Сообщений: 33028
  • Репутация: +26761/-0
    • Просмотр профиля
Если модуль удаляешь, то и место под него удаляется.
Тебе нужно было только изменить позицию в global.css
.slider_bottombg {
    position: absolute;
    left: 136px; // вот это
    top: 230px; // вот это
}
высоту поменять блока, так как на низ слайдера накладывается другой блок
height:400px; // нужно как высота картинок в слайдере
31 Июля 2013, 11:15:45
Ответ #5
  • Новичок
  • *
  • Сообщений: 23
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Ну хз как удалять, но из displayHeader модуль удаляю и пустота, из global.css тож похоже надо.

Так и делал, величину left подогнал, получилась 252, в одном браузере при помощи которого подгонял - норм, а в других - есть смещение относительно нижнего display Home, у кого влево у кого вправо.

height вообще нету, т.к. во всех браузерах кроме одного норм было, поставил 379 - величина картинок, снизу подрезано стало. можете глянуть http://kroha3.ru/

Да дело даже не в этом, в том почему при изменении масштаба этот модуль двигается..
31 Июля 2013, 11:26:56
Ответ #6
  • Ветеран
  • *****
  • Сообщений: 33028
  • Репутация: +26761/-0
    • Просмотр профиля
Потому что его нужно выводить в header последним
<div id="page" class="container_9 clearfix">
    <div id="header" class="grid_9 alpha omega">
    ....
        <div class="sf-contener clearfix">...</div>
       // вот в этом месте он должен быть
а он у тебя вообще из разметки выпадает, сразу <body> показывается.
31 Июля 2013, 11:40:27
Ответ #7
  • Новичок
  • *
  • Сообщений: 23
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
>Из разметки выпадает.
Вот, уже ближе..

В header.tpl, ааа.

В global.css правил там где и был slider_bottombg, а это 2413-я строка из 2479, т.е. в самом конце..
31 Июля 2013, 11:50:55
Ответ #8
  • Новичок
  • *
  • Сообщений: 23
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В header.tpl нашёл куда вставить, только вот что туда вставить?
Затупиковал я.
31 Июля 2013, 15:14:01
Ответ #9
  • Администратор
  • Ветеран
  • *****
  • Сообщений: 102473
  • Репутация: +34218/-0
    • Просмотр профиля
В header слайдер должен выводиться хуком
{$HOOK_TOP}Этот хук действует для всех страниц и слайдер будет показан на всех страницах интернет-магазина.
Если же вам нужно показывать слайдер только на Главной, тогда нужно использовать хук hookHome.
В файле "название_модуля.php" определите место вывода
function hookHome($params)
{
или
public function hookTop($params)
{

Хук displayHeader выводит данные в теги
<head>
...
</head>
Так подключаются css, js файлы.
public function hookHeader($params)
{
$this->context->controller->addCSS(($this->_path).'style.css', 'all');
}
Слайлера там быть не должно. 
07 Августа 2013, 21:24:30
Ответ #10
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Извиняюсь за оффтоп.
Это базовая функция такая или модуль? Или сам дописывал?

07 Августа 2013, 22:46:57
Ответ #11
  • Новичок
  • *
  • Сообщений: 23
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Это базовая функция такая или модуль? Или сам дописывал?
Тему купили, до темы не знаю было ли это.
И кстате перевода View as в переводах в админке - нет, т.е. надо в коде искать.

Со слайдером тож пока не разобрался, т.к. с хуками и *.tpl вообще не сталкивался, а с css и js на заре их становления, да и то так, на школьном уровне.
Со свободным временем беда, хотел маны на престу почитать, так их толком нет, тем более на русском..

Сейчас слайдер находится в displayHeader, но вроде как не должен, в админке он даже не давал вставляться, добавил обработчик хука, тогда он только вставился.
Если вставлять в displayHome (где он изначально был и не правильно отображался), т.е. где он и должен находиться (только на главной), то его там вообще толком не видно и место где он сейчас (на главной) - пустое остаётся!
Такой косяк и был сразу после установки шаблона.

Буду рад если чуть подробнее объясните, что куда вставить, в частности из поста Виктора Демидова.
Ну или ещё какие свои варианты кто предложит.
08 Августа 2013, 12:11:45
Ответ #12
  • Ветеран
  • *****
  • Сообщений: 33028
  • Репутация: +26761/-0
    • Просмотр профиля
Лучше чем здесь нет объясней, что такое hook в prestashop  и как его использовать.
08 Августа 2013, 15:05:39
Ответ #13
  • Ветеран
  • *****
  • Сообщений: 980
  • Репутация: +5/-0
  • Иногда заглядываю
    • Просмотр профиля
    • Помощь патентообладателям по продаже патентов.
Такое ощущение, что где-то потерялся или лишний закрывающий </div>
попробуй поиграться с ними где то здесь

<div id="columns" class="grid_9 alpha omega clearfix"></div>
или ниже по коду.

Может быть надо заменить привязку блока с left на center

<li class="pager" style="width: 982px; float: [color=red]left;[/color] list-style: none outside none;"><a href="http://kroha3.ru/9--" title="Гигиена для малыша"><img src="/modules//homeslider/images/456e59394d5e948ec04ea7f890523e29.jpg" alt="sample-1" title="Гигиена для малыша" height="379" width="982"></a></li>
Не боги горшки обжигают, не зачем им такой хренью заниматься.