Jump to content


Photo
- - - - -

How to create Mobile Phone and Email Icons?

responsive adaptive mobile

Best Answer Rob , 06 August 2013 - 06:44 PM

Hrmmm.  Now that's a question.

 

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

 

Follow this article:  http://forum.pagelin...-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.

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 pbeaulieu_9828

pbeaulieu_9828

    Member

  • Members
  • 20 posts
  • Framework Version:iblogpro4
  • Country: Country Flag

Posted 06 August 2013 - 12:39 PM

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>



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 August 2013 - 05:31 PM

Hi, 

 

Please see:

Please Login or Register to see this Hidden Content

 

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>



#3 pbeaulieu_9828

pbeaulieu_9828

    Member

  • Members
  • 20 posts
  • Framework Version:iblogpro4
  • Country: Country Flag

Posted 06 August 2013 - 05:57 PM

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?



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 August 2013 - 06:44 PM   Best Answer

Hrmmm.  Now that's a question.

 

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

 

Follow this article: 

Please Login or Register to see this Hidden Content

 

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.



#5 pbeaulieu_9828

pbeaulieu_9828

    Member

  • Members
  • 20 posts
  • Framework Version:iblogpro4
  • Country: Country Flag

Posted 06 August 2013 - 10:01 PM

Thanks for the tip.



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 August 2013 - 03:41 PM

No problem!



#7 pbeaulieu_9828

pbeaulieu_9828

    Member

  • Members
  • 20 posts
  • Framework Version:iblogpro4
  • Country: Country Flag

Posted 10 August 2013 - 08:08 PM

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?



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 August 2013 - 02:39 PM

Excuse me?  I was trying to assist you. There is plenty of instruction, for anyone who elects to read it and try it. 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: responsive, adaptive, mobile