На время проведения реконструкции сайт переведён в режим "ТОЛЬКО ЧТЕНИЕ" (Read only). Приносим свои извинения!
MaxHub
Полезности по Maxsite CMS

Как сделать вывод логотипа поверх слайдера в шапке сайта?

Вопросы-ответы / 31 июля 2016

Более-менее разобрался со слайдером в последней версии движка. С помощью внутренних настроек компонента добился практически того, чего хотел:

http://gourmaniacs.com.ua/

Однако, не помешало бы разместить поверх скользящих картинок слайдера еще и логотип сайта, возможно с его названием.

Никто ничего подобного не делал?

Понимаю, что нужно в теле слайдера разместить html-код с лого и слоганом, который бы налагался поверх картинок, как кнопки "влево" и "вправо".

Просто не хотелось бы нарушать код компонента слайдера, чтобы потом при обновлениях системы заново не ковыряться.

Комментариев: 7
  1. Виталий, по идее, решить задачу можно только средствами css. Разместите компонент с логотипом перед компонентом со слайдером, а потом средствами css позиционируйте первый блок нужным образом.

    Править стандартные компоненты можно вполне безболезненно, если вы правите их не в папке дефолтного шаблона, а в папке своего шаблона, в который предварительно скопировали все файлы дефолтного. Папка вашего шаблона обновляться не будет без вашего желания и действия.

  2. Если знаете CSS то сделайте следующее:

    1. Задайте в шапке вывод div с картинкой логотипом

    2. Этому div задайте абсолютное позиционирование, z-index повыше (999 к примеру), выравнивание текста по центру и ширину в 100%

    3. Самому блоку шапки задайте позиционирование relative

    4. Картинке задайте нужный отступ сверху.

    Были бы там элементы с дивом и лого - скинул бы код стилей. Но так как их нету. Увы smile

  3. Попробовал задать через настройку компонента Lightslider - не получилось.

    <img src="https://www.dropbox.com/s/b3e7umv7yufhsia/1.png?dl=0">

    Выдает не то, что нужно.

    <img src="https://www.dropbox.com/s/cuc7b650fm8evp7/2.png?dl=0">

    Может быть, как-то по аналогии с левой стрелочкой в слайдере, позиция которой задается в файле стилей lightslider:

    http://gourmaniacs.com.ua/application/maxsite/templates/default/components/lightslider/style.css
    http://gourmaniacs.com.ua/application/maxsite/templates/default/components/lightslider/img/controls.png

    Но там все перемешано с джаваскриптом, не могу отдельно разобраться в css....

  4. Я же выше написал как. Для чего его вставлять в сам слайдер?? Вставьте в шапку, в открывающемся блоке header

    <div class="header clearfix">

    от него уже и можно будет плясать

  5. Вроде бы получилось.

  6. Добавьте это к стилям блока, что бы он был по середине:

    left: 50%;
    margin-left: -75px;

    Проблемы:

    1. Почему так долго грузится сайт?

    2. Пока идёт загрузка - слайдер очень маленький по высоте. Иконка сайта просто висит поверх меню и текста.

    3. Косяки в адаптивной вёрстке

  7. Пока двигали лого туда-сюда, решили, что лучше слева пусть будет, а не посередине.

    1. Долго - это сколько у вас? Виртуальный сервер физически находится в Париже.

    2. Ну тут, видимо, особенности движка - компонента слайдера подгружается в последнюю очередь.

    3. Что имеется в виду?