Форум русской поддержки Joomla!® CMS
05.12.2016, 02:29:20 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

Размещения картинки в нужном месте шаблона?

 (Прочитано 832 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« : 15.05.2016, 12:18:19 »

Здравствуйте! Подскажите каким способом лучше разместить картинку с ссылкой на заказ обратного звонка в шаблоне.
1. Создать новую позицию с шаблоне и вставить модулем эту картинку.
2. В ручную вставлять картинку в этот блок.
Как будет правильнее и легче.
Спасибо!
Сайт www. sdsua . com



Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #1 : 15.05.2016, 12:36:11 »

<div class="callme"><div>

.callme {
background: url(/images/callme.png) no-repeat;
padding-***:***px;
}

Можно просто между дивами картинку, тогда в CSS убрать background.
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #2 : 16.05.2016, 15:38:26 »

Добавил новую позицию в модуль.
Показать текстовый блок

Помогите настроить стиль как на картинке, указывать расстояние в процентах или в пикселях?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #3 : 16.05.2016, 15:50:14 »

я не пойму, вы хотите чтоб телефоны были в прямоугольнике?
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #4 : 16.05.2016, 15:59:11 »

я не пойму, вы хотите чтоб телефоны были в прямоугольнике?

Как можно ближе к блоку телефонов.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #5 : 16.05.2016, 16:05:28 »

#callme {
    display: block;
    position: absolute;
    top: 91px;
    left: 59%;
}

Только я не смотрел, как вы тот div делаете и как это будет на других устройствах.
Это вообще нужно в 1 диве делать, а не как вы разбросали по кусочкам.
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #6 : 16.05.2016, 16:17:20 »

#callme {
    display: block;
    position: absolute;
    top: 91px;
    left: 59%;
}

Только я не смотрел, как вы тот div делаете и как это будет на других устройствах.
Это вообще нужно в 1 диве делать, а не как вы разбросали по кусочкам.

вот div
Показать текстовый блок
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #7 : 16.05.2016, 16:19:29 »

я имел ввиду с телефонами сделать всё в 1 модуле и в нём в 1 диве.
а у вас модули разные, дивы разные.

Для картинки вы р-99 сделали, телефоны в позиции search.
Почему не сделаете сразу всё в одном месте?
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #8 : 16.05.2016, 16:31:35 »

я имел ввиду с телефонами сделать всё в 1 модуле и в нём в 1 диве.
а у вас модули разные, дивы разные.

Для картинки вы р-99 сделали, телефоны в позиции search.
Почему не сделаете сразу всё в одном месте?

К сожалению знаний не хватает (((
Я и так уже третий день сижу это колбашу ))))
Спасибо Вам и на этом)))
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #9 : 16.05.2016, 16:41:50 »

щас, нарисую вам ваш div, освобожусь, напишу тут
Записан
umbabaraumba
Практически профи
*******

Репутация: +153/-1
Offline Offline

Пол: Мужской
Сообщений: 2558

если помог можете поставить +


« Ответ #10 : 16.05.2016, 16:48:06 »

Перенесите <div id="callme"> в <div id="header">
тогда вам проще будет его спозиционировать .
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #11 : 16.05.2016, 16:53:07 »

Перенесите <div id="callme"> в <div id="header">
тогда вам проще будет его спозиционировать .
Куда что перенести?
Показать текстовый блок
Записан
umbabaraumba
Практически профи
*******

Репутация: +153/-1
Offline Offline

Пол: Мужской
Сообщений: 2558

если помог можете поставить +


« Ответ #12 : 16.05.2016, 17:06:42 »

Показать текстовый блок
    <div id="callme">
      <jdoc:include type="modules" name="position-99" />
    </div>
перенесите над
    <!-- Search -->
    <div id="search">
      <jdoc:include type="modules" name="position-0" />
    </div>
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #13 : 16.05.2016, 17:31:37 »

Так зачем в разные модули?
Вот вам готовое:вставьте дивы в модуль один, CSS  в шаблон.
Плясал от левого края.
Сделал вам с цифрами спец, чтобы вы могли регулировать если что отступы всех частей.
Так что некоторые падинги и маргины удалите сами.

