0

I'm attempting to add the buttons from Material Design Lite (http://www.getmdl.io/) to a Joomla 3.x site.

I followed the directions to the best of my ability and the output I get is not getting the styling.

I attempted to thoroughly document my attempt on this page: http://www.cherokeecollisioncenter.com/sandbox

All help is greatly appreciated.

Brad Russell
  • 23
  • 5
  • You should provide more info on what exactly you're trying to achieve, like mockups, jsfiddle examples. and so on. – Mauker Sep 29 '15 at 15:38
  • It won't let me add a 3rd link with my reputation level, but I just want to start with something simple like the Colored FAB button here: http://www.getmdl.io/components/index.html#buttons-section and move on to changing the icon later. – Brad Russell Sep 30 '15 at 01:47

2 Answers2

1

Here is the correct answer for buttons that take a couple common local business mobile actions:

**<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>**

You must also include the two CSS style sheets and the JS script file in the head of each page. In my case the hosted CSS overrode some of my site settings and I had to override them again.

Brad Russell
  • 23
  • 5
0

The styling looks pretty much right to me... what exactly are you trying to achieve? Do you have a mockup? Have you cleared your cache?

If you're using these on mobile and you want them to float over the page you're going to have to set the CSS style position property to fixed. You can change the icon by replacing "add" with the name of any icon on the material icons page: https://www.google.com/design/icons/

A floating home button would probably look something like this:

<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>
Kevin
  • 7
  • 2
  • You were right. I had some cache left or something. Just not being thorough and also being inexperienced with some of this. The buttons work now, as you described. I also had to add the onclick action to redirect the user to make a call, get directions on map, or send email (the buttons are used on mobile version of site only). Your input helped me find the final answer, so thank you. – Brad Russell Oct 02 '15 at 13:31