Insert Phone Link on Contact Us page

Latest Reply from Dave at 2014-04-08 03:15:43
In the Monamour theme, we setup a Contact page using the Contact Form template that was included. We input a Phone Number and an Email Address that are displaying correctly as plain text on the page.

When the Mobile view is used, we want the Phone Number to be displayed as a telephone hyperlink, ex( <a href="tel:15856245519">555-1212</a>)

The only related CSS code we have found is in the /index.css file on line 287:

ul.contact-details li { padding-left:40px; line-height:32px; }


Where in the theme code can we edit this to include the link?
Hi!
Please, give us the URL of your website.
The Contact page is here: http://50.87.148.155/~jmdennis/kids-consignment.com/contact-us/

I tried using this CSS code, but 'content' cannot insert HTML code.
ul.contact-details li.contact2:before {
content:(<a href='tel:15853941982'>) }
ul.contact-details li.contact2:after {
content:(</a>); }

In the WordPress Admin area, I also tried inputting the following link in the Phone Number field, but it displays the code as text.
<a href="tel:15855551212">555-1212</a>

We would like the 'tel' link to only display on Mobile views. How can we do this?
Also, how can we Center the purple Main Menu bar at the top of the page?

In the style.css file, I have tried changing #secondarymenu from "float:left;" to "float:auto;", but it does not display correctly. I have also tried adding the "float:auto;" option in other areas as well, but have not been able to find a place to make it work.
Hi!
1)To write your telephone number as a link you simply need to edit phone number on page Theme Settings --> Contact Form --> Contact details. Just insert the code:
<a href="tel:15855551212">555-1212</a>

into the text field "Value" and save changes.

2)To move your menu you have to increase margin-left in the code:
#secondarymenu {
float:left;
background:#a84dc9;
border:1px solid #dcb0e9;
margin-top:135px; /* old - 95px */
margin-left: 30px;
}

in the file style.css.

Leave a reply

Add codeAdd image