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

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

Опитвам се да добавя бутоните от Material Design Lite (http://www.getmdl.io/) към Joomla 3.x сайт.

Следвах указанията по най-добрия начин и изходът, който получавам, не е стайлинг.

Опитах се да документирам подробно опита си на тази страница: http://www.cherokeecollisioncenter.com/sandbox

Цялата помощ е много ценена.

Отговори:

1 за отговор № 1

Ето правилния отговор за бутоните, които извършват няколко обичайни за местния бизнес мобилни действия:

**<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 преодоля някои от настройките на сайта ми и аз трябваше да ги преодолея отново.


0 за отговор № 2

Стайлингът изглежда доста право за мен ... какво точно се опитвате да постигнете? Имате ли макет? Изчистили сте кеша?

Ако ги използвате на мобилни устройства и ги искатеза да плавате над страницата, която ще трябва да зададете свойството 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>