Матеріал дизайну Lite на Joomla 3.x - Joomla, матеріал-дизайн, матеріал-дизайн-lite, joomla3.4

Я намагаюся додати кнопки з Material Design Lite (http://www.getmdl.io/) на сайт Joomla 3.x.

Я прослідкував за напрямками, наскільки це можливо, і вихід, який я отримую, не отримує стиль.

Я спробував ретельно документувати свою спробу на цій сторінці: http://www.cherokeecollisioncenter.com/sandbox

Вся допомога дуже вдячна.

Відповіді:

Ось правильна відповідь для кнопок, які виконують кілька спільних мобільних дій для місцевих підприємств:

**<p style="text-align: center;"><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href="tel:1234567890""><i class="material-icons">call</i> </button><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" style="margin-left: 10%; margin-right: 10%;" onclick="location.href="//www.google.com/maps/dir//remaining-portion-of-link-to-directions""><i class="material-icons">directions</i> </button><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href="mailto:info@example.com""><i class="material-icons">mail</i> </button>
</p>**

Ви повинні також включити два типи стилів CSS і файл сценарію JS в голові кожної сторінки. У моєму випадку розміщений CSS перекрив деякі з моїх налаштувань сайту, і мені довелося знову їх перевизначити.

Стиль виглядає дуже правильно для мене ... що саме ви намагаєтеся досягти? У вас є макет? Ви очистили свій кеш?

Якщо ви використовуєте їх на мобільних пристроях, і ви їх хочетеплавати над сторінкою, яку ви повинні будете встановити властивість позиції стилю CSS на фіксовану. Ви можете змінити значок, замінивши "add" на ім'я будь-якої піктограми на сторінці значків матеріалу: https://www.google.com/design/icons/

Кнопка з плаваючою будовою, напевно, виглядатиме приблизно так:

<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" style="position:fixed; right:10px; bottom:10px;"><i class="material-icons">home</i> </button>