Картинку измените:я её уменьшил.
Размер:210х70

Вот и вы сделайте вашу гифку такого размера, на прозрачном фоне, внутри надписи никакие писать не надо!

Показать текстовый блок

Показать текстовый блок

« Последнее редактирование: 16.05.2016, 17:35:18 от vipiusss » Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #14 : 16.05.2016, 17:56:11 »

Так зачем в разные модули?
Вот вам готовое:вставьте дивы в модуль один, CSS  в шаблон.
Плясал от левого края.
Сделал вам с цифрами спец, чтобы вы могли регулировать если что отступы всех частей.
Так что некоторые падинги и маргины удалите сами.

Картинку измените:я её уменьшил.
Размер:210х70

Вот и вы сделайте вашу гифку такого размера, на прозрачном фоне, внутри надписи никакие писать не надо!

Показать текстовый блок

Показать текстовый блок




Принципе Вы правы по поводу двух модулей! Почему я сразу не догадался)))
НО! К чему я пришел!
В данный момент поставил модуль mod_callback и эта позиция которую я сделал как раз к месту)))
Неправда ли?

Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #15 : 16.05.2016, 18:42:39 »

Там в калбеке модуле div есть, помоему vopros-1 или както так, навскидку не помню, вот div с картинкой оберните дивом модуля и будет вам она кликабельна с функциями модуля обр.звонка.
Т.е. мой div вставьте вместо <php текст Обратный звонок?> в модуле обр.звонка.
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #16 : 16.05.2016, 19:21:03 »

Все сделал, только выровнять как надо осталось!

