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

  • 40 Ответов
  • 1310 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Chebyrek

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




*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
<div class="callme"><div>

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

Можно просто между дивами картинку, тогда в CSS убрать background.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

  • ***
  • 163
  • 1
Добавил новую позицию в модуль.
Спойлер
[свернуть]

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

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
я не пойму, вы хотите чтоб телефоны были в прямоугольнике?
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

Как можно ближе к блоку телефонов.

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
#callme {
    display: block;
    position: absolute;
    top: 91px;
    left: 59%;
}

Только я не смотрел, как вы тот div делаете и как это будет на других устройствах.
Это вообще нужно в 1 диве делать, а не как вы разбросали по кусочкам.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

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

вот div
Спойлер
[свернуть]

*

vipiusss

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

Для картинки вы р-99 сделали, телефоны в позиции search.
Почему не сделаете сразу всё в одном месте?
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

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

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

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
щас, нарисую вам ваш div, освобожусь, напишу тут
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

umbabaraumba

  • *******
  • 2441
  • 152
  • если помог можете поставить +
Перенесите <div id="callme"> в <div id="header">
тогда вам проще будет его спозиционировать .
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

*

Chebyrek

  • ***
  • 163
  • 1
Перенесите <div id="callme"> в <div id="header">
тогда вам проще будет его спозиционировать .
Куда что перенести?
Спойлер
[свернуть]

*

umbabaraumba

  • *******
  • 2441
  • 152
  • если помог можете поставить +
Спойлер
[свернуть]
    <div id="callme">
      <jdoc:include type="modules" name="position-99" />
    </div>
перенесите над
    <!-- Search -->
    <div id="search">
      <jdoc:include type="modules" name="position-0" />
    </div>
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

*

vipiusss

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

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

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

Спойлер
[свернуть]

Спойлер
[свернуть]

« Последнее редактирование: 16.05.2016, 18:35:18 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

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

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

Спойлер
[свернуть]

Спойлер
[свернуть]




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


*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
Там в калбеке модуле div есть, помоему vopros-1 или както так, навскидку не помню, вот div с картинкой оберните дивом модуля и будет вам она кликабельна с функциями модуля обр.звонка.
Т.е. мой div вставьте вместо <php текст Обратный звонок?> в модуле обр.звонка.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

Короче что-то я со стилями запутался(((  :o
« Последнее редактирование: 16.05.2016, 20:29:44 от Chebyrek »

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
а что вы с картинкой сделали? не можете адекватно уменьшать-уменьшите в CSS (добавьте к стилю) width:210px;height:70px;
А картинку загрузите старую (только текст внутри удалите)
И чего у вас там прыгают номера?
Я же дал css:у меня ровненько всё.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

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

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

далее файл template.css настройки стиля
Спойлер
[свернуть]

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

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

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

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


« Последнее редактирование: 17.05.2016, 02:35:55 от Chebyrek »

*

vipiusss

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

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

///

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

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

Она состоит из двух элементов, поэтому не смог выложить сразу скомпанованную, компануется всё при поможи CSS.
« Последнее редактирование: 17.05.2016, 10:42:43 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

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

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

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

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
ок, тогда сделаю, вышлю сюда
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

  • ***
  • 163
  • 1
 
ок, тогда сделаю, вышлю сюда
*DRINK*

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
Опубликуйте чистый 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 не делал, всё на скорую руку, уже сами допиливайте.
Вам всё равно там стили править, т.к. у вас на сайте белый цвет указан и слова на белом фоне на всплывашке будут невидны.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

*

umbabaraumba

  • *******
  • 2441
  • 152
  • если помог можете поставить +
Не хочет почему-то подгружать картинки(
Потому что пути неправильно указаны в CSS
background: url('../../../images/c2.png')
background: #000 url('../../../images/c1.gif')
Надо вот так
background: url('../images/c2.png')
background: #000 url('../images/c1.gif')
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
Пути в стилях измените, у меня стояли относительные, вот у вас и ищет из папки имидж из корня.
Путь измените на папку модуля и в папку, где они лежат.
И #000 уберите, то я для себя делал, т.к. картинки "прозрачные", а у вас тёмный и так фон.
К стилям new_link добавьте     text-decoration: none; - подчёркивания не будет
Я видно в шаблоне уже ставил ранее себе.
« Последнее редактирование: 17.05.2016, 17:09:48 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Chebyrek

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

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

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
вам надо только 1 модуль включить, калбэк, там уже он с телефонами.
ваш отключите.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
Ну посмотрите, у вас #callme в индексе стоит в темплейте, удалите же старый стиль этот.
У вас навсяк чистый в стиле модуля уже стоит, чтоб вы могли управлять всеми дивами сразу.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями