Page 1 of 1

SNS of Contact page

Posted: 24 Mar 2017, 05:41
by Leo
Karl, 
I have two question regarding the SNS of Contact page.
1.How can I customize the footer SNS of it? I can only find there's settings->footer to set the SNS icon for the whole website.
2.Can I hide these SNS icons of the Contact page or can I type words instead of icons, since such Like QQ or wechat. I can add a "title" attribute to display my QQ number or wechat number, when mouse hove on in the general footer settings, while they cannot display in the contact page or view in mobile.

Thanks
Leo Cao

Re: SNS of Contact page

Posted: 24 Mar 2017, 07:38
by hardliner
What is SNS?

Re: SNS of Contact page

Posted: 24 Mar 2017, 10:08
by mjau-mjau
Hi Leo. I am not sure what you mean by SNS. The contact page is a pretty simple page with just three form input fields: Name, Email and Message.

Re: SNS of Contact page

Posted: 24 Mar 2017, 13:37
by Leo
I mean the three social networks icons below the form of the contact layout. Is is possible to edit? Can these icons to be hidden?

Re: SNS of Contact page

Posted: 24 Mar 2017, 14:14
by mjau-mjau
You mean in the Contact page MENU dropdown widget? Icons displaying here are inherited from your icon-buttons in panel -> settings -> footer. They cannot be set specifically for the contact-form widget, although they can be disabled from contact page -> Menu, scroll down to "data", see [icon-buttons].
Image

Re: SNS of Contact page

Posted: 26 Mar 2017, 09:47
by Leo
Thanks Karl! Is it possible when click the social icon, displays a Medal page? For example, when click the WeChat , displays it's Q-code picture?
Image

Re: SNS of Contact page

Posted: 26 Mar 2017, 13:15
by mjau-mjau
Yes. Go to panel settings -> footer, and include this at the bottom:
Code
<div id="wechat-q-code" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<a class="close-reveal-modal" aria-label="Close"><i class="fa fa-close"></i></a>
<h2>Some Title</h2>
<!-- Add your custom html code for the images here. For example: -->
<img src="/wechat-q-code.jpg">
</div>
Then, for the icon button, use something like this:
Code
<a href="#" data-reveal-id="wechat-q-code"></a>

Re: SNS of Contact page

Posted: 27 Mar 2017, 11:12
by Leo
Thanks Karl!I just tried,it works!I adjust minor on the icon button, so that the icon can displays as "WeChat",as well as the title could be displays well instead of # when the mouse is hovering on.
Code
<a href=# data-icon="wechat" data-reveal-id="wechat-q-code" title=WeChat:blahblah></a>