Многие, перейдя на Joomla 3.2 или версию выше, могли обнаружить в своих шаблонах, что подсказки (tooltips) к полям формы авторизации, регистрации и др. отображаются не правильно или не на своих позициях. Поэтому в статье предлагаю разобраться и исправить вывод подсказок в формах Joomla.
В основном это происходит, когда Вы устанавливаете на свой сайт шаблон, адаптированный для более низких версий Joomla. Дело в том. что подсказки (tooltips) в формах Joomla появились начиная с версии 3.2. А разработчики шаблонов для Joomla версии ниже 3.2 просто не могли предусмотреть этого, и соответственно не оформили отображение подсказок (tooltips).
Как это работает?
Зная причину, можно найти и решение. Всё что Вам нужно, для решения данной проблемы, это просто добавить в свой CSS файл стилей следующее оформление подсказок (tooltips):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
.tooltip { position: absolute; z-index: 1030; display: block; visibility: visible; font-size: 11px; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); } .tooltip.in { opacity: 0.8; filter: alpha(opacity=80); } .tooltip.top { margin-top: -3px; padding: 5px 0; } .tooltip.right { margin-left: 3px; padding: 0 5px; } .tooltip.bottom { margin-top: 3px; padding: 5px 0; } .tooltip.left { margin-left: -3px; padding: 0 5px; } .tooltip-inner { max-width: 200px; padding: 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .tooltip { max-width: 400px; } .tooltip-inner { max-width: none; text-align: left; text-shadow: none; } th .tooltip-inner { font-weight: normal; } .tooltip.hasimage { opacity: 1; } .tip-text { text-align: left; } |
Готово. Если Вас не устраивает стандартное оформление, Вы можете изменить его так, как Вам это будет необходимо. Главное — соблюдать наименования классов.
Вы также можете скачать описанные выше стили отдельным файлом из вложения в конце статьи и подключить его в своём шаблоне.
Если же у Вас последние версии шаблонов, то подобной проблемы возникнуть не должно, по умолчанию в них уже должно быть настроено оформление. Но, если Вы делаете уникальный дизайн для своего сайта собственными руками, не забудьте добавить оформление для вывода подсказок в формах Joomla.
Комментарии
Здесь еще никто не оставлял комментарии.