MaxHub
Служба Заботы MaxSite CMS

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

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

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

Контент только для авторизованных - хотите войти или зарегистрироваться?

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

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

Понимаю, что нужно в теле слайдера разместить 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. Что имеется в виду?

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Вход / регистрация или войти без комментирования
  Имя и сайт используются только при регистрации

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)