Forum Support

Shape 5
March 28, 2024, 08:39:55 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Social Icons  (Read 1012 times)
steviegoog
Jr. Member
**
Offline Offline

Posts: 274



« on: March 22, 2016, 01:24:35 PM »

Hi im trying to remove the social icons and replace with a very simple image of  tripdadvisor logo that links to the tripadvisor review page. 

The problem im getting is i cant seem to find where to remove the share icon .

 
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: March 23, 2016, 12:29:34 PM »

Hello,

The social icon is actually located in the index.php file. Just look for the below near the bottom of the file and the span is the icon:

Code:
<?php if($s5_pos_custom_7 == "published") { ?>
<div id="s5_socialicons">
<div id="s5_socialicons_active">
<?php s5_module_call('custom_7','notitle'); ?>
</div>
<span class="ion-android-share-alt"></span></div>
<?php ?>
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
AquaClub
Jr. Member
**
Offline Offline

Posts: 35



« Reply #2 on: April 07, 2016, 12:10:52 PM »

I have problem with the social icon on mobile devices. Since it is not possible to hover on the social icons button when using mobile device, people need to touch on the share icon to see social icons and when they do so, the social icon on the bottom is activated. So the site goes to the social site directly. To solve this problem, I want to get rid of the share icon and leave the social icons as if they are active at all times.

How can I do that? Can you please help?

Thank you.

 
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #3 on: April 08, 2016, 12:19:25 PM »

Hello,

To have them show at all times just change the below display to block and this should do it:

Code:
#s5_socialicons_active {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #fff;
    bottom: 0;
    display: block;
    left: -1px;
    padding-top: 7px;
    position: absolute;
    width: 42px;
}

template.css line 2777
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
AquaClub
Jr. Member
**
Offline Offline

Posts: 35



« Reply #4 on: April 08, 2016, 12:44:05 PM »

It works perfectly! Thank you so much.
Logged
bushidoe
Jr. Member
**
Offline Offline

Posts: 3



« Reply #5 on: July 13, 2016, 09:24:38 PM »

Hello,

Social icons functionality do work on your demo site as expected using a mobile device but it won't work on a clean install (at least not in my case either). AquaClub clearly explained the wrong behavior.

I do want to stay with original functionality, please advice on how to solve this issue.

Thank you.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #6 on: July 16, 2016, 04:58:39 PM »

Hello,

Can you post a URL to your site illustrating the issue? I checked on my local copy and not seeing any issues with the icons. Ensure they are enabled in the Template Manager and that you are using the proper markup to call the icons.

Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bushidoe
Jr. Member
**
Offline Offline

Posts: 3



« Reply #7 on: July 18, 2016, 08:32:38 PM »

Hello Mike,

Thank you for your immediate reply.

I removed RSS icon because I don't use it and I think that is where the problem lies. It seems the issue happens only on mobile devices when the last social icon, the one right behind the share icon, is enabled with an href attribute. I just reinserted RSS icon with no link and the problem ended.

You can replicate the issue by activating your last social icon, i.e. RSS icon in demo site, with a link.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #8 on: July 19, 2016, 10:43:20 PM »

Hello,

I just tested installing a fresh copy and applying a URL to the RSS icon. I am not seeing any issues on my PC or mobile device with the icons.

Regards,
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bushidoe
Jr. Member
**
Offline Offline

Posts: 3



« Reply #9 on: July 20, 2016, 09:21:37 PM »

Hello Mike,

It seems this issue has to do with "Ghost clicks" in mobile browsers.

Here you have two examples of this common problem:

"When users tap the screen on an iPad, iOS sends the TOUCHSTART and TOUCHEND events which jQuery Mobile treats as a "tap". But then 300ms later, iOS sends a "click" event. If I respond to the "tap" by advancing to the next page before the "click" occurs then the next page receives the "click" and if a button on the new page happens to appear in the location of the tap then it gets clicked."

"Now the app is performing slightly better on the phone. However, it is performing a touch click, and then a regular click, ie potentially double clicks, or when the next slide comes in, it clicks on something there. In my case a form is appearing, and the input field that appears in the space where the button clicked was, is selected. Ghost click."

The simplest workaround for me was to include the "ion-android-share" icon itself as the last social icon with no URL applied. This way the ghost click has no effect on my site.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #10 on: July 22, 2016, 09:46:56 PM »

Hello,

Alright glad you got it sorted with your workaround. iOS definitely has some strange functionality sometimes.

Regards,
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.