Короче что-то я со стилями запутался(((  Shocked
« Последнее редактирование: 16.05.2016, 19:29:44 от Chebyrek » Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #17 : 16.05.2016, 20:12:28 »

а что вы с картинкой сделали? не можете адекватно уменьшать-уменьшите в CSS (добавьте к стилю) width:210px;height:70px;
А картинку загрузите старую (только текст внутри удалите)
И чего у вас там прыгают номера?
Я же дал css:у меня ровненько всё.
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #18 : 17.05.2016, 01:30:27 »

К сожалению у меня не получается(((  Sad
Вообще не пойму что не так... Всё кривое... и картинка не меняет размер. а пропадает куда-то.

Делаю следующие!

в файл index.php
вставляю...
Показать текстовый блок
Без строки <div class="callme_text_1">Заказ обратного звонка</div> т.к. я слова сделал одной картинкой.

далее файл template.css настройки стиля
Показать текстовый блок

.callme_text_1 убрал так как текст не нужен.

И все криво отображается!

далее: Вы предлагаете
Там в калбеке модуле div есть, помоему vopros-1 или както так, навскидку не помню, вот div с картинкой оберните дивом модуля и будет вам она кликабельна с функциями модуля обр.звонка.
Т.е. мой div вставьте вместо <php текст Обратный звонок?> в модуле обр.звонка.

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


« Последнее редактирование: 17.05.2016, 01:35:55 от Chebyrek » Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #19 : 17.05.2016, 08:27:17 »

это просто праздник какой-то...
да при чём тут индекс шаблона?
и почему слова на картинке?они же будут искажаться в зависимости от устройства!

вам же ещё @media нужно адаптировать под мобильные и нетбуки и т.д. блока.
/// Короче ждите, по мере свободности изменю  вам калбек ваш, вам только надо будет его установить в позицию Search и опубликовать.
Вопрос:можно ли подобрать другую гифку?Или именно эта нужна?Она не качественная ну ни как!

///

Типа что-то flat-кнопки: на оранжевом фоне(раз у вас оранж) будет надпись Заказать звонок обр., сама трубочка пульсирует, сбоку телефоны, в каком виде ещё не придумал, но если идея нравится-сделаю, вы напишите стоит ли менять, чтоб не направсно делал.
Кнопка будет кликабельна со всплывашкой вашей, там соответственно тоже видо изменить кнопку в стиль и сменить бардюры под дизайн кнопки.
Жду ответ.

Вот как пульсирует кнопка:

Она состоит из двух элементов, поэтому не смог выложить сразу скомпанованную, компануется всё при поможи CSS.
« Последнее редактирование: 17.05.2016, 09:42:43 от vipiusss » Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #20 : 17.05.2016, 12:09:07 »

Кнопка будет кликабельна со всплывашкой вашей, там соответственно тоже видо изменить кнопку в стиль и сменить бардюры под дизайн кнопки.
Жду ответ.

Если Вам не составит труда, то жду.
Если необходима помощь, готов помочь.

Кнопку делал сам, цвет выбирал чтоб в один тон с логотипом был.

А вообще конечно самому хотелось сделать потому что интересно мне это))
« Последнее редактирование: 17.05.2016, 12:14:08 от Chebyrek » Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #21 : 17.05.2016, 12:34:48 »

ок, тогда сделаю, вышлю сюда
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #22 : 17.05.2016, 13:00:49 »

 
ок, тогда сделаю, вышлю сюда
drink
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #23 : 17.05.2016, 14:48:17 »

Опубликуйте чистый callback в нужную вам позицию (у вас Search).
http://webservice.in.ua/call.zip
Распакуйте архив, замените на папку /modules/mod_callback
Вызов всплывашки сделал только на слова "Заказать обратный звонок"

Будет(трубка пульсирует):





Обратите внимание, что я прописал также (навсяк) ссылку на телефоны.
Захотите-повесите туда ссылку на контакты, хотите-уберите.
Ещё там чёрный фон встречается иногда, т.к. я тестил на белом сайте, уберите его: /modules/mod_callback/tpl/style.css.
там же и всякие отступы можете подредактировать под себя.
Всплывашку уже сами подрихтуете, копирайт тоже сами поставите, я скрыл его, чтоб мне не мешался display: none; тут:

Код:
#form_vopros #form_cb .powered {
position: absolute;
bottom: 0;
right: 6px;
text-align: right;
font-size: 11px;
font-family: Tahoma, Arial;
        display: none;
}

@media не делал, всё на скорую руку, уже сами допиливайте.
Вам всё равно там стили править, т.к. у вас на сайте белый цвет указан и слова на белом фоне на всплывашке будут невидны.
Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #24 : 17.05.2016, 15:52:15 »

Я конечно благодарен Вам) Но не работает(
Не хочет почему-то подгружать картинки(
« Последнее редактирование: 17.05.2016, 15:57:15 от Chebyrek » Записан
umbabaraumba
Практически профи
*******

Репутация: +153/-1
Offline Offline

Пол: Мужской
Сообщений: 2558

если помог можете поставить +


« Ответ #25 : 17.05.2016, 16:04:00 »

Не хочет почему-то подгружать картинки(
Потому что пути неправильно указаны в CSS
background: url('../../../images/c2.png')
background: #000 url('../../../images/c1.gif')
Надо вот так
background: url('../images/c2.png')
background: #000 url('../images/c1.gif')
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #26 : 17.05.2016, 16:05:04 »

Пути в стилях измените, у меня стояли относительные, вот у вас и ищет из папки имидж из корня.
Путь измените на папку модуля и в папку, где они лежат.
И #000 уберите, то я для себя делал, т.к. картинки "прозрачные", а у вас тёмный и так фон.
К стилям new_link добавьте     text-decoration: none; - подчёркивания не будет
Я видно в шаблоне уже ставил ранее себе.
« Последнее редактирование: 17.05.2016, 16:09:48 от vipiusss » Записан
Chebyrek
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 163



« Ответ #27 : 17.05.2016, 16:34:56 »

Телефонный блок внизу.
Не могу понять какой стиль отвечает за его расположение.
И полоса на картинке. подскажите где поправить?
Спасибо!

p.s. как вариант оставить только модуль. Телефоны убрать.
и включить модуль с телефонами как было ранее.
Что скажите?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #28 : 17.05.2016, 16:43:32 »

вам надо только 1 модуль включить, калбэк, там уже он с телефонами.
ваш отключите.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #29 : 17.05.2016, 17:00:35 »

Ну посмотрите, у вас #callme в индексе стоит в темплейте, удалите же старый стиль этот.
У вас навсяк чистый в стиле модуля уже стоит, чтоб вы могли управлять всеми дивами сразу.
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet