• 0

How to create Mobile Phone and Email Icons?


Question

Posted · Report post

I am using pagelines framework. I built my child theme. Being responsive, everything renders as it should on mobile devices. The client though wants icons on the bottom of a smartphone to do one touch phone dialing and email. Any idea how this is done within the framework. When I was building adaptive sites, we would create a css specifically for mobile devices, create a fixed footer with block level elements and then just add the code to be able to place a call when one hits the icon. I have no idea how to do it from within pagelines. Here is how my code used to look with an 'adaptive site'.

 

<footer class="group">
      <p>1111 Smith St. Anywhere, CA 10000 • 415-555-1200</p>
      <nav id="bottomnav">
            <ul>
                  <li id="fbmenu"><a href="/">menu</a></li>
                  <li id="fbaboutus"><a href="aboutus.html">about us</a></li>
                  <li id="fbcallus" class="handheld"><a href="tel:18005555555">call us</a></li>
                  <li id="fbmap"><a href="map.html">map</a></li>
            </ul>
      </nav>
</footer>

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Hrmmm.  Now that's a question.

 

My best answer is, that our Browser Specific CSS plugin would help.

 

Follow this article:  http://forum.pagelines.com/topic/28568-framework-store-free-products/

 

Locate the browser-specific-css plugin in the list of free items.  Install it as a plugin, the old-fashioned way, and activate it.  The plugin should give you the code for mobile devices and for standard browsers alike. 

 

If we change the code a bit, so that the <i class="icon-phone"></i><a href...., you could, in theory, set some custom code so that for IE, Safari, Chrome, Firefox, etc (the computer browsers) you can apply .icon-phone {display: none;}

That would hide the icon from the standard browsers.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, 

 

Please see: http://support.pagelines.me/docs/miscellaneous/font-awesome/

 

Instead of <li id="fbcallus" class="handheld"><a href="tel:18005555555">call us</a></li> you can use

<div style="font-size: 24px;">

<i class="icon-phone"> <a href="tel:18005555555">call us</a></i>

</div>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rob,

   I guess the question is, if I am not using a separate style sheet for mobile, where would I put this in the html so that it only shows up on a smartphone?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the tip.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Moderator, what are you talking about? Even Rob did not have a solution, I was being nice. Work on your product so people do not ask silly questions on things that should be included in the framwork or at least a paid plugin. Seriously a call button on a mobile site?!! You don't have the foresight to include those types of buttons or instructions?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excuse me?  I was trying to assist you. There is plenty of instruction, for anyone who elects to read it and try it.  http://docs.pagelines.com/tutorials/shortcodes

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now