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

/ Просмотров: 6640

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

http://gourmaniacs.com.ua/

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

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

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

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

Комментариев: 7 RSS

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

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

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

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

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

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

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

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

Попробовал задать через настройку компонента 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....

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

<div class="header clearfix">

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

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

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

Проблемы:

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

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

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

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

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

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